vue中@change兼容問題詳解

發布時間:2019-10-27 21:44 來源:互聯網 當前欄目:網站服務器

@change問題

1. 需求描述

需求:選擇日期,當日期改變,則頁面相應該日期的某些事件渲染

條件:

移動端 vue框架

2. 問題產生及描述

問題: 兼容性差距,由于@change觸發方式不同,導致時間加載不夠統一,時間觸發出現問題。

描述如下:

使用vue做移動端時,由于需求需要,需要在頁面某處添加一個日期選擇的控件。由于不是面向用戶,內部使用,因此本著不浪費資源的原則,直接使用h5自帶的input:

<input type="date">

emm...CSS樣式不再贅述。然后綁定數據,綁定change事件監聽值變化:

<input type="date" v-model="date" @change="selectDate">
selecrDate () {
  // do something...
}

當基本流程敲定后,在pc端沒問題。但注意,我們此時討論的是移動端效果,那么用pc端打開調試工具來模擬移動端機型顯然是不足以代表移動端真實場景的,因此需要在真機測試。ok,接下來,差異化出現。
由于@change的特性是當監聽到數據發生變化時則執行,因此差異便是暴露出來:

安卓:選擇完年月日,點擊確定后,數據變化,監聽事件起作用; iOS: 點擊選擇日期,選擇年,監聽到數據變化一次,執行一次selectDate,選擇月,監聽到數據變化,再次執行,選擇日,監聽到數據變化,再執行……選擇不停,執行不停。

由于此不同端所存在的差異化,導致了我們必須“兼容”這個問題。那么重點問題出現,如何兼容?

3. 解決方案

討論到此,我們必須想辦法先解決一個問題:如何在iOS端,阻止掉每一次選擇都自動執行selectDate的問題。此時,經過一番探尋查找,發[email protected]方法可以替代iOS中的@change,說干就干,盤他:

<input type="date" v-model="date" @blur="selectDate">

ok,找個蘋果機試一下,完美,選擇年月日莫的問題,只有點擊確定之后才觸發該事件。但,所謂小人得志不可取,興高采烈的時候發現在安卓機上掛掉了。原因是在安卓機上選完以后,@blur事件并不會觸發,除非選擇完成之后,點擊別的區域來觸發此事件。因此,我們又面臨一個兼容問題,怎么同時保證在安卓和iOS系統上都能流暢運行呢?

有辦法——js辨別系統是安卓還是iOS:

const u = navigator.userAgent, app = navigator.appVersion;
// Android 判斷
const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
// iOS 判斷
const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 

if (isAndroid) {
  // 這個是安卓操作系統
  // do something
}

if (isIOS) {
  // 這個是iOS操作系統
  // do something
}

有了此步驟,那接下來的事兒就簡單多了:

如果是安卓系統,則用@change; 如果是iOS系統,則用@blur; 由于是移動端,所以不考慮pc~;

完成~.~!

總結

總結以上,步驟如下:

進入頁面,執行js腳本,判斷當前設備型號; 如果是安卓設備,執行@change; 如果是iOS設備,執行@blur。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持IIS7站長之家。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、