效果图
这里我封装了一个组件,便于不同地方、不同场景调用
<template>
<section class="wmassageMask" @touchmove.prevent>
<div class="messageMaskContent" ref="msk">
<div class="title">
<h1 style="color: #fff">{{ showTitle }}</h1>
<img src="img/txt.png" class="title_txt" />
<img src="img/object.png" class="title_object" />
</div>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>
</section>
</template>
<script>
export default {
props: {
showTitle: {
type: String,
default: "提示",
},
isShowMessage: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
computed: {},
watch: {
isShowMessage: {
//弹出层禁止背景页面滑动
handler(val) {
var mo = function (e) {
e.preventDefault();
};
if (val) {
document.body.style.overflow = "hidden";
//document.addEventListener("touchmove", mo, false); //禁止页面滑动
} else {
document.body.style.overflow = ""; //出现滚动条
//document.removeEventListener("touchmove", mo, false);
}
},
},
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.wmassageMask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 9999;
.messageMaskContent {
position: absolute;
top: 20%;
left: 5%;
width: 90%;
background-color: #fff;
border-radius: 0.88rem;
}
.title {
height: 1.8rem;
background: #8cc5fe;
border-radius: 0.88rem 0.88rem 0rem 0rem;
margin-top: -0.3rem;
.title_txt {
height: 2rem;
margin-top: 0.4rem;
}
.title_object {
height: 2.05rem;
position: absolute;
top: 0.88rem;
left: 0.5rem;
}
}
div {
text-align: center;
padding: 0.3rem 0;
}
p {
text-align: center;
font-size: 0.4rem;
margin: 1.5rem 1.2rem 0.5rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
//text-indent: 2em;
}
}
/deep/ {
.el-button--mini,
.el-button--small {
font-size: 0.44rem;
border-radius: 0.59rem;
width: 40%;
font-family: PingFang SC;
font-weight: 400;
}
.el-button--primary {
background: #0464c6;
border-color: #0464c6;
}
.el-button--primary.is-disabled {
background: #a0cfff;
border-color: #a0cfff;
}
.el-button--default {
color: #0464c6;
border: 1px solid #0464c6;
}
}
</style>
取消提醒处部分代码
<show-message
v-show="isShowMessage"
:showTitle="'取消预约提醒'"
:isShowMessage="isShowMessage"
>
<p slot="content">{{ showMessage }}</p>
<div slot="footer">
<el-button size="small" @click="isShowMessage = false">
<span>取消</span>
</el-button>
<el-button type="primary" size="small" @click="onConfirm()">
<span>确定</span>
</el-button>
</div>
</show-message>
须知提醒处部分代码
<show-message
v-show="dialogVisible"
:showTitle="showTitle"
:isShowMessage="dialogVisible"
>
<div slot="content">
<p
style="
text-align: center;
white-space: pre-line;
max-height: 5.5rem;
overflow: auto;
"
>
<span style="text-align: left; display: inline-block">{{
businessData.noticeContent
}}</span>
</p>
</div>
<div slot="footer">
<el-button size="small" @click="dialogVisible = false">
<span>否</span>
</el-button>
<el-button
type="primary"
:disabled="countDownVal > 0"
size="small"
@click="onConfirm"
>
<span>是</span>
</el-button>
</div>
</show-message>
倒计时处部分代码
this.countDownVal = 5;
this.timer = setInterval(() => {
if (this.countDownVal > 0) {
this.countDownVal--;
} else {
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
2022.3.10修改
如果上述方法还是不行,设置头部id="container"
将watch部分放在实际应用界面
watch: {
isShowMessage: {
//弹出层禁止背景页面滑动
handler(val) {
var mo = function (e) {
e.preventDefault();
};
if (val) {
document.getElementById("container").style.overflow = "hidden";
document.getElementById("container").style.position = "fixed";
document.addEventListener("touchmove", mo, false); //禁止页面滑动
} else {
document.getElementById("container").style.overflow = ""; //出现滚动条
document.getElementById("container").style.position = "";
document.removeEventListener("touchmove", mo, false);
}
},
},
},