vue中@change兼容问题详解


Posted in Javascript onOctober 25, 2019

@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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
jQuery侧边栏实现代码
May 06 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
vue下的@change事件的实现
Oct 25 #Javascript
微信小程序(订阅消息)功能
Oct 25 #Javascript
layui 解决form表单点击无反应的问题
Oct 25 #Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 #Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 #Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 #Javascript
vue实现评论列表功能
Oct 25 #Javascript
You might like
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
python如何使用unittest测试接口
2018/04/04 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python实现合并两个排序的链表
2019/03/03 Python
Python requests上传文件实现步骤
2020/09/15 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
我们的节日元宵活动方案
2014/08/23 职场文书
党内外群众意见范文
2015/06/02 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书