如何寫一個Vue的外掛

_zysndy發表於2018-04-02
Vue

目的

實現一個簡單版本的Vue彈框外掛

實現

  1. 官方文件介紹

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

  • 新增全域性方法或者屬性，如: vue-custom-element

  • 新增全域性資源：指令/過濾器/過渡等，如 vue-touch

  • 通過全域性 mixin 方法新增一些元件選項，如: vue-router

  • 新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。

  • 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router

MyPlugin.install = function (Vue, options) {
  // 1. 新增全域性方法或屬性
  Vue.myGlobalMethod = function () {
    // 邏輯...
  }

  // 2. 新增全域性資源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 邏輯...
    }
    ...
  })

  // 3. 注入元件
  Vue.mixin({
    created: function () {
      // 邏輯...
    }
    ...
  })

  // 4. 新增例項方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 邏輯...
  }
}
複製程式碼

可以看出

  • 通過Vue.use(xxx)來呼叫外掛內部的install方法
  • 通過外掛自身的install方法，來為Vue例項新增屬性或方法
  1. 實現一個簡單的彈框外掛
  • 首先組冊一個彈框的元件，與平時的單檔案寫法相同
<template>
  <transition>
    <div class='parent' v-if='show'>
      <div class='child'>{{message}}</div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'toast',
  data () {
    return {
      message: 'nessage',
      show: false
    }
  }
}
</script>
複製程式碼

新增了兩個屬性，一個提示資訊的message和一個控制顯示的show

  • 寫入口檔案index.js

首先匯入元件


import toastComponent from './toast.vue'
複製程式碼

物件內部需要註冊一個install方法，供Vue.use()時使用


// install 方法，通過Vue.use()呼叫
Toast.install = function () {
}
複製程式碼

install方法的內部實現


const Toast = {} // 需要匯出的物件

let vm // 儲存Vue例項


Toast.install = function (Vue, options) {

    // 掛載$toast到Vue的原型鏈中
    // 後續只需要通過後this.$toast 即可使用
    // 傳遞了四個引數
    // message 展示的內容
    // duration 時長
    // callback 關閉時的回撥函式
    // config 暫時無用
    Vue.prototype.$toast = function (message, duration, callback, config) {
    // 擴充套件構造物件
    let Ext = Vue.extend(toastComponent)

    if (!$vm) {
      // 例項化一個物件
      $vm = new Ext({
        el: document.createElement('div')
      })
    }

    // 給物件賦值
    $vm.message = message || 'message'
    $vm.duration = duration || 2500
    $vm.show = true

    // 掛載到dom中
    document.body.appendChild($vm.$el)

    // 延時消失
    setTimeout(() => {
      $vm.show = false
      typeof callback === 'function' && callback()
    }, $vm.duration)

}

複製程式碼

最後也需要匯出我們的外掛物件供外部使用


export default Toast

複製程式碼

簡單版的github地址

結束語

至此，一個簡單的Vue外掛就完成了，後續優化的話，還需要

  • 增加彈出框的配置
  • 自動載入Vue.use()
  • ...

可以看出，我們可以將一些開發環境中經常需要使用到的函式，總結為一個單獨的外掛，之後在使用中只需要簡單的呼叫即可，不需要引入多餘的檔案或者包；如時間格式的函式dateformat, 掛載到Vue的prototype中,之後持續需要this.dateformate(new Date, 'yyyy-mm-dd')這種呼叫形式即可

寫的不好/有問題的地方，有望指出～

相關文章