Vue自定义插件的学习

Vue插件的学习

参考资料：

​ 官方：https://cn.vuejs.org/v2/guide/plugins.html

​ 大神劳卜：https://www.cnblogs.com/luozhihao/p/7414419.html

插件介绍

Vue插件是自包含的代码，通常向 Vue 添加全局级功能。可以是公开 install() 方法的 object，也可以是 function

插件的功能一般有下面几种：

1. 添加全局方法或者 property。

2. 添加全局资源：指令/过滤器/过渡等。

3. 通过全局 mixin 来添加一些组件选项。

4. 添加全局实例方法，通过把它们添加到 config.globalProperties 上实现

   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 上实现
               // 逻辑...
           }
       }
   }
   

   以上是4种编写插件的方法，而install是注册插件主要调用的方法，包含了两个参数（Vue实例和自定义配置属性options），我们可以将以上代码存储到plugins.js中。

5. 一个库，提供自己的 API，同时提供上面提到的一个或者多个功能。

插件编写

1.添加全局方法或属性

export default {
	install(Vue, options) {
        Vue.$userName = 'Sakura';
    }
}

在install方法中，我们直接在Vue实例上声明了$userName属性并进行了赋值，当该\ast \ast 插件注册\ast \ast 后只要存在Vue实例的地方你都可以获取到Vue.$userName的值，因为其直接绑定在了Vue实例上。

2.添加全局资源

export default {
    install(Vue, options) {
        Vue.directive('focus', {
            bind: function() {},

            // 当绑定元素插入到 DOM 中。
            inserted: function(el, binding, vnode, oldVnode) {

                // 聚焦元素
                el.focus();
            },

            update: function() {},
            componentUpdated: function() {},
            unbind: function() {}
        });
    },
}

添加全局资源包含了添加全局的指令／过滤器／过渡等，上方代码我们通过Vue.directive()添加了一个全局指令v-focus，其主要包含了5种方法，其中inserted代表当绑定元素插入到 DOM 中执行，而el.focus()代表聚焦绑定的元素，这样如果我们在一个input输入框上绑定该指令就会自动进行focus聚焦。

3.添加全局mixin方法

export default {
    install(Vue, options) {
        Vue.mixin({
            methods: {
                greetingFn() {
                    console.log('greeting');
                }
            }
        });
    },
}

mixin代表混合的意思，我们可以全局注册一个混合，其会影响注册之后创建的每个 Vue 实例，上方代码注册后会在每个组件实例中添加greetingFn方法，在单文件组件中可以直接通过this.greetingFn()调用。当然如果实例中存在同名方法，则mixin方法中创建的会被覆盖，同时mixin对象中的钩子将在组件自身钩子之前调用。

4.添加实例方法

export default {
    install(Vue, options) {
        Vue.prototype.$myName = '劳卜';
        Vue.prototype.showMyName = value => {
            console.log(value);
        };
    },
}

添加实例方法是最常用的一种方法，其直接绑定在vue的原型链上，我们可以回想一下 JS 里的类的概念。实例方法可以在组件内部，通过this.$myMethod来调用。

5.插件封装组件

要在组件的基础上编写插件，我们可以使用Vue.extend(component)来进行。

• index.js 生成插件的js方法
• Toast.vue 插件包含的组件
  

Toast插件

<template>
  <div id="toast" v-show="showToast">
    <div>{{message}}</div>
  </div>
</template>

<script>
  export default {
    name: 'Toast',
    data() {
      return {
        message: '',
        showToast: false
      }
    },
    methods: {
      show(message, duration=2000) {
        // duration = duration || 2000
        this.showToast = true
        this.message = message

        setTimeout(() => {
          this.showToast = false
          this.message = ''
        }, duration)
      }
    }
  }
</script>

<style scoped>
  #toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;

    color: #fff;
    background-color: rgba(0, 0, 0, .5);
  }
</style>

插件封装

// 导入插件的组件
import Toast from './Toast'

// 设置插件名，对外暴露
const obj = {}

// install是插件注册的主要方法，带2个参数（Vue构造器和自定义配置属性options）
obj.install = function (Vue) {

  // 1.创建组件构造器
  const toastConstructor = Vue.extend(Toast)

  // 2.new的方式，根据组件构造器，可以创建出来一个组件对象
  const toast = new toastConstructor()

  // 3.将组件对象，手动挂载到某一个元素上
  toast.$mount(document.createElement('div'))

  // 4.toast.$el对应的就是div
  document.body.appendChild(toast.$el)

  // 注册插件的对外方法
  obj.show = (message, duration=2000) => {

    toast.showToast = true
    toast.message = message

    setTimeout(() => {
      toast.showToast = false
      toast.message = ''
    }, duration)
  }

   // 注册插件的Vue实例原型上的$toast方法，注册后可直接this.$toast.show()或Vue.prototype.$toast.show()
  Vue.prototype.$toast = {
    show: (message, duration=2000) => {

      toast.showToast = true
      toast.message = message
  
      setTimeout(() => {
        toast.showToast = false
        toast.message = ''
      }, duration)
    }
  }
}

export default obj

插件使用

// 在main.js中导入并使用

import Toast from 'plugin/toast/index.js';
// 默认会去对应的目录下寻找index.js
import Toast from 'plugin/toast';
 
Vue.use(Toast);

插件发布

以下图片内容来自大神劳卜：