VUE项目中使用mintui库遇到的坑

mintui库中picker插件在ios的样式穿透问题

时间，地区，性别都是用picker插件做的，在Android测试的没有问题，但是在ios系统出现了样式穿透的问题，当滑动picker插件时，遮罩层下方的body区域也一起跟着上下滑动，给用户带来很差的体验感。
上网搜了一下解决方案，借鉴了另一个大佬写的，简单易懂，直接套用在项目中，帮我解决了这个问题，太感谢啦，趁热给整理出来！看的大佬的文章地址在这里！

• ·遇到的问题就是遮罩层下的内容跟着滚动，那么就在弹出组件的时候，阻止body的滑动事件，组件关闭的时候，开启body的滑动事件其实文中的方法感觉是复杂了一点的，我想的是还有一种方法就是当组件弹出和收起的时候给body加css样式固定一下，这样就避免了dom操作

data () {
	handler: function(e) {
		e.preventDefalut()
	},  //阻止默认事件，我在写的时候遇到eslint报错，不让在data里面写函数，这里可以给handler一个初始为空，在钩子函数中给他赋值一个箭头函数就可以解决了
}

methods: {
	closeTouch () {
		document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive: false}) // 阻止默认事件
	},
	openTouch () {
		document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive: false}) // 打开默认事件
	}
}

一个是在组件弹出时的关闭默认事件，一个是在组件收起时的打开默认事件，这里的默认事件就是触屏滚动事件，本来在项目中是有控制组件打开关闭的事件的，但是我加了一下发现并没有卵用，所以还是采用了大佬的方式

源码里面提供了一个 visible-change 这样一个事件，在组件里加入这个事件

 <mt-datetime-picker ref="picker"
                        type="date"
                        :endDate="endDate"
                        :startDate="startDate"
                        v-model="pickerValue"
                        @confirm="handleConfirm"
                        @visible-change = "visbleChange">   //这里并不局限于datatime-picker，亲测适用于所有的picker组件中

利用vue中的事件监听属性watch监听这个事件

watch: {
	visible(val) {
		this.$emit("visible-change", val);
	}
}

然后就是完善这个visibleChange这个事件啦，因为监测到组件的打开和关闭，所以当val变化时，就可以触发相应的打开和关闭默认事件了

methods: {
	visibleChange (val) {
		if(val) {
			this.closeTouch();
		} else {
			this.openTouch();
		}
	}
}

因为怕监测有问题（可能是我想太多），又在控制组件打开关闭的代码那里调用了对应的 closeTouch 和 openTouch 默认事件。。。大概就是菜吧哈哈~~~~