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 动态添加样式规则 W3C校检
Dec 25 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 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
PHP脚本的10个技巧(7)
2006/10/09 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php比较相似字符串的方法
2015/06/05 PHP
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
对类Vue的MVVM前端库的实现代码
2018/09/07 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
详解Django的CSRF认证实现
2018/10/09 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
python数据化运营的重要意义
2019/11/25 Python
python3爬取torrent种子链接实例
2020/01/16 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
酒店服务与管理毕业生求职信
2013/11/02 职场文书
上课睡觉检讨书
2014/01/28 职场文书
初中作文评语大全
2014/04/23 职场文书
银行求职自荐信
2014/06/30 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
QT与javascript交互数据的实现
2021/05/26 Javascript
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技