使用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 ...
随机推荐
- 如图 honehoneclock
如图人体时钟 honehoneclock 页面演示来自http://chabudai.org/blog/?p=59 <embed name="honehoneclock" ...
- java:Mybatis框架3(二级缓存,延时和积极加载,SSI(Ibatis)集成,SSM集成)
1.二级缓存: 需要导入二级缓存jar包: mybatis03: ehcache.xml: <ehcache xmlns:xsi="http://www.w3.org/2001/XML ...
- Elasticsearch 安装 Head 插件
引子:在上一篇文章Elasticsearch入门(一):CentOS 7.6 安装ES 7.0.0中,我们讲了如何在CentOS 7.6环境下安装 Elasticsearch 7.0.下面,我将讲一讲 ...
- Angular5 自定义scrollbar样式之 ngx-malihu-scrollbar
简介 此插件是 Malihu jQuery Scrollbar 为了在 Angular2+ 环境下使用,封装的一个ts的版本.提供directive和service. 从安装量来看,它比不过 perf ...
- python 并发编程 协程 协程介绍
协程:是单线程下的并发,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的 需要强调的是: 1. python的线程属于内 ...
- [gym101981M][2018ICPC南京M题]Mediocre String Problem
题目链接 题目大意是问在$S$串中找区间$[i,j]$,在$T$串中找位置$k$,使得$S[i,j]$和$T[1,k]$可以组成回文串,并且$j-i+1>k$,求这样的三元组$(i,j,k)$的 ...
- kafka 教程(一)-初识kafka
消息队列 MQ 消息队列就是 消息 message 加 队列 queue,是一种消息传输的容器,提供生产和消费 API 来存储和获取消息. 消息队列分两种:点对点(p2p).发布订阅(pub/sub) ...
- numpy-排序
numpy 有多种排序方法. sort sort(self, axis=-1, kind='quicksort', order=None):排完序后改变原值 [只有这个方法改变原值] axis : i ...
- HNUSTOJ-1674 水果消除(搜索或并查集)
1674: 水果消除 时间限制: 2 Sec 内存限制: 128 MB提交: 335 解决: 164[提交][状态][讨论版] 题目描述 “水果消除”是一款手机游戏,相信大家都玩过或玩过类似的游戏 ...
- Win10下编译OpenJDK8
导航目录 Win10下编译OpenJDK8 相关参考文章 编译环境 编译前准备 1.安装 Visual Studio 2010 Professional 2. 准备OpenJDK8 3. 编译JDK环 ...