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实现的论坛常用的运行代码的效果
Jul 15 Javascript
javascript hashtable实现代码
Oct 13 Javascript
jquery之empty()与remove()区别说明
Sep 10 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 Javascript
js 实现验证码输入框示例详解
Sep 23 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
一个取得文件扩展名的函数
2006/10/09 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jQuery 表格工具集
2010/04/25 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jquery根据name属性查找的小例子
2013/11/21 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
JS同步、异步、延迟加载的方法
2018/05/05 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
python解析json实例方法
2013/11/19 Python
Ubuntu下安装PyV8
2016/03/13 Python
详解Python中的type和object
2018/08/15 Python
浅析python继承与多重继承
2018/09/13 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
标准化管理实施方案
2014/02/25 职场文书
销售主管竞聘书
2014/03/31 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis