vue中@change兼容問題詳解

更新時間：2019年10月25日 14:21:30 作者：流眸Tel

這篇文章主要介紹了vue中@change兼容問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

@change問題

1. 需求描述

需求：選擇日期，當日期改變，則頁面相應(yīng)該日期的某些事件渲染

條件：

移動端
vue框架

2. 問題產(chǎn)生及描述

問題：兼容性差距，由于@change觸發(fā)方式不同，導致時間加載不夠統(tǒng)一，時間觸發(fā)出現(xiàn)問題。

描述如下：

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

<input type="date">

emm...CSS樣式不再贅述。然后綁定數(shù)據(jù),綁定change事件監(jiān)聽值變化：

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

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

安卓：選擇完年月日，點擊確定后，數(shù)據(jù)變化，監(jiān)聽事件起作用；
iOS：點擊選擇日期，選擇年，監(jiān)聽到數(shù)據(jù)變化一次，執(zhí)行一次selectDate，選擇月，監(jiān)聽到數(shù)據(jù)變化，再次執(zhí)行，選擇日，監(jiān)聽到數(shù)據(jù)變化，再執(zhí)行……選擇不停，執(zhí)行不停。

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

3. 解決方案

討論到此，我們必須想辦法先解決一個問題：如何在iOS端，阻止掉每一次選擇都自動執(zhí)行selectDate的問題。此時，經(jīng)過一番探尋查找，發(fā)現(xiàn)@blur方法可以替代iOS中的@change，說干就干，盤他：

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

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

有辦法——js辨別系統(tǒng)是安卓還是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) {
  // 這個是安卓操作系統(tǒng)
  // do something
}

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

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