vue 弹框组件

组件效果：

  

  HTML代码：

<div :class="isHD">
    <div class="mask"></div>
    <div class="dialog-box">
        <div class="dialog-close-btn" @click="IKonw()"></div>
        <div :class="dialogIcon"></div>
        <p class="dialog-msg">{{msg}}</p>
        <div class="i-know" :class="notifyHidden" @click="confirm()">
            <a type="button">{{confirmName}}</a>
        </div>
        <div class="dialog-btn-box" :class="confirmHidden">
            <a type="button" class="dialog-cancel-btn" @click="IKonw()">{{cancelName}}</a>
            <a type="button" class="dialog-confirm-btn" @click="confirm()">{{confirmName}}</a>
        </div>
    </div>
</div>


CSS代码：

.mask {
    position:fixed;
    100%;
    height:100%;
    font-weight:bold;">#000;
    opacity:0.3;
    z-index:10000;
    left: 0;
    top: 0;
}
.dialog-box {
    280px;
    height:200px;
    position:fixed;
    left:50%;
    top:50%;
    margin-left: -140px;
    margin-top:-100px;
    font-weight:bold;">#fff;
    z-index:10001;
    border-radius:4px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
}
.dialog-msg {
    text-align:center;
    color: #4A6075;
    line-height: 26px;
     250px;
    margin: 0 auto;
    padding-left: 14px;
    height: 52px;
    display: inline-block;
}
.i-know {
    position: absolute;
    margin-top: 18px;
    margin-left: 70px;
    text-align:center;
}
.i-know a {
    display:inline-block;
    height:30px;
    140px;
    color:#fff;
    line-height:30px;
    font-weight:bold;">#3ABBCD;
    border-radius:100px;
    text-decoration: none;
    cursor: pointer;
}
.dialog-hidden ,.notify-hidden,.confirm-hidden{
    display:none;
}
.dialog-close-btn {
    background:url("/images/closebtn.svg") no-repeat center;
    10px;
    height:10px;
    overflow:hidden;
    position:absolute;
    right:10px;
    top:10px;
    cursor:pointer;
}
.dialog-confirm-icon {
     60px;
    height: 60px;
    background: url("/images/successBig.svg") no-repeat center;
    margin:-30px auto 45px auto;
}
.dialog-notify-icon {
     60px;
    height: 60px;
    background: url("/images/notifyBig.svg") no-repeat center;
    margin:-30px auto 45px auto;
}
.dialog-warning-icon {
     60px;
    height: 60px;
    background: url("/images/warningBig.svg") no-repeat center;
    margin:-30px auto 45px auto;
}
.dialog-btn-box {
    position: absolute;
    margin-top: 18px;
    margin-left: 28px;
    overflow:hidden;
    text-align:center;
}
.dialog-cancel-btn {
    display:inline-block;
    height:30px;
    100px;
    color:#888!important;
    line-height:30px;
    font-weight:bold;">#DEE4EA;
    border-radius:100px;
    vertical-align:middle;
    cursor: pointer;
}
.dialog-confirm-btn {
    display:inline-block;
    height:30px;
    100px;
    color:#fff!important;
    line-height:30px;
    font-weight:bold;">#3ABBCD;
    border-radius:100px;
    vertical-align:middle;
    margin-left:20px;
    cursor: pointer;
}

.hidden-btn{
    opacity: 0;
    position: absolute;
}

JS代码：

use([], function() {
    Vue.component('dialogWidget', {
        pageName: "common",
        template: "public/widget/dialog/dialog.html",
        props:["isHidden","msg","confirmName","cancelName","handle","dialogIcon","confirmHidden","notifyHidden"],
        data:function() {
            return {
                isHD:'dialog-hidden'
            }
        },
        created: function() {},
        mounted: function() {
            this.isHD = this.isHidden;
        },
        methods: {
            IKonw:function(){
                this.isHD = "dialog-hidden";
            },
            confirm:function(){
                this.IKonw();
                if(this.handle){
                    this.handle();
                }
            }
        }
    });
});

var dialog = {
    viewDialog: null,
    init: function(config) {
        var type = config.type || "notify";
        var msg = config.msg || "参数配置有误";
        var confirmName = config.confirmName || '';
        var cancelName = config.cancelName || '';
        var handle = config.handle || '';

        var isHidden='',dialogIcon,confirmHidden,notifyHidden;

        if(type == "confirm"){
            dialogIcon = "dialog-confirm-icon";
            confirmHidden = "";
            notifyHidden = "notify-hidden";
        }
        if(type == "notify"){
            dialogIcon = "dialog-notify-icon";
            confirmHidden = "confirm-hidden";
            notifyHidden = "";
        }
        if(type == "warning"){
            dialogIcon = "dialog-warning-icon";
            confirmHidden = "confirm-hidden";
            notifyHidden = "";
        }

        this.viewDialog = Vue.extend({
            template: '<dialogWidget :isHidden = "isHidden" :msg="msg" :confirmName="confirmName" :cancelName="cancelName" :handle="handle" :dialogIcon="dialogIcon" :confirmHidden="confirmHidden" :notifyHidden="notifyHidden"></dialogWidget>' ,
            data: function() {
                return {
                    isHidden : isHidden,
                    msg : msg,
                    confirmName : confirmName,
                    cancelName : cancelName,
                    handle : handle,
                    dialogIcon : dialogIcon,
                    confirmHidden : confirmHidden,
                    notifyHidden : notifyHidden
                }
            }
        });

        if($("#viewPrompter")){
            $("#viewPrompter").remove();
        }
        var component = new this.viewDialog().$mount();//挂载到内存节点上

        var viewerEle = $("<div id='viewPrompter'></div>");
        $("#content-box").append(viewerEle);
        viewerEle.append($(component.$el));
    }
};

组件引用：

组件调用：

showPrompt: function(){
    dialog.init({
        type:"warning",
        msg:"这是一个弹框？",
        confirmName:"我知道啊",
        handle:function(){
            console.log(111111111111)
        }
    });
},
showNotify: function(){
    dialog.init({
        type:"notify",
        msg:"这是一个notify弹框,这是一个notify弹框.这是一个notify弹框？",
        confirmName:"立即前往",
        handle:function(){
            console.log("去哪啊。。。。")
        }
    });
},
showConfirm: function(){
    dialog.init({
        type:"confirm",
        msg:"这是一个confirm弹框,这是一个confirm弹框.这是一个confirm弹框？",
        cancelName:"取消",
        confirmName:"确定",
        handle:function(){
            console.log("保存成功")
        }
    });
}