重點(diǎn)：（點(diǎn)擊空白區(qū)域關(guān)閉彈窗，同理）
-
@click.stop：用于阻止冒泡。
- 添加@click.stop的標(biāo)簽范圍內(nèi)，點(diǎn)擊任何區(qū)域（包括@click的點(diǎn)擊事件）不會(huì)關(guān)閉彈窗。標(biāo)簽范圍外，會(huì)關(guān)閉彈窗。
- @click.stop標(biāo)簽內(nèi)的@click等事件：如果事件內(nèi)有關(guān)閉彈窗的代碼，(不影響)可關(guān)閉彈窗。
- （下面html中）蒙版（class="mask" 的標(biāo)簽）添加@click="selectQues=false"：用于點(diǎn)擊蒙版，關(guān)閉彈窗
html：
<text @click="selectQues=true">打開彈窗</text>
<!--mask:蒙版。 功能：點(diǎn)擊蒙版關(guān)閉彈窗 ，添加 @click.stop 阻止冒泡 -->
<view class="mask" v-if="selectQues" @click="selectQues=false">
<view @click.stop>
<!-- 點(diǎn)擊此(標(biāo)簽)區(qū)域內(nèi)事件及空白處，不關(guān)閉彈窗 -->
<view @click="selectQues=false">關(guān)閉</view>
<view style="height:400rpx">
<view @click="getIndex(0)">我是展示區(qū)域的內(nèi)容1</view>
<view @click="getIndex(1)">我是展示區(qū)域的內(nèi)容2</view>
<view @click="getIndex(2)">我是展示區(qū)域的內(nèi)容3</view>
<view @click="getIndex(3)">我是展示區(qū)域的內(nèi)容4</view>
</view>
</view>
</view>
js文章來源：http://www.zghlxwxcb.cn/news/detail-502902.html
data() {
return {
selectQues: false,
}
}
methods: {
getIndex(ind) {
console.log(ind)
}
}
css文章來源地址http://www.zghlxwxcb.cn/news/detail-502902.html
// 蒙版
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba($color: #090909, $alpha: 0.62);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
到了這里，關(guān)于uniapp、微信小程序：點(diǎn)擊空白/蒙版關(guān)閉彈窗的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
