解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題

更新時間：2020年11月04日 11:35:04 作者：Inc桂

這篇文章主要介紹了解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在移動端開發(fā)中使用到了Mint-ui組件庫，其中有兩個組件Popup組件和Datetime Picker存在滾動性穿透問題，官方文檔最新版并沒有解決這個問題。

現(xiàn)象還原

官方地址

手機掃碼查看demo，查看兩個組件Popup組件和Datetime的例子演示。

問題原因

HTML5觸摸事件touchmove事件：當手指在屏幕上滑動的時候連續(xù)地觸發(fā)

所以當激活出組件Popup組件和Datetime Picker的彈出層時，我們在彈層選擇內(nèi)容時上下連續(xù)滑動是會觸發(fā)該事件

解決思路

在彈出層出現(xiàn)之后阻止body的touchmove事件，在彈層消失之后移除阻止事件

使用mint-ui組件庫的解決方式

Popup組件

// 官方實例

<mt-popup
 v-model="popupVisible"
 position="bottom">
 ...
</mt-popup>

// 解決方式，通過監(jiān)聽popupVisible變量,在彈窗出現(xiàn)后禁止bode節(jié)點touchMove事件，彈窗消失后恢復body節(jié)點的touchMove事件

const handler = function(e) {
  e.preventDefault();
}

// vue實例內(nèi)
watch: {
  popupVisible: function (val) {
   if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   } else {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   }
  }
}

Datetime Picker

// 官方實例

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue">
</mt-datetime-picker>

// 解決方式：這個組件比較坑，由于Datetime Picker沒有提供彈窗顯示和隱藏的綁定變量，所以我們無采用解決popup的方式解決問題，只能通過打開事件，確認事件、取消事件，點擊蒙層彈窗消失這幾個時間點去解決。官方給出的屬性方法只支持確認事件，打開事件。沒有明文給出取消事件的回調(diào)函數(shù)，更不支持點擊蒙層彈窗消失事件，所以很坑。

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue"
  @confirm="confirm">
</mt-datetime-picker>

const handler = function(e) {
  e.preventDefault();
}

// vue實例內(nèi)

methods: {
  openPicker() { // 打開事件
    document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
    this.$refs.picker.open();
  },
  confirm() { // 確認事件
    document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
  }
}

此時還缺一個取消回調(diào)還有蒙層點擊事件，然后看源碼其實mint-ui源碼里是支持取消回調(diào)事件的，另外面，驚喜的是在2.0版本之后的mint-ui給Datetime picker組件新加了visible-change事件和closeOnClickModal屬性（傳送門），但官方文檔依舊沒更新出來這些屬性。現(xiàn)在就很好的解決了上述問題。

而且有了visible-change事件就可以不用按上述思路解決了。組件部分源碼如下：

props: {
  ...,
  closeOnClickModal: {
    type: Boolean,
    default: true
  }
},
watch: {
  ...,
 visible(val) {
  this.$emit('visible-change', val);
 }
},
...
<span class="mint-datetime-action mint-datetime-cancel" @click="visible = false;$emit('cancel')">{{ cancelText }}</span>

直接一個visible-change方法搞定

<mt-datetime-picker
  ref="picker"
  type="time"
  v-model="pickerValue"
  @confirm="confirm"
  @visible-change=""handleValueChange>
</mt-datetime-picker>

const handler = function(e) {
  e.preventDefault();
}

// vue實例內(nèi)
methods: {
  handleValueChange: function (val) {
   if(val) {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   } else {
     document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
   }
  }
}

上面的方法已經(jīng)可以解決項目遇到到的坑了，但是每個頁面用到組件Popup組件和Datetime Picker都需要去加上這段代碼，當頁面存在多個Popup組件就需要監(jiān)聽多個變量。

更好的解決方式（上述方式在網(wǎng)上也有類似解決方式，自己補充了visible-change方案）

