问题场景:

在电脑浏览器点击清除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. 四十:数据库之SQLAlchemy实现排序的三种方式

    SQLAlchemy实现排序有三种方式一:order_by:查询的时候使用此方式根据某个字段或模型下的属性进行排序二:模型定义的时候,指定排序方式三:一对多的时候,relationship的order ...

  2. django 通过模型类操作数据表(基础增删改查)

    进入项目shell的命令: python manage.py shell 以下为在相互shell终端中演示的例子: 首先导入模型类:(from 应用名.models import 类名) from b ...

  3. pycharm修改代码后第一次运行不生效解决

    问题: 用pycharm每次修改代码后第一次运行还是原来的结果,运行第二次的时候才是修改后代码的结果 解决: 每次修改代码后保存一下即可解决

  4. Altera DDR2 IP核学习总结1-----------SRAM,DRAM

    SRAM,DRAM,SDRAM和DDR2这些芯片详解网上铺天盖地的各种资料都有,这里只是根据个人习惯做一下总结,方便记忆. 详细资料可以参考https://wenku.baidu.com/view/3 ...

  5. Libra的思考

    这几年关注了很多的新技术,近期让我觉得值得一讲的是blockchain,刚巧6.18号就发布了Libra 他是这么介绍自己的 libra https://developers.libra.org/bl ...

  6. xc语言l博客作业03

    问题 答案 这个作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/8719 我在 ...

  7. seata项目结构

    1. 概述 在拉取 Seata 项目后,我们会发现拆分了好多 Maven 项目.

  8. Spring(九)--通知

    Spring之Advice通知 Spring原生的经典模式  实现AOPadvice :通知 前置通知:在目标方法执行之前执行!不能改变方法的执行流程和结果!            实现MethodB ...

  9. System.InsufficientMemoryException:无法分配536870912字节的托管内存缓冲区。可用内存量可能不足

    一个病人住院太久,一次性打印护理表单超过3000条时报如标题所示的错误, 个人查阅分析应该可以从如下几方面入手: 一:查看程序客户端和服务端的配置文件相关属性是否限制了缓存最大值 (应该不是这个问题, ...

  10. selenium2环境搭建----基于python语言

    selenium支持多种语言如java.c#.Python.PHP等,这里基于python语言,所以这里搭建环境时需做俩步操作: ----1.Python环境的搭建 ----2.selenium的安装 ...