vue中@change兼容问题详解

@change问题

1. 需求描述

需求：选择日期，当日期改变，则页面相应该日期的某些事件渲染

条件：

  • 移动端
  • vue框架

2. 问题产生及描述

问题： 兼容性差距，由于@change触发方式不同，导致时间加载不够统一，时间触发出现问题。

描述如下：

使用vue做移动端时，由于需求需要，需要在页面某处添加一个日期选择的控件。由于不是面向用户，内部使用，因此本着不浪费资源的原则，直接使用h5自带的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～；

完成～.～！

总结

总结以上，步骤如下：

  • 进入页面，执行js脚本，判断当前设备型号；
  • 如果是安卓设备，执行@change；
  • 如果是iOS设备，执行@blur。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue下的@change事件的实现

    vue下的@change事件的实现

    楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下 先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="vue.js"></script> <body&g

  • vue中@change兼容问题详解

    @change问题 1. 需求描述 需求:选择日期,当日期改变,则页面相应该日期的某些事件渲染 条件: 移动端 vue框架 2. 问题产生及描述 问题: 兼容性差距,由于@change触发方式不同,导致时间加载不够统一,时间触发出现问题. 描述如下: 使用vue做移动端时,由于需求需要,需要在页面某处添加一个日期选择的控件.由于不是面向用户,内部使用,因此本着不浪费资源的原则,直接使用h5自带的input: <input type="date"> emm...CSS样式不再

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    vue-resource特点 vue-resource插件具有以下特点: 1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多. 2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持. 3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为"先知",Pro

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • Vue中watch使用方法详解

    目录 前言 watch immediate和handler deep 拓展 前言 说到 vue 中的 watch 方法,大家可能首先想到,它是用来监听数据的变化,一旦数据发生变化可以执行一些其他的操作.但是 watch 的操作可不止如此,本章就带大家一起深剖细析 vue 中的 watch 方法. watch 因为 vue 是双向数据绑定,所以当页面数据发生变化时,我们通过 watch 方法就可以拿到数据变化前和变化后的值,从而做一系列操作,下面我们通过一个简单的例子来解释. 先看下面这段代码 <

随机推荐