如何写一个Vue的插件

3,596 阅读1分钟

目的

实现一个简单版本的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, 挂载到Vueprototype中,之后持续需要this.dateformate(new Date, 'yyyy-mm-dd')这种调用形式即可

写的不好/有问题的地方,有望指出~