1、新建弹框页面dialogPlugin.vue

/**
 * Created by luffy on 2018/9/4.
 */
<template>
  <div class="dialogBox" v-if="showDialog" @touchmove.prevent>
    <div class="contentBox">
      <div class="title" v-if="type === 2">系统提示</div>
      <div class="contentText" :class="(type === 2 ? 'contentText2' : '')">
        <div>{{content}}</div>
      </div>
      <div class="btn"> 
        <a class="btn0" @click="cancelFn" v-if="btnText.length === 2">{{btnText[0]}}</a>
        <a class="btn1" :class="(btnText.length === 2 ? '' : 'btn2')" @click="sureFn">{{btnText[1] || btnText[0]}}</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dialogPlugin',
  data () {
    return {
      showDialog: true, // 控制关闭弹框
      type: 1, // 1 无标题; 2 有标题
      title: '系统提示', // 标题
      content: '网络似乎是不通的',  // 弹框内容
      btnText: ['知道了'], // 按钮，支持两个及以下
      cancel: null,
      sure: null
    }
  },
  methods: {
    // 点击取消(第一个按钮)事件
    cancelFn () {
      this.showDialog = false; // 点击默认关闭
      this.cancel && this.cancel(); // 传入的回调函数
    },
    // 点击确定(第二个按钮)事件
    sureFn () {
      this.showDialog = false; // 点击默认关闭
      this.sure && this.sure(); // 传入的回调函数
    }
  }
}
</script>

<style scoped>
  .dialogBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9998;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
  }

  .dialogBox .contentBox {
    min-width: 5.6rem;
    max-width: 5.6rem;
    background: #fff;
    border-radius: .06rem;
  }

  .dialogBox .contentBox .title {
    height: .9rem;
    line-height: .9rem;
    font-size: .36rem;
    padding-top: .1rem;
    color: #303942;
    text-align: center;
  }

  .dialogBox .contentBox .contentText {
    padding: .5rem .37rem .3rem;
    font-size: .3rem;
    color: #77828c;
    text-align: center;
    line-height: .42rem;
  }

  .dialogBox .contentBox .contentText2 {
    padding-top: 0;
  }

  .dialogBox .contentBox .contentText > div {
    line-height: 1.5;
    padding: 0 0.2rem;
  }

  .dialogBox .contentBox .btn {
    line-height: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='0' stroke='#dbdbdb' stroke-width='1'/></svg>");
  }

  .dialogBox .contentBox .btn .btn0, .dialogBox .contentBox .btn .btn1, .dialogBox .contentBox .btn .btn2 {
    text-align: center;
    display: block;
    color: #2a92eb;
    font-size: .36rem;
    cursor: pointer;
  }

  .dialogBox .contentBox .btn .btn0 {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='100%' y1='0' x2='100%' y2='100%' stroke='#dbdbdb' stroke-width='1'/></svg>");
    width: 50%;
    float: left;
    color: #303942;
  }

  .dialogBox .contentBox .btn .btn1 {
    float: left;
    width: 49%;
  }

  .dialogBox .contentBox .btn .btn2 {
    float: left;
    width: 100%;
  }
</style>

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('插件测试成功');