vue中mini-ui popup与picker结合在iphone手机穿透问题

背景

vue项目使用mint-ui组件中使用popup和picker在iphone手机上会出现在手机屏幕滑动时，使后面model层（灰色阴影部分）出现滚动效果。

解决方案

先看下代码,此代码挑选重点部分内容，请自行理解

<template>
	<mt-popup style="width: 100%" v-model="popupVisible" position="bottom">
      <mt-picker
         @change="onValuesChange"
         value-key="addressName"
         style="font-size: 12px"
         :slots="slots"
         :showToolbar="true"
       >
         <div class="picker-toolbar-title">
           <div @click="closeModel" class="btn">取消</div>
           <div class="text">请选择公司地址</div>
           <div @click="define" class="btn">确定</div>
         </div>
       </mt-picker>
     </mt-popup>
</template>
<script>
export default {
	data(){
		popupVisible: false,
	}，
	watch: {
		popupVisible: {
	      handler(val) {
	        if (val) {
	          document.getElementsByTagName("body")[0].addEventListener('touchmove', (e) => {
	            e.preventDefault();
	          }, {passive:false});//阻止默认事件
	        } else {
	          document.getElementsByTagName("body")[0].addEventListener('touchmove', (e) => {
	            e.returnValue = true;
	          }, {passive:false});//打开默认事件
	        }
	      },
	    },
	}
}
</script>

这里实际上就是在model层打开的时候，将touchmove的默认事件关闭掉，这个就是阻止穿透效果，但一定要记得model层关闭的时候打开默认事件，否则可能导致超出一屏的页面无法滚动