化工外贸网站建设参考消息电子版手机版

@click.stop：用于阻止冒泡

@click.stop 标签范围内，点击任何区域(包括 @click 点击事件)都不会关闭弹窗。标签范围外会关闭弹窗

@click.stop 标签内的 @click 等事件：如果事件内有关闭弹窗的代码可关闭弹窗

在 template 中

<view class="pop-box" v-if="showPop" @touchmove.stop.prevent="toMoveHandle" @click="showPop = false"><view @click.stop>弹窗内容</view>
</view>
<view @click="showPop = true">打开弹窗</view>

在 script 中

data() {return {showPop: false,}
}

toMoveHandle 方法请查看：uniapp 禁止遮罩层下的页面滚动

在 style 中

.pop-box {position: fixed;top: 0;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);z-index: 999;
}