vue-cli插件开发 -- 弹框

1、新建弹框页面dialogPlugin.vue

/**
 * Created by luffy on 2018/9/4.
 */

2、新建插件安装文件dialog.js

/**
 * Created by luffy on 2018/9/4.
 */

import Vue from 'vue';
import dialogModule from './dialogPlugin';

// 弹框默认配置选项，传入字符串默认为无标题的简单提示，合并配置选项和构造实例
const Dialog = (config) => {
  let options = {
    type: 1, // 0 loading; 1 无标题; 2 有标题
    title: '系统提示', // 标题
    content: '网络似乎是不通的', // 内容
    btnText: ['知道了'], // 按钮
    cancel: null, // 取消回调
    sure: null // 成功回调
  };
  if (config && typeof config !== 'object') {
    options.content = config;
  }
  // 合并配置选项
  config = {...options, ...config};

  let Tpl = Vue.extend(dialogModule); // 使用基础 Vue 构造器，创建一个子类
  let instance = new Tpl(); // 构造实例
  // 将模板的data替换成传入的配置选项
  for (let key in config) {
    if (config.hasOwnProperty(key)) instance.$data[key] = config[key];
  }
  // 直接在body生成一个DOM树
  document.body.appendChild(instance.$mount().$el);
};

// 删除弹框DOM节点
const CloseDialog = () => {
  let dialogBox = document.querySelectorAll('.dialogBox');
  if (dialogBox.length) {
    for (let i = 0; i < dialogBox.length; i++) {
      dialogBox[i].parentNode.removeChild(dialogBox[i]);
    }
  }
};

// 插件安装
export default {
  install () {
    Vue.prototype.$dialog = Dialog.bind(Vue);
    Vue.prototype.$closeDialog = CloseDialog;
  }
}

3、使用插件

在main.js中增加如下：

import Vue from 'vue';
import Dialog from '../plugins/dialog.js';

Vue.use(Dialog);

vue实例中使用：

// vue实例中使用
this.$dialog('插件测试成功');

如果在其他js中使用：

// 如果在其他js中使用
import Vue from 'vue';
import Dialog from '../plugins/dialog.js';

Vue.use(Dialog);

const vm = new Vue();
vm.$dialog('插件测试成功');