使用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 ...
随机推荐
- PInvoke.net Visual Studio Extension
https://visualstudiogallery.msdn.microsoft.com/9CA9D544-05D2-487B-AB49-31851483C1CC http://www.pinvo ...
- Python基本语法_函数_返回值
目录 目录 前言 函数的返回值 在函数中Return和Print的区别 函数中的文档 前言 函数的返回值是函数重要的组成部分.函数的根本在于实现程序的部分功能,所以很多时候我们需要将函数执行后的结果返 ...
- 阶段3 2.Spring_02.程序间耦合_7 分析工厂模式中的问题并改造
循环打印 工厂了的打印先注释掉 打印出来了5次对象. 打印数字i同时,让i++操作.为了看他被常见了几次实例 调用保存的方法 没个都想都有一个唯一的实例.在创建对象的时候,重新初始化了i的值.所以i每 ...
- 十:jinja2模板查找路径
jinja2用于渲染模板 查找路径 1.默认从项目根目录下的templates下面找指定的html文件 也可以往下新建路径 2.指定自定义路径 在Flask的源码中,指定了默认路径为templates ...
- Java学习之==>异常体系
一.定义 程序运行时总是会遇到各种各样的问题,Java中的异常体系就是针对这些问题提出的统一的处理方案.在Java中,将这些各种各样的问题进行归类后,统一称为异常. 二.分类 我们先来看看下面这个图: ...
- java:Springmvc框架3(Validator)
1.springmvcValidator: web.xml: <?xml version="1.0" encoding="UTF-8"?> < ...
- epoll 性能分析(解决占用CPU 过高问题)2
针对服务器框架Engine,在工作线程中发现该线程占用CPU过高,分析之后发现问题出在死循环那里 void cServerBase::OnProcess() { printf("cServe ...
- cosbench 安装
cosbench是什么 COSBench是Intel团队基于java开发,衡量云对象存储服务性能的基准测试工具,全称是Cloud object Storage Bench,同所有的性能测试工具一样,C ...
- 【VS开发】【Qt开发】使用process explorer查看exe调用dll的情况
打开process explorer 选中想要查看句柄或者加载的dll的进程,比如下面截图红框中的 chrome.exe 菜单点击view / Lower Pane View,其下有DLLS和Hand ...
- 解决reportNG中文乱码(转:http://www.it610.com/article/3626590.htm)
1.下载reportng源码 git clone https://github.com/dwdyer/reportng.git 2.修改AbstractReporter.java ...