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;
width:100%;
height:100%;
font-weight:bold;">#000;
opacity:0.3;
z-index:10000;
left: 0;
top: 0;
}
.dialog-box {
width: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;
width: 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;
width: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;
width:10px;
height:10px;
overflow:hidden;
position:absolute;
right:10px;
top:10px;
cursor:pointer;
}
.dialog-confirm-icon {
width: 60px;
height: 60px;
background: url("/images/successBig.svg") no-repeat center;
margin:-30px auto 45px auto;
}
.dialog-notify-icon {
width: 60px;
height: 60px;
background: url("/images/notifyBig.svg") no-repeat center;
margin:-30px auto 45px auto;
}
.dialog-warning-icon {
width: 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;
width: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;
width: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("保存成功")
}
});
}