快捷導(dǎo)航

vue中@change兼容問(wèn)題詳解

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

這篇文章主要介紹了vue中@change兼容問(wèn)題詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

@change問(wèn)題

1. 需求描述

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

條件：

移動(dòng)端
vue框架

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

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

描述如下：

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

<input type="date">

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

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

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

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

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

3. 解決方案

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

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

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

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

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

有了此步驟，那接下來(lái)的事兒就簡(jiǎn)單多了：