使用vux的x-input组件中show-clear=“true”清除icon点击失效的问题
问题场景:
在电脑浏览器点击清除icon正常
在手机浏览器,手机微信,微信开发者工具中点击清除icon失效
查看vux中的x-input组件中的源码发现,清除icon使用了v-show显示与隐藏,对应源码如下所示:
在电脑浏览器中,使用触发点击的那一刻,v-show为true,此时可执行clear事件,然后v-show变成false,是正常的。
在手机浏览器,手机微信,微信开发者工具中,使用触发点击的那一刻,此时v-show马上变成false,icon组件隐藏了,所以导致clear事件无法触发。

解决方法:
通过不断调试,发现是isFocus导致的,所以触发点击的那一刻,就执行了input失去焦点的事件,isFocus立刻变成了false。所以在onBlur方法上修改,给isFocus添加一个setTimeout延迟事件即可。这样就解决了

使用vux的x-input组件中show-clear=“true”清除icon点击失效的问题的更多相关文章
- 在vue组件中设置定时器和清除定时器
由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器.但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要 ...
- vue父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...
- 在vue组件的stylus样式总 取消search类型的input按钮中默认样式
在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...
- 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期
原来的代码如下: <view class="right"> <picker mode="date" value="{{mat ...
- 纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件
现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...
- 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后
目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...
- 微信小程序中 input组件影响页面样式的问题
input组件有个默认的宽高,好像是不能清除的,在使用flex布局的时候,发现会影响到页面的布局,以为是flex布局的问题,改为float布局试了下也是同样的问题,试着把input标签换成别的标签,问 ...
- 你真的知道组件中的v-model吗?
v-model的神奇 html <div id="app"> <input v-model="poin"> {{ poin }} < ...
- vue 组件中数组的更新
今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...
随机推荐
- ArcGIS客户端API中加载大量数据的几种解决办法
ArcGIS客户端API中加载大量数据的几种解决办法 2011-03-25 18:17 REST风格的一切事物方兴未艾,ArcGIS Server的客户端API(Javascript/Flex/Sil ...
- OpenStack RPM Sample 解析
目录 文章目录 目录 前言 RPM 打包环境安装 RPM 打包流程 OpenStack RPM SPEC Sample RPM 升级/回退 前言 软件功能升级,尤其是 Python 这类解析型语言的软 ...
- Windows 10 无法访问共享的解决办法大全
本文前面介绍 Windows 10 操作系统无法访问其他电脑的共享文件夹,而其他电脑访问该共享可以访问的解决办法. 简单点说就是,你的操作系统是 Win10 ,你访问不了某台电脑的共享,但是别人可以. ...
- Kibana 5.5.2 安装包下载 (各种历史版本下载)
背景说明 最近项目中在使用 5.5.2 版本的 Elasticsearch 作为数据库,使用的是以前的老版本. 用到 Elasticsearch ,难免要和其相关基本操作命令打交道.选择一款顺手的工 ...
- nginx报错:nginx: [emerg] unknown directive in /etc/nginx/conf.d/test.conf:4
nginx报错:nginx: [emerg] unknown directive in /etc/nginx/conf.d/test.conf:4 解决: 第四行出现了 tab 空格 , 换成正常的 ...
- leaflet的入门开发(一)
2016年9月27日—1.0leaflet,最快的,最稳定和严谨的leaflet,终于出来了! leaflet是领先的开源JavaScript库为移动设备设计的互动地图.重33 KB的JS,所有映射大 ...
- GitLab使用小结
对Git和GitLab的使用作一个小结 GitLab基于Git,可以作为团队开发项目使用,因此通常会有一个主分支master和其他分支,因此项目成员中任意一人不能随意push到主分支中,容易引起混乱: ...
- sublime3配置php开发环境
Sublime3 3143 1.用包管理器安装SublimeLinter ctrl+shift+p Package Control: install package SublimeLinter 注意: ...
- java读取文件完整版
public static void readFileByBytes(String fileName) { File file = new File(fileName); InputStream in ...
- IDEA 双击只选择了一个变量的某部分单词
1,很多抄袭文章说 在keymap 里搜索 select Word at caret , 鄙视手动抄袭和编写爬虫来 作恶的开发者. 2,自己试了,File菜单 ----> settings- ...