UNIAPP-对于弹窗外内容的点击与滑动的简单处理

 #UNIAPP#前置条件：环境为uniapp+vue3+ts,使用的是composition api开发

一、事情起因：弹窗问题

本人开发项目时遇到一个问题，起初设计了一个弹窗组件，该组件在测试时，弹窗外的位置的滑动，会导致背景内容滑动，即便设置了蒙版，蒙版下的内容依旧在滑动时随之移动

二、本站及其他平台的解决办法

方法一(大部分)：基本上沿用了一个很官方的方法，有兴趣可以去研究一下
UNIAPP提供的控制遮罩外内容滑动的方法

@touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

基本思路就是：当页面产生滑动时，即touchmove触发时，会有两个事件产生，①是.stop，调用 event.stopPropagation()，原意是指这个 touchmove 事件不会冒泡到当前元素的父元素上，②是.prevent：调用 event.preventDefault()，这会阻止事件的默认行为。

此时我照搬了这个逻辑，但是发现了问题，因为prevent，所以本身弹窗内的滑动也被禁止了，我也尝试了使用别人说的，在需要要滑动的区域使用scroll-view :scroll-y=true，经过测试，弹窗内依旧无法滑动，所以没办法，暂时放弃。（具体本人的解决方案方法第三点）

方法二：直接操作DOM,或者使用js函数，反正就是给那个元素添加overflow：hidden，具体是否这么操作，智者见智。

三、借鉴思考得来的方法

鉴于此，由于此前发生过弹窗点击的问题，发现解决起来很简单，经过整理，本人的处理如下

 <view class="index-model" v-if="show">
    <view class="dialog-overlay" @tap="close()" @touchmove.prevent>
      <view class="dialog-content" @tap.stop @touchmove.stop>
        <view class="closePop" @tap="close()"></view>
        <view class="dialog-hd">
          <slot name="hd"></slot>
        </view>
        <view class="dialog-display">
          <slot name="content"></slot>
        </view>
        <view class="dialog-confirm">
          <view class="confirm-item ">
            <slot name="cannel"></slot>
          </view>
          <view class="confirm-item ">
            <slot name="confirm"></slot>
          </view>
        </view>
      </view>
    </view>
  </view>

之前处理弹窗问题时，点击弹窗外需要关闭弹窗，弹窗内非关闭按钮不关闭弹窗，此时设置在dialog-content的@tap.stop阻止弹窗内的点击事情冒泡到父组件，由此可得，组件内的滑动也可以如此，使用.stop来分离弹窗内事件和弹窗外事件。

此时组件内和组件外的事件可以分别控制，完美解决问题，也借此学习到两个方法(.stop,.prevent)
谢谢浏览，欢迎意见。