在項目中按上面那樣解決太麻煩了，所以又想了一個體驗比較好的解決方案，因為彈層的出現(xiàn)和消失會觸發(fā)組件更新，所以想到和可以全局注冊一個指令v-roll，運用指令的componentUpdated鉤子來實現(xiàn)這個功能。代碼如下

// 全局注冊指令
const handler = (e) => {
 e.preventDefault();
};
Vue.directive('roll', {
 componentUpdated(el, binding) {
  if (binding.value) {
   document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
  } else {
   document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
  }
 }
});

這樣一來精簡了很多代碼，其他開發(fā)者用到時只需要給對應組件加一個v-roll指令即可。

// popup組件處理方式
<mt-popup
 v-model="popupVisible"
 v-roll:visible=popupVisible>
 ...
</mt-popup>

// mt-datetime-picker組件處理方式
<mt-datetime-picker 
 ref="datePicker" 
 v-model="date"
 @visible-change="handleVisibleChange"
 v-roll:visible=pVisible
 ...>
</mt-datetime-picker>
...
data: {
  pVisible: false 
},
methods: {
  handleVisibleChange (isVisible) {
    this.pVisible = isVisible;
  }
}

接著還遇到一個坑，當同一個視圖頁面存在多個組件Popup組件和Datetime Picker使用指令時，會集體觸發(fā)指令。所以會相互覆蓋，如打開A彈層，阻止頁面touchMove事件，但另外一個popuu組件也觸發(fā)鉤子函數(shù)，又取消阻止touchMove事件，導致沒效果。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。// 這里目前自己的理解是由于彈層出現(xiàn)和消失導致所在視圖界面節(jié)點更新，所以其他節(jié)點綁定了v-roll指令的鉤子也被觸發(fā)了

解決方案：對于一個視圖內(nèi)使用多個多個組件Popup組件和Datetime Picker的，給指令傳入數(shù)組類型

// 全局注冊指令
const handler = (e) => {
 e.preventDefault();
};
Vue.directive('roll', {
 componentUpdated(el, binding) {
  if (binding.value instanceof Array) {
   const visible = binding.value.some(e => e); // 當視圖所有控制彈層的變量存在一個是true，即可阻止touchmove事件
   if (visible) {
    document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
   } else {
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
   }
  } else if (typeof binding.value === 'boolean') {
   if (binding.value) {
    document.getElementsByTagName('body')[0].addEventListener('touchmove', handler, { passive: false });
   } else {
    document.getElementsByTagName('body')[0].removeEventListener('touchmove', handler, { passive: false });
   }
  }
 }
});

// popup組件處理方式
<mt-popup
 v-model="popupVisible"
 v-roll:visible=[popupVisible, pVisible]>
 ...
</mt-popup>

// mt-datetime-picker組件處理方式
<mt-datetime-picker 
 ref="datePicker" 
 v-model="date"
 @visible-change="handleVisibleChange"
 v-roll:visible=[popupVisible, pVisible]
 ...>
</mt-datetime-picker>
...
data: {
  pVisible: false 
},
methods: {
  handleVisibleChange (isVisible) {
    this.pVisible = isVisible;
  }
}

目前mint-ui還未修復該問題，所以暫且使用上述方案解決。一開始打算改源碼，但是不現(xiàn)實，因為以后可能需要更新mint-ui版本。大家也可以幫忙看下以上解決方式是否有坑。

補充知識：Vue中使用mint-ui的日期插件時在ios上會有滾動穿透問題

問題：在ios上選擇日期上下滑動時，整個頁面會跟著滾動，安卓是正常的

解決方法就是在日期彈出層出現(xiàn)的時候禁止頁面的默認滾動機制，日期彈出層消失的時候解除禁止頁面的默認滾動機制

1.調(diào)用日期組件

 <div class="datePicker" style="z-index: 9999">
   <mt-datetime-picker
    type="date"
    ref="picker"
    v-model="nowTime"
    year-format="{value} 年"
    month-format="{value} 月"
    date-format="{value} 日"
    @confirm="handleConfirm"
    :startDate="startDate"
    :endDate="endDate"
   >
   </mt-datetime-picker>
  </div>

