使用vue.extend構(gòu)建公共組件彈框
組鍵頁面和我們平時構(gòu)建需要引用的組件一樣方仿，如下圖所示：
<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: "內(nèi)容數(shù)據(jù)",
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里面引用落剪，就可以去哪就調(diào)用了
import messageBox from './components/messageBox/index'
Vue.use(messageBox)
//引用方式 this.$messageBox({title:''content:''})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
