vue中@change兼容問(wèn)題的示例分析-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作與策劃設(shè)計(jì),魚(yú)峰網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:魚(yú)峰等地區(qū)。魚(yú)峰做網(wǎng)站價(jià)格咨詢:13518219792vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

@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)資源的原則，直接使用h6自帶的input：

<input type="date">

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

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

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

  • 安卓：選擇完年月日，點(diǎn)擊確定后，數(shù)據(jù)變化，監(jiān)聽(tīng)事件起作用；

  • iOS： 點(diǎn)擊選擇日期，選擇年，監(jiān)聽(tīng)到數(shù)據(jù)變化一次，執(zhí)行一次selectDate，選擇月，監(jiān)聽(tīng)到數(shù)據(jù)變化，再次執(zhí)行，選擇日，監(jiān)聽(tīng)到數(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ō)干就干，盤(pán)他：

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

ok,找個(gè)蘋(píng)果機(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)單多了：

  • 如果是安卓系統(tǒng)，則用@change;

  • 如果是iOS系統(tǒng)，則用@blur;

  • 由于是移動(dòng)端，所以不考慮pc～；

以上是“vue中@change兼容問(wèn)題的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享題目：vue中@change兼容問(wèn)題的示例分析-創(chuàng)新互聯(lián)
文章分享：http://muchs.cn/article28/dhgpjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、用戶體驗(yàn)、建站公司、App設(shè)計(jì)、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)