解决思路
在弹出组件的时候,阻止body滑动事件;弹回的时候,开启body滑动事件
html
<mt-datetime-picker ref="picker"
type="date"
:endDate="endDate"
:startDate="startDate"
v-model="pickerValue"
@confirm="handleConfirm"
@visible-change = "visbleChange">
data () {
handler: function(e){
e.preventDefault()
},
}
watch: {
value(val) {
this.currentValue = val;
},
rims() {
this.generateSlots();
},
visible(val) {
this.$emit('visible-change', val);
}
},
mehtods: {
/*解决页面层级相互影响滑动的问题*/
//打开的时候和关闭的时候
closeTouch () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默认事件
},
openTouch () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打开默认事件
},
visbleChange (val) {
if(val) {
this.closeTouch()
} else {
this.openTouch()
}
},
}