vue2中封装弹框插件

admin2024-05-15  1

 背景:
   
项目中需要展示一些协议内容,因为要调用页面很多,每个页面引用组件很麻烦,这时候插件就帮了大忙

 1.首先实现弹框组件protocol.vue

<!-- 封装插件 -->
<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>
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!