uniapp uni-easyinput输入框清空按钮失效

背景：新项目使用uniapp + vue3，在使用easyInput的时候，发现初始状态时，明明无内容，却还是显示清楚符号，非常的不优雅。问题解决：查看组件源码发现，为了兼容vue3与vue2，如果使用vue3语法，需要使用v-model:modalValue的写法，这一点文档并未说明，是坑之一。但是只是这样还不行，其内部的兼容判断有误，导致两个条件均成立，即原本vue3判断成功了，后面的vue2判断也成功了，自然就覆盖了。目前的解决方法就是两者都使用，但是vue2写法需要传一个空字符，即 :value='

找到自己的项目中的增强输入框组件vue文件uni-easyinput.vue，修改文中的onClear方法。对输入值进行异步修改，使用this.$nextTick实现，以防止因父子组件数值关联造成输入值修改后又恢复的情况。使用uniapp开发小程序，用到了增强输入框easyinput，在进行实机测试时，点击输入框中的清除按钮，有时候会发生输入框内容未清除的情况，现在提供解决方法。这个方法是我尝试了多次琢磨出来的，亲测可用。

【代码】【uniapp】带清除保存功能的输入框。

用value绑定输入的值，要通过@input事件监听，这个方法只要input值发生改变就会调用，v-if控制‘清空’这个图标，没值就不显示，我悟了！！！ 效果图 <view slot="default" class="search_box"> <text class="icon_search"></text> <input style="width: 280px;" :value="searchName" class="prompt" placeholder

代码中我用的是for in 去循环数组的 因为我之前写的动态表单是个对象 前面的索引是从1开始 页面用v-for循环也是从索引 1 开始循环的 介意的话可以全使用foreach 其他 但是用for in 去循环数组也没啥问题 我只是懒得改了；主要的bug就是uniapp这些表单不会自动校验 或者说是不会校验第二次就很恶心，所以我在输入框绑定的两个input和blur事件来处理 算是歪门邪道 但也是解决bug的关键方法；

<input type="text" :value="inputValue" @focus="vauleEmpty"/> 1，动态的绑定value并为其将值设置为inputValue属性，因为默认的值是搜索商品名称或品牌 2,@fous属性是uni-app中方法，当input标签获得光标时，就会触发valueEmpty方法 methods:{ valueEmpty(e){ ...

问题描述： uni-app的表单提交后清除input内容失败。 原因： 数据绑定用的:value,改成v-model后问题解决

uni-app

这里写目录标题内置组件 内置组件 view 视图容器 属性说明 1、hover - class 指定按下去的样式类，与class类似，当hover-class = “none”时，没有点击状态 效果。 2、hover-stop-propagation 默认值false，指定是否阻止本节点的祖先节点出现点击状态。当给父子级都设置了hover-class,你会发现竟然还是冒泡的，为阻止冒泡，就需要用到hover-stop-propagation属性 3、hover-start-time 按住后多久出现点击状态

<template> <view class="flex-center-center input-wrap"> <view class="input-lable">{{lable}}</view> <input class="input-val" :type="type" :focus="focus" :value="value" :password="password" :disabled="disabled" :data-field.

<template> <view> <view class="uni-form-item uni-column"> <view class="title">多个输入框都带清除按钮</view> <view v-for="(item,index) in formList" :key="item.value" clas...

elementui中input输入框clearable属性无效的解决方法 如果你按照官网文档加上clearable属性没有用的话，那么可能是版本不对或者没引入,可以使用这条命令 npm update ...

input type=number去除右侧图标 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }

2020-10-24，这是一个周末。我本应该是躺在床上玩阴阳师的咸鱼。但是一想到我周一好像还得交付4个APP页面，我不得不从床上爬起来。 写着写着我头就开始疼起来了。因为我用uni-app开发的功能页面，在PDA扫描完之后，实际v-model绑定的值打印了一下确实是清空的，但是页面上仍然是显示着的，于是出于一条咸鱼的本能，我当然要寻求各位百度道友的帮助，果不其然还是有很多道友已经渡过此劫。于是我开心的荡起了代码。但是嘞，搬了半天代码还是不起作用，于是我心态崩了呀，看了一眼时间，已经23...

最后看了组件的源码，发现有个判断，如果存在suffixIcon时，并没有绑定清空事件，type也不是clear类型。所以看不到清空的图标。把suffixIcon 变为 prefixIcon。这样就能实现既有图标，也有清空操作。不要suffixIcon属性。但是这个界面的效果可能跟预期不一样。然后根据官网，给它的clearable属性设置为true。期望效果如下，希望右侧有图标，也能进行清空操作。这个可能需要自己评估是否可以不要右侧图标的展示。然后发现并没有出现清空图标。

看u-input源码，@input和@change方法都是绑定的valueChange方法，清除方法onClear如下，先赋值为空然后在nextTick中改变已有值，但是在小程序中由于某种机制会在点击清除时优先为失焦状态，此时清除按钮被隐藏，或者有时候先触发清除，但是由于又触发了input和change又把原来的值给赋值上去了导致出现问题，所以解决办法就是如下将清空方法修正，，增加一个settimeout延时清空即可。

最近，项目中需要，在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时，右边显示“×”按钮；输入框为空时，“×”按钮消失。难点在于获取焦点的同时，获取输入内容。注意：本例子的样式基于bootstrap.css和jquery，不再单独添加样式。1.html部分，将button和input框放入同一个div中，清除按钮可以使用图片或fonts图标，我使用的是bootstrap中button样式...