背景：
项目中需要展示一些协议内容，因为要调用页面很多，每个页面引用组件很麻烦，这时候插件就帮了大忙
1.首先实现弹框组件protocol.vue
也可以加入输入框，可以通过successBtnPro方法把输入的值传过去this.$emit('successBtn',this.data.title);
<!-- 封装插件 -->
<template>
<a-modal v-model:visible="visible" title="Basic Modal" @ok="successBtnPro()" @cancel="cancelBtnPro()">
<p> {{title}}</p>
</a-modal>
</template>
<script>
export default{
data(){
return{
visible:false,
title: '需要显示的内容'
}
},
methods: {
successBtnPro (e) {
this.visible = false;
this.$emit('successBtn',this.data.title);
},
cancelBtnPro (e) {
this.visible = false;
this.$emit('cancelBtn');
},
}
}
</script>
2.创建一个用于创建和管理弹框的插件：
protocoluse.js
import protocol from './protocol.vue'
const protocolUse = {};
protocolUse.install = function(Vue,options){
Vue.prototype.$popupProtocol = (options={}) =>{
let ProtocolConstructor = Vue.extend(protocol);
let instance= new ProtocolConstructor({
el: document.createElement('div')
});
document.body.appendChild(instance.$el);
Object.assign(instance.$data, options);
return new Promise((resolve, reject)=>{
instance.$on('successBtn',function(res){
console.log('同意1')
resolve(res);
})
instance.$on('cancelBtn',function(){
console.log('不同意1')
reject();
})
});
}
}
export default protocolUse;
3.在主应用中使用这个插件main.js：
import protocolUse from './plugs/protocol/protocoluse';
Vue.use(protocolUse);4.如何使用
<template>
<p @click="handleClick">点击下一</p>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
handleClick(){
this.$popupProtocol({
visible: true,
title:'hhahhhhhhasdsafsfa',
}).then(res => {
console.log('同意11')
console.log(res)
}).catch(res => {
console.log('不同意12')
console.log(res)
})
}
}
}
</script>
