来源:自定义模态弹窗所遇到的问题如下:
- 弹窗滚动事件穿透?
- 点击遮罩层隐藏,点击内容区不隐藏?
1:catchtouchmove事件阻止页面滚动。
js范式:catchtouchmove="stopSlide"
vue范式:@touchmove.stop.prevent="stopSlide"
2:遮罩和内容分为两个容器。
使用:给需要的触发节点添加@click="isJoin=true"
<!-- 弹窗提示 -->
<template>
<view v-show="isJoin" @touchmove.stop.prevent>
<!-- 遮罩层 -->
<view class="mask" @click="isJoin=false"></view>
<!-- 内容区 -->
<view class="tip">这里是内容</view>
</view>
</template>
<script>
export default {
data() {
return {
isJoin: false, // 弹窗显隐
}
}
}
</script>
<style scoped>
.mask {
z-index: 99;
background: rgba(0, 0, 0, 0.6);
position: fixed;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.tip {
width: 80%;
height: 40vh;
z-index: 999;
background: #FFFFFF;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
结语:好用的记得一键三连(点赞+收藏+关注),有问题欢迎评论区留言!!!