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