vue纯js调用公共组件弹框

公用组件示例

<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:''})

最后

以上就是敏感睫毛膏为你收集整理的vue纯js调用公共组件弹框的全部内容，希望文章能够帮你解决vue纯js调用公共组件弹框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。