最近在用這個組件的時候绘面，發(fā)現(xiàn)ios上竟然存在穿透的問題。非常影響用戶體驗
- 解決思路
在彈出組件的時候，阻止body滑動事件情臭；彈回的時候，開啟body滑動事件
data () {
handler: function(e){
e.preventDefault()
},
}
mehtods: {
/*解決頁面層級相互影響滑動的問題*/
closeTouch () {
document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默認(rèn)事件
},
openTouch () {
document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打開默認(rèn)事件
},
}
重要的一點就是何時去開啟和關(guān)閉滑動事件赌蔑，最好就是彈出和彈回的時候俯在；
辣雞的是，官方文檔并沒有提供這個事件娃惯，只能去摸索源碼了跷乐，發(fā)現(xiàn)源碼中提供了這個事件 visbile-change
watch: {
value(val) {
this.currentValue = val;
},
rims() {
this.generateSlots();
},
visible(val) {
this.$emit('visible-change', val);
}
},
所以接下來的操作就很簡單了
<mt-datetime-picker ref="picker"
type="date"
:endDate="endDate"
:startDate="startDate"
v-model="pickerValue"
@confirm="handleConfirm"
@visible-change = "visbleChange">
methods: {
visbleChange (val) {
if(val) {
this.closeTouch()
} else {
this.openTouch()
}
},
