vue中@change兼容問題的示例分析

這篇文章主要介紹vue中@change兼容問題的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

@change問題

1. 需求描述

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

條件：

• 移動端

• vue框架
  

2. 問題產生及描述

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

描述如下：

使用vue做移動端時，由于需求需要，需要在頁面某處添加一個日期選擇的控件。由于不是面向用戶，內部使用，因此本著不浪費資源的原則，直接使用h6自帶的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的問題。此時，經過一番探尋查找，發現@blur方法可以替代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～；

以上是“vue中@change兼容問題的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！