创建一个Vue的命令式弹窗组件（Vue2.x版本）

import Vue from 'vue';
import BoardAlert from "./BoardAlert";

const BoardPCAlert = {}
BoardPCAlert.install = function (Vue) {

  const groupBoardAlertInstance = Vue.extend(BoardAlert) //使用Vue的构造方法创建一个基础的构造器
  let currentAlert;
  const initInstance = ()=>{
    currentAlert = new groupBoardAlertInstance().$mount(); //创建上述的构造器对象，同时挂载
    document.body.appendChild(currentAlert.$el);//
  }

  Vue.prototype.$boardAlert = {
    showAlert:function(options){
      if(!currentAlert){
        initInstance(); //如果未挂载就进行挂载
      }
      Object.assign(groupBoardAlertInstance, options); // 该操作可以修改confirmInstance,将新的配置data挂载到this下
      return currentAlert.showAlertBox().then(()=>{
        currentAlert = null;
        return Promise.resolve();
      }).catch(()=>{
        currentAlert = null;
        return Promise.reject();
      })
    }
  }
}


export default BoardPCAlert;

<template>
    <div class="outside-container" v-show="showFlag">
          <div class="alert-content">
                <div class="tip-text">
                    {{options.tipText}}
                </div>
                <div class="toast-btn-list">
                    <el-button @click="oneBtnClick">{{options.btnOneText}}</el-button>
                    <el-button type="info" @click="twoBtnClick">{{options.btnTwoText}}</el-button>
                </div>
          </div>
    </div>
</template>

<script>
    export default {
        name: "BoardAlert",
        data(){
            return {
                showFlag:false,
                options:{
                    btnOneText:'取消',
                    btnTwoText:'确认',
                    tipText:'确认删除？'
                },
                methodName:{
                    oneBtnMethod:'',
                    twoBtnMethod:''
                }
            }
        },
        methods:{
            oneBtnClick(){
                if (this.methodName.oneBtnMethod) {
                    this.$emit(this.methodName.oneBtnMethod);
                } else {
                    this.cancel();
                }
            },
            twoBtnClick(){
                if (this.methodName.twoBtnMethod) {
                    this.$emit(this.methodName.twoBtnMethod);
                }
            },
            cancel(){
                this.showFlag = false;
                return new Promise((resolve,reject)=>{
                    this.resolve = resolve;
                    this.reject = reject;
                })
            },
            closeAlertBox(){
                this.showFlag = false;
            },
            showAlertBox(){
                this.showFlag = true;
                return new Promise((resolve,reject)=>{
                    this.resolve = resolve;
                    this.reject = reject;
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    .outside-container{
          /*width:300px;*/
          /*height: 150px;*/
          width:100%;
          height:100%;
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 100;
     }
    .alert-content{
        width:300px;
        border: #eeeeee solid 1px;
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        .tip-text{
            padding: 20px 30px;
            text-align: center;
        }
        .toast-btn-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 10px 50px 20px;
        }
    }
</style>

import BoardAlert from "./components/common/boardAlert/index";
Vue.use(BoardAlert);