vue全局提示插件怎么開發(fā)

這篇文章主要講解了“vue全局提示插件怎么開發(fā)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue全局提示插件怎么開發(fā)”吧！

插件

插件通常用來為 Vue 添加全局功能。插件的功能范圍沒有嚴(yán)格的限制——一般有下面幾種：1.添加全局方法或者 property。2.添加全局資源：指令/過濾器/過渡等。3.通過全局混入來添加一些組件選項(xiàng)。4.添加 Vue 實(shí)例方法，通過把它們添加到 Vue.prototype 上實(shí)現(xiàn)。5.一個(gè)庫(kù)，提供自己的 API，同時(shí)提供上面提到的一個(gè)或多個(gè)功能。

vue插件的編寫方法一般分為以上5類，其注冊(cè)與綁定機(jī)制如下：

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 添加全局方法或?qū)傩?，?  vue-custom-element
            // 邏輯...
        }
        Vue.directive('my-directive', {  // 2. 添加全局資源：指令/過濾器/過渡等，如 vue-touch
            bind (el, binding, vnode, oldVnode) {
                // 邏輯...
            }
            ...
        })
        Vue.mixin({
            created: function () {  // 3. 通過全局 mixin方法添加一些組件選項(xiàng)，如: vuex
                // 邏輯...
            }
            ...
        })
        Vue.prototype.$myMethod = function (options) {  // 4. 添加實(shí)例方法，通過把它們添加到 Vue.prototype 上實(shí)現(xiàn)
            // 邏輯...
        }
    }
}

上方代碼使用了es6部分語(yǔ)法列出了4種編寫插件的方法，而install是注冊(cè)插件主要調(diào)用的方法，包含了兩個(gè)參數(shù)（Vue實(shí)例和自定義配置屬性options）

開發(fā)插件

我們這里主要使用的是第四種方法，將我們的插件函數(shù)注冊(cè)到Vue.prototype實(shí)例上面
首先我們?cè)趐lugin里創(chuàng)建個(gè)toast文件夾用來放置插件,里面包含兩個(gè)文件，toast.vue和toast.js，

然后在編寫我們的樣式結(jié)構(gòu)文件toast.vue

這里我們使用了一個(gè)visible變量來控制提示框的顯示，message為提示的消息

<template>
      <div v-if="visible">
          <div>{{message}}</div>
      </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      message: ""
    };
  }
};
</script>

接著在toast.js里面編寫插件的方法與處理函數(shù)

import ToastComponent from './toast.vue'    //引入toast.vue組件export default {    // 導(dǎo)出一個(gè)對(duì)象，里面包含vue注冊(cè)插件所調(diào)用的方法install
    install: function (Vue) {
        const ToastConstructor = Vue.extend(ToastComponent)    // 將toast.vue組件生成為Vue的子類
        const instance = new ToastConstructor();    // 生成一個(gè)該子類的實(shí)例    instance.$mount(document.createElement('div'))    // 將這個(gè)實(shí)例掛載在新創(chuàng)建的div上，并加入到body中
    document.body.appendChild(instance.$el)

    // 通過Vue的原型注冊(cè)一個(gè)方法$toast，有兩個(gè)參數(shù)（msg為提示的文字，duration為延時(shí)關(guān)閉）
    Vue.prototype.$toast = (msg, duration = 1500) => {
        if (instance.visible) return;    // visible是toast.vue組件的一個(gè)變量，用來控制提示框的顯示

        instance.message = msg;
        instance.visible = true;

        setTimeout(() => {    // 默認(rèn)延時(shí)1.5s關(guān)閉提示框
            instance.visible = false;
        }, duration);
    }
}}

這樣我們就完成了組件的封裝，是不是很簡(jiǎn)單

使用插件

現(xiàn)在把我們封裝好的插件引入到main.js中

import toast from './plugin/toast'
Vue.use(toast);

然后我們就可以在組件中使用它了

this.$toast('提示文字')

我們現(xiàn)在把toast.vue添加上樣式和過度效果，讓它看起來更加的友好，以下是toast.vue文件的全部?jī)?nèi)容

<template>
   <!-- 全局提示框 -->
   <transition name="slide-fade">
      <div v-if="visible">
          <div>{{message}}</div>
      </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      message: ""
    };
  }
};
</script>
<style scoped>
.dialog-tips{
    min-width: 380px;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #e1f3d8;
    position: fixed;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    background-color: #f0f9eb;
    overflow: hidden;
    padding: 15px 15px 15px 20px;
    display: flex;
    align-items: center;
    color: #67c23a;
}.slide-fade-enter, .slide-fade-leave-to {
  margin-top:-30px;
  opacity: 0;}.slide-fade-enter-active,.slide-fade-leave-active {
  transition: all .3s ease;
}.slide-fade-enter-to,.slide-fade-leave {
  margin-top:0px;
  opacity:1;
}
</style>

感謝各位的閱讀，以上就是“vue全局提示插件怎么開發(fā)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue全局提示插件怎么開發(fā)這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！