问题场景:

在电脑浏览器点击清除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点击失效的问题的更多相关文章

  1. 在vue组件中设置定时器和清除定时器

    由于项目中难免会碰到需要实时刷新,无论是获取短信码,还是在支付完成后轮询获取当前最新支付状态,这时就需要用到定时器.但是,定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要 ...

  2. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  3. 在vue组件的stylus样式总 取消search类型的input按钮中默认样式

    在vue组件的stylus样式中 取消search类型的input按钮中默认样式 记录一个坑 环境 Vue组件 使用了Stylus的CSS风格. 问题 input输入框使用了 type="s ...

  4. 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期

    原来的代码如下: <view class="right">     <picker mode="date" value="{{mat ...

  5. 纯生js实现Element中input组件的部分功能(慢慢完善)并封装成组件

    现在实现的有基础用法.可清空.密码框,参考链接:https://element.eleme.cn/#/zh-CN/component/input HTML代码:想要测试哪个组件,直接将对应组件解开注释 ...

  6. 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

    目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...

  7. 微信小程序中 input组件影响页面样式的问题

    input组件有个默认的宽高,好像是不能清除的,在使用flex布局的时候,发现会影响到页面的布局,以为是flex布局的问题,改为float布局试了下也是同样的问题,试着把input标签换成别的标签,问 ...

  8. 你真的知道组件中的v-model吗?

    v-model的神奇 html <div id="app"> <input v-model="poin"> {{ poin }} < ...

  9. vue 组件中数组的更新

    今天写项目时遇到的问题,瞬间就卡在那了 来还原一下: parent.vue: <template> <div> <button @click="change&q ...

随机推荐

  1. Elastic Stack学习

    原文链接 Elastic Stack简称ELK,在本教程你将学习如何快速搭建并运行Elastic Stack. 首先你要安装核心开源产品: Elasticsearch: Kibana: Beats: ...

  2. Day03:运算符和表达式 / 分支结构

    Java 运算符 计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量.我们可以把运算符分成以下几组: 算术运算符 关系运算符 位运算符 字符串运算符 ...

  3. Egret入门学习日记 --- 第五篇(书中 3.5节 内容)

    第五篇(书中 3.5节 内容) 今天得把昨天的问题解决了才行. 去了Q群,碰到一位大大,他给我解惑了.Thanks♪(・ω・)ノ 这是我之前按照书上写的方式写的,并没有效果. 然后大大给我解答了: 后 ...

  4. LeetCode.933-最近通话次数(Number of Recent Calls)

    这是悦乐书的第357次更新,第384篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第219题(顺位题号是933).写一个类RecentCounter来计算最近的请求. 它 ...

  5. C#后台正则表达式

    static Regex RegPhone = new Regex(@"^((1[34578][0-9]{1}))\d{8}");        static Regex RegN ...

  6. [转帖]RSA算法与DSA算法的区别

    RSA算法与DSA算法的区别 https://cloud.tencent.com/developer/news/254061 文章来源:企鹅号 - SuperFullStack 本文译自:StackE ...

  7. 创建B树,动态添加节点,并使用三种遍历算法对树进行遍历

    ks17:algorithm apple$ cat btree_test.c ///********************************************************** ...

  8. 洛谷 P2801 教主的魔法 题解

    题面 刚看到这道题的时候用了个树状数组优化前缀和差分的常数优化竟然AC了?(这数据也太水了吧~) 本人做的第一道分块题,调试了好久好久,最后竟然没想到二分上还会出错!(一定要注意)仅此纪念: #inc ...

  9. Elasticsearch操作索引

    目录 操作索引 1. 基本概念 2. 创建索引 2.1 语法 2.2查看索引设置 2.3.删除索引 2.4 映射配置 2.5 新增数据 2.6 修改数据 2.7 删除数据 3. 查询 3.1 基本查询 ...

  10. Python 入门之 内置模块 -- 序列化模块(json模块、pickle模块)

    Python 入门之 内置模块 -- 序列化模块(json模块.pickle模块) 1.序列化 Python中这种序列化模块有三种: ​ json模块 : ​ 不同语言都遵循的一种数据转化格式,即不同 ...