vue插件开发

前言

插件的功能：

vue插件通常用来为Vue添加全局功能，插件的功能防伪没有严格的限制，一般有一下几种：

添加全局方法或者property。

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

通过全局混入来添加一些组件选项

添加Vue实例方法，通过把它们添加到Vue.prototype上实现

一个库，提供自己的API，同时提供上面的一个或多个功能

插件的使用

通过全局方法Vue.use()使用插件，它需要在调用new Vue()启动应用之前完成：

1
2
3

// 调用`MyPlugin.install(Vue)`
Vue.use(MyPlugin);
new Vue({});

也可以传入一个可选的选项对象：

1	Vue.use(MyPlugin, { someOption: true });

⚠️ Vue.use会自动组织多次注册相同插件

插件的开发

Vue.js的插件应该暴露一个install方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象：

 MyPlugin.install = (Vue, options){
// 1. 添加全局方法或者property
Vue.myGlobalMethod = function (){};
// 2.添加全局资源
Vue.directive('my-directive', {});
// 3.注入组件选项，即注入组件重载属性+方法
Vue.mixin({});
// 4.添加实例方法
Vue.prototype.$myMethod = (methodOptions) => {};
// 5.注册全局组件，减免在每个需要调用的vue组件页面中import
Vue.component('Name', Component);
 };

插件的功能范围

➡️ 根据上述对插件定义以及使用的描述，这边可以简单地整理下关于插件可使用的功能范围

指令方面
- v-lazy: 全局图片资源懒加载指令，通过自定义开发的指令，实现img标签图片的懒加载机制；
- v-permission: 全局权限控制指令，精确到组件级别的权限控制；
全局属性
- $api: 对接口请求的统一封装，Vue.$api = …;
- $utils: 对本地工具类的统一封装并作为Vue的属性进行使用，Vue.$utils = …;
- $log: 开发调试阶段用于打印自定义日志相关，Vue.$log = …;

全局组件，以this.$dialog类似的方式来调用

实例方法讲解：vm.$mount([elementOrSelector])
返回值：vm - 实例本身
用法：如果Vue实例在实例化时没有收到el选项，那么它将处于”未挂载”状态，没有关联的DOM元素，可以使用vm.$mount()手动地挂载一个未挂载的实例。
如果没有提供elementOrSelector参数，模版将会被渲染为文档之外的元素，并且必须使用DOM API将它插入到文档中。
由于该方法返回实例本身，因而可以使用链式调用其他实例方法。

$dialog: 全局自定义对话框

// 假设已正常开发一dialog组件：dialog.vue，当前页面为dialog.js，用于与Vue建立连接，快速调用$dialog动作
let DialogComponent = require('./dialog.vue');
let Dialog = {};
Dialog.install = (Vue, options) => {
  // 如果dialog还在，则不做任何事情
  if(document.getElementsByClassName('dialog-box').length){
      return;
  }
  /**
  * el：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是css选择器，也可以是HTMLElement实例。
  * 在实例挂载之后，可以通过$vm.$el访问。
  * 如果这个选项在实例化时有用到，实例将立即进入编译过程。否则，需要显示调用vm.$mount()手动开启编译(如下)
  * 提供的元素只能作为挂载点。所有的挂载元素会被vue生成的dom替换。因此不能挂载在顶级元素(html, body)上
  * let $vm = new DialogTpl({
  *   el: document.createElement('div')
  * });
  * */
  let DialogTpl = Vue.extend(DialogComponent);  // 创建Vue组件构造器
  let $vm = new DialogTpl(); //实例化
  let tpl = $vm.$mount().$el; //将实例$vm进行挂载，挂载完成后，就可以通过$el来访问到当前的实例
  document.body.appendChild(tpl);// 将挂载后的dialog插入到body中
  // 由于我们需要在所有的组件任意位置调用到this.$dialog，因此，我们需要在Vue.prototype的方法中加入
  Vue.prototype.$dialog = {
      show(options){
        if (typeof options === 'string') {  // 对参数进行判断
          $vm.text = options  // 传入props
        }else if (typeof options === 'object') {
          Object.assign($vm, options)  // 合并参数与实例
        }
        $vm.show = true  // 显示dialog，这里show原本是Dialog的一个自定义属性
      },
      hide(){
          $vm.show = false; 
      }
  };
};
export default Dialog;