vue纯js调用公共组件弹框

使用vue.extend构建公共组件弹框

组键页面和我们平时构建需要引用的组件一样，如下图所示：

<template>
  <div v-if="isDialog">
    <h3>{{title}}</h3>
    <p>{{content}}</p>
    <button @click='clickConfirm()'>确定</button>
    <button @click="clickCancel()">取消</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDialog: false,
      title: "提示",
      content: "内容数据",
      resolve: "",
      reject: ""
    };
  },
  methods: {
    clickConfirm() {
      this.isDialog = false;
      this.resolve("confirm");
    },
    clickCancel() {
      this.isDialog = false;
      this.reject("cancel");
    },
    showMsgBox: function() {
        return new Promise((resolve, reject) => {
            this.resolve = resolve;
            this.reject = reject;
        });
    }
  }
};
</script>

新建一个js文件，如下图所示：

import messageBox from './index.vue'
export default function(Vue) {
    const Constructor = Vue.extend(messageBox);

    const Instance = new Constructor();
    Instance.$mount();
    document.body.appendChild(Instance.$el);
    Vue.prototype.$messageBox = ({ title, content }) => {
        Instance.isDialog = true;
        Instance.title = title;
        Instance.content = content;
        return Instance.showMsgBox()
            .then(val => {
                return Promise.resolve(val);
            })
            .catch(err => {
                return Promise.reject(err);
            });
    }
}

在mian.js里面引用，就可以去哪就调用了

import messageBox from './components/messageBox/index'
Vue.use(messageBox)
//引用方式 this.$messageBox({title:''content:''})