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 相关文章推荐
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
详细探究ES6之Proxy代理
Jul 22 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python性能优化的20条建议
2014/10/25 Python
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
python杀死一个线程的方法
2015/09/06 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
django在开发中取消外键约束的实现
2020/05/20 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
酒店服务实习自我鉴定
2013/09/22 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
环保口号大全
2014/06/12 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
幽默口才训练经典句子(48句)
2019/08/19 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python