【Vue】自己封装一个签约对话框插件

封装一个vue的dialog插件主要包含三个步骤

1.用到的三张图片

delete.png

fail.png

success.png

2.先写好.vue文件，对弹框进行显示

<template>
    <div class="sign-dialog" v-if="isShowFlag">
        <div class="outer-dialog" v-if="signFlag">
            <img src="./img/delete.png" alt="" class="dialog-delete-img" @click="closeSuccess">
            <img src="./img/success.png" alt="" class="dialog-img">
            <div class="dialog-title">签约成功</div>
            <div class="dialog-text">{{signInfo}}</div>
        </div>
        <div class="outer-dialog" v-else>
            <img src="./img/delete.png" alt="" class="dialog-delete-img" @click="closeFail">
            <img src="./img/fail.png" alt="" class="dialog-img">
            <div class="dialog-title">签约失败</div>
            <div class="dialog-text">{{signInfo}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "signDialog",
        data(){
            return{
                signFlag:null,  //控制签约成功或者失败的显示，默认显示签约成功
                signInfo:'',  //提示文字
                isShowFlag:false   //控制整个组件的显示
            }
        },
        methods:{
            closeSuccess(){
                window.open("about:blank","_self").close()   
            },
            closeFail(){
                this.isShowFlag = false;
            }
        }
    }
</script>

<style scoped lang="scss">
.sign-dialog{
    /*这里使用了fixed，使显示框占满屏幕*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    .outer-dialog{
        width: 5rem;
        padding: .4rem;
        background-color: white;
        border-radius: 0.2rem;
        position: relative;
        .dialog-delete-img{
            width: .25rem;
            position: absolute;
            right: 0.1rem;
            top: -0.8rem;
        }
        .dialog-img{
            width: 2rem;
            position: absolute;
            top: -1rem;
            left: 50%;
            transform: translateX(-50%);
        }
        .dialog-title{
            color: #333;
            padding-top: .3rem;
            padding-bottom: .3rem;
            font-size: .4rem;
            text-align: center;
        }
        .dialog-text{
            color: #666666;
            font-size: .32rem;
            text-align: center;
        }
    }
}

</style>

3.将写好的.vue文件添加到VUE原型上

文件名index.js

import signDialogComponent from "./signDialog";

const signDialog = function (Vue) {
    //子类
    const signDialogConstructor = Vue.extend(signDialogComponent);
    //创建子类实例
    const instance = new signDialogConstructor();
    //挂载DOM
    instance.$mount(document.createElement('div'));
    document.body.appendChild(instance.$el);
    //注入原型链
    //给插件添加方法，show就显示，close关闭
    Vue.prototype.$signDialog = {
        show(data) {
            instance.isShowFlag = true;
            instance.signInfo = data.signInfo;
            instance.signFlag = data.signFlag;
        },
        close(){
            instance.isShowFlag = false;
        }
    };
};

export default signDialog;

4.在main.js引入使用

import signDialog from "./components/signDialog"
Vue.use(signDialog)

5.调用

// 显示成功弹框
this.$signDialog.show({signInfo:res.data.signMsg,signFlag:true})   
// 显示失败弹框
this.$signDialog.show({signInfo:res.data.signMsg,signFlag:false})

6.最后显示如下