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兼容问题的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！