在沒有封裝外掛之前，如果不使用第三方外掛，那麼很多情況下我們會編寫幾個常用的元件來提供給頁面使用，如Alert/Loading元件，而你可能需要在很多頁面中引入並且通過components註冊元件，但是像這樣使用率很高的元件一般我們希望全域性註冊後直接就可以在相應頁面使用，因此我們需要將他們封裝成外掛，這裡我們編寫一個toast全域性提示外掛來作個簡單的介紹

外掛

外掛通常用來為vue新增全域性功能。外掛的功能範圍沒有嚴格的限制——一般有下面幾種：

1. 新增全域性方法或者 property。
2. 新增全域性資源：指令/過濾器/過渡等。
3. 通過全域性混入來新增一些元件選項。
4. 新增vue例項方法，通過把它們新增到 Vue.prototype 上實現。
5. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。

vue外掛的編寫方法一般分為以上5類，其註冊與繫結機制如下：

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {  // 1. 新增全域性方法或屬性，如:  vue-custom-element
            // 邏輯...
        }
        Vue.directive('my-directive', {  // 2. 新增全域性資源：指令/過濾器/過渡等，如 vue-touch
            bind (el, binding, vnode, oldVnode) {
                // 邏輯...
            }
            ...
        })
        Vue.mixin({
            created: function () {  // 3. 通過全域性 mixin方法新增一些元件選項，如: vuex
                // 邏輯...
            }
            ...
        })
        Vue.prototype.$myMethod = function (options) {  // 4. 新增例項方法，通過把它們新增到 Vue.prototype 上實現
            // 邏輯...
        }
    }
}
 

上方程式碼使用了es6部分語法列出了4種編寫外掛的方法，而install是註冊外掛主要呼叫的方法，包含了兩個引數（Vue例項和自定義配置屬性options）

開發外掛

我們這裡主要使用的是第四種方法，將我們的外掛函式註冊到Vue.prototype例項上面，首先我們在plugin裡建立個toast資料夾用來放置外掛,裡面包含兩個檔案，toast.vue和toast.js

然後在編寫我們的樣式結構檔案toast.vue
這裡我們使用了一個visible變數來控制提示框的顯示，message為提示的訊息

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

接著在toast.js裡面編寫外掛的方法與處理函式

import ToastComponent from './toast.vue'    //引入toast.vue元件

export default {    // 匯出一個物件，裡面包含vue註冊外掛所呼叫的方法install
    install: function (Vue) {
        const Toastconstructor = Vue.extend(ToastComponent)    // 將toast.vue元件生成為Vue的子類
        const instance = new ToastConstructor();    // 生成一個該子類的例項

        instance.$mount(document.createElement('div'))    // 將這個例項掛載在新建立的div上，並加入到body中
        document.body.appendChild(instance.$el)

        // 通過Vue的原型註冊一個方法$toast，有兩個引數（msg為提示的文字，duration為延時關閉）
        Vue.prototype.$toast = (msg, duration = 1500) => {
            if (instance.visible) return;    // visible是toast.vue元件的一個變數，用來控制提示框的顯示

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

            setTimeout(() => {    // 預設延時1.5s關閉提示框
                instance.visible = false;
            }, duration);
        }
    }
}

這樣我們就完成了元件的封裝，是不是很簡單

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

使用外掛

現在把我們封裝好的外掛引入到main.js中

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

然後我們就可以在元件中使用它了

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

我們現在把toast.vue新增上樣式和過度效果，讓它看起來更加的友好，以下是toast.vue檔案的全部內容

<template>
   <!-- 全域性提示框 -->
   <transition name="slide-fade">
      <div v-if="visible" class="dialog-tips">
          <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>