uni-app closes the custom pop-up window when clicking on the mask layer

@click.stop: used to prevent bubbling

Within the scope of the @click.stop tag, clicking on any area (including the @click click event) will not close the pop-up window. The pop-up window will be closed outside the tag range.

@click.stop @click and other events in the tag: If there is code to close the pop-up window in the event, the pop-up window can be closed

in 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>

in script

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

Please view the toMoveHandle method: uniapp prohibits page scrolling under the mask layer

in 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;
}

Guess you like

Origin blog.csdn.net/AdminGuan/article/details/132908017