前言:
大多时候我们都会有写弹窗的需求、除了点击按钮关闭之外,随着用户友好性的要求增加、点击弹窗外部的阴影部分关闭弹窗也成了交互更加友好的体验。
一、问题注意
写代码之前这里需要注意两个点
1.关闭事件内不要传参数!不要传参数!不要传参数!
2. 弹窗需要设置高度
二、代码实现
1、文本内容部分(主要分成两层、透明区域一层、内容一层)
<div id="common_alert" v-if="show_common_alert" @click="closeMsg">
<div class="common_alert_box" id="common_alert_box">
<span @click="close_alert"></span>
<div v-if="show_common_alert">
<h3>vue弹窗显示</h3>
<img :src="imgUrl" />
<button @click="close_alert">知道了</button>
</div>
</div>
</div>
2、弹窗样式我就不说明了直接上代码吧
#common_alert {
position: fixed;
width: 100%;
height: 100vh;
background: rgba(142, 140, 140, 0.51);
.common_alert_box {
position: relative;
width: 240px;
height: 411px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
h3 {
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: center;
font-family: PingFangSC-regular;
padding-top: 38px;
}
img {
width: 200px;
height: 222px;
margin: 15px auto 33px;
}
span {
width: 15px;
height: 15px;
background: url("./static/close.png");
background-size: 15px;
position: absolute;
top: 15px;
right: 15px;
}
.close_alert {
position: absolute;
top: 10px;
right: 15px;
}
}
}
效果如下图
3、具体的vue实现如下所示
data() {
return {
show_common_alert: true
};
},
methods: {
//关闭按钮
close_alert() {
this.show_common_alert = false;
},
// 点击弹窗之外的地方关闭弹窗
closeMsg(el) {
//获取弹窗节点
var con = document.getElementById("common_alert_box");
if (con) {
//判断如果不是当前节点就隐藏弹窗
if (!con.contains(el.target)) {
this.show_common_alert = false;
}
}
}
},