问题场景:

在电脑浏览器点击清除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. Linux下获取安装包

    https://blog.csdn.net/xiaofeng3011/article/details/82797614 # cat /etc/yum.conf [main]cachedir=/var/ ...

  2. 常用邮件SMTP POP3服务器地址大全

    #阿里云邮箱(mail.aliyun.com): POP3服务器地址:pop3.aliyun.com(SSL加密端口:995:非加密端口:110) SMTP服务器地址:smtp.aliyun.com( ...

  3. java.time包常用类API学习记录

    Java8出来已那么多年了,java.time包之前一直没有使用过,最近正好有用到,在此做个记录. 上图列出了java.time包下的类,接下来我们详细看下其中每个类的用法. Clock:获取到当前时 ...

  4. 模板渲染JinJa2

    模板渲染JinJa2 ​ 可以从数据库中查询数据,然后去替换我html中的对应内容(专业名词叫做模板渲染,你先渲染一下,再给浏览器进行渲染),然后再发送给浏览器完成渲染. 这个过程就相当于HTML模板 ...

  5. 认识react, 并简单与vue对比

    应用场景: 负责场景下的高性能 重用组件库,组件组合 中文官网:https://reactjs.org.cn/doc/in... 特点: 声明式编码(不需要关心如何实现,只需要关注在哪里做什么) 组件 ...

  6. JAVA并发编程实战笔记 第二章

    2.1 线程安全性 当多个线程访问某个类时,不论这些线程如何交替执行,这个类始终都能表现出正确的行为,且主调代码中不需要任何额外的同步或协同,则称这个类是线程安全的. 类不变性条件(Invariant ...

  7. 两张超级大表join优化

    一个简单的两表关联,SQL跑了差不多一天一夜,这两个表都非常巨大,每个表都有几十个G,数据量每个表有20多亿,表的字段也特别多. 相信大家也知道SQL慢在哪里了,单个进程的PGA 是绝对放不下几十个G ...

  8. sql server 获取整数的函数ceiling(x)和floor(x)

    --ceiling(x)返回不小于x的最小整数值,floor(x)返回不大于x的最大整数值 示例:select CEILING(-3.35), CEILING(3.35), FLOOR(-3.35), ...

  9. Git小结---So far.......

    基本的: 1. 在配置了SSH Key的情况下,clone项目时使用:git clone git@github.com/用户名/仓库名.git  使用这种方式而不使用https的方式的好处在于,在pu ...

  10. 简单了解 node net 模块

    简单了解 node net 模块 文章记录了对net 模块的简单理解分析. net模块 简单使用 net.Server 类 net.Socket 类 总结 1.1 net模块 Node.js 的 Ne ...