2.設置監(jiān)聽函數(shù)

data () {
    return {
     birthday:"", //出生日期
     startDate: new Date('1952'),
     endDate:new Date(),
     nowTime:'1992-09-15',
    
     /*---------監(jiān)聽函數(shù)--------------*/
     handler:function(e){e.preventDefault();}
    }
   },
   methods:{
    /*解決iphone頁面層級相互影響滑動的問題*/
    closeTouch:function(){
     document.getElementsByTagName("body")[0].addEventListener('touchmove',
      this.handler,{passive:false});//阻止默認事件
     console.log("closeTouch haved happened.");
    },
    openTouch:function(){
     document.getElementsByTagName("body")[0].removeEventListener('touchmove',
      this.handler,{passive:false});//打開默認事件
     console.log("openTouch haved happened.");
    },
 }

然后監(jiān)聽，彈窗出現(xiàn)消失的時候調(diào)用相應的方法

//偵聽屬性
watch:{
  signReasonVisible:function(newvs,oldvs){//picker關閉沒有回調(diào)函數(shù)，所以偵聽該屬性替代
    if(newvs){
      this.closeTouch();
    }else{
      this.openTouch();
    }
  }
},

以下為datetime-picker的處理：（openPicker1為觸發(fā)打開選擇器的事件， handleConfirm (data)是選中日期后的回調(diào)函數(shù)）

 openPicker () {
      this.$refs.picker.open();
      this.closeTouch();//關閉默認事件
 
     },
     handleConfirm (data) {
      let date = moment(data).format('YYYY-MM-DD')
      this.birthday = date;
      this.openTouch();//打開默認事件
 
     },

然后就解決了這個問題！

以上這篇解決Mint-ui 框架Popup和Datetime Picker組件滾動穿透的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

編寫v-for循環(huán)的技巧匯總
這篇文章主要介紹了編寫更好的v-for循環(huán)的6種技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
Vue 集成 PDF.js 實現(xiàn) PDF 預覽和添加水印的步驟
這篇文章主要介紹了如何在 Vue 中集成 Mozilla/PDF.js ，實現(xiàn)自定義的 PDF 預覽器，以及給被預覽的 PDF 添加水印
2021-01-01
Vue實現(xiàn)多圖添加顯示和刪除
這篇文章主要為大家詳細介紹了Vue實現(xiàn)多圖添加顯示和刪除，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
怎樣在vue項目下添加ESLint的方法
這篇文章主要介紹了怎樣在vue項目下添加ESLint的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-05-05
element中使用formdata進行上傳文件的方法
本文主要介紹了elementUI中使用formdata進行上傳文件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-03-03
Vue中組件(Component)和插件(Plugin)的區(qū)別及說明
這篇文章主要介紹了Vue中組件(Component)和插件(Plugin)的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
Vue中如何使用ElementUI實現(xiàn)圖片上傳
這篇文章主要介紹了Vue中如何使用ElementUI實現(xiàn)圖片上傳,這里用了elementUI的一個簡單的例子，給大家介紹的非常詳細，需要的朋友可以參考下
2024-03-03
vue數(shù)據(jù)push后不能響應式更新的問題
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應式更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue使用canvas手寫輸入識別中文
這篇文章主要介紹了vue使用canvas手寫輸入識別中文，工作時遇到一些項目如：系統(tǒng)上的輸入法使用不方便，客戶要求做一個嵌入web網(wǎng)頁的手寫輸入法。下面我們來看看文章得具體描述吧
2021-11-11
Vue3開發(fā)必備的六個VSCode插件推薦
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴充性,執(zhí)行最佳實踐的代碼方式,自動完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關于Vue3開發(fā)必備的六個VSCode插件,需要的朋友可以參考下
2022-12-12