uniapp输入框组件easyInput初始状态清除符号显示的bug

最新推荐文章于 2024-03-05 21:42:42 发布
最新推荐文章于 2024-03-05 21:42:42 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： uni-app 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44353287/article/details/125516441
版权

背景：新项目使用uniapp + vue3，在使用easyInput的时候，发现初始状态时，明明无内容，却还是显示清楚符号，非常的不优雅。

问题解决：查看组件源码发现，为了兼容vue3与vue2，如果使用vue3语法，需要使用v-model:modalValue的写法，这一点文档并未说明，是坑之一。

但是只是这样还不行，其内部的兼容判断有误，导致两个条件均成立，即原本vue3判断成功了，后面的vue2判断也成功了，自然就覆盖了。

目前的解决方法就是两者都使用，但是vue2写法需要传一个空字符，即 :value=''

bzcoder
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp自定义验证码输入框，隐藏光标
02-21
内容概要：通过uniapp实现自定义验证码输入框，隐藏光标功能 适用人群：想要通过uniapp的原生input组件实现输入验证码功能 使用场景及目标： 1）点击输入框唤起键盘，蓝框就相当于input的光标，验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示，持续1s，然后清空数据，恢复原边框样式。 2）5位验证码输入完毕，点击页面其他位置，隐藏键盘；这时如果发现验证码有误，再次点击输入框又唤起键盘，也能正常删除数字。 其他说明： 实现思路就是使用for循环去创建5个正方形的view标签，然后创建一个input标签，type=tel，最大输入长度为5（根据需求来设置），再将input伪隐藏掉，获取的值分别放到5个view中展示。 验证码失败后利用v-model双向绑定，清空输入的值，增加错误提示文字和边框样式。
vue组件中点击按钮后修改输入框的状态实例代码
08-30
要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态，需要的的朋友参考下
uni-app——uniapp中 uni-easyinput 加圆角
最新发布
qq_43201350的博客
03-05 392
uni-app——uniapp中 uni-easyinput 加圆角
uni-app 给input框添加点击清空按钮
小猫爪子
11-20 1万+
用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
【uniapp】带清除保存功能的输入框
weixin_45319500的博客
01-07 1068
【代码】【uniapp】带清除保存功能的输入框。
去除input边框
NRGAGA的专栏
03-23 5461
https://blog.csdn.net/sunrainamazing/article/details/71751043 去除input的边框仅仅用border属性 ，其实是不能满足我们的需求的  此外还需要加上outline属性才可以 实现我们想要的样式  ** 去除边框的代码 border-width:0; 即可去除相应的周围的边框  但是实际，并不
uniapp uni-easyinput输入框清空按钮失效
weixin_45631278的博客
02-20 952
你小子这clear事件也没抛出去啊，o(╥﹏╥)o。uniapp你小子是懂怎么给我气死的。还特意去下载了一下最新的版本。我就说怎么一直清空不掉。
input type=number去除右侧图标
zhengxiaoya2017的博客
04-14 666
input type=number去除右侧图标 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; }
【Uniapp】uni-easyinput组件修改在禁用（disabled）情况下的默认样式
学无止境
06-09 1736
【代码】【Uniapp】uni-easyinput组件修改在禁用（disabled）情况下的默认样式。
uniapp 微信小程序 使用easyinput增强输入框clearable清除内容无效的问题解决方法
chenglaugh1989的博客
12-18 1142
找到自己的项目中的增强输入框组件vue文件uni-easyinput.vue，修改文中的onClear方法。对输入值进行异步修改，使用this.$nextTick实现，以防止因父子组件数值关联造成输入值修改后又恢复的情况。使用uniapp开发小程序，用到了增强输入框easyinput，在进行实机测试时，点击输入框中的清除按钮，有时候会发生输入框内容未清除的情况，现在提供解决方法。这个方法是我尝试了多次琢磨出来的，亲测可用。
前端uniapp表情插件
05-09
前端uniapp表情插件
微信小程序picker组件下拉框选择input输入框的实例
08-29
主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
js控制输入框获得和失去焦点时状态显示的方法
10-24
主要介绍了js控制输入框获得和失去焦点时状态显示的方法,可实现判断输入框的焦点状态设置不同样式的功能,是非常实用的技巧,需要的朋友可以参考下
uniapp使用from表单提交后清空input输入内容的正确方法
君笑尘的技术博客
03-29 8586
做小程序开发的时候，经常使用到from表单提交，但是提交后input输入的内容却没有办法清楚。 搜索了一下后发现大家在微信小程序原生开发的方案都是给input的value设置一个默认值inputName，然后在提交成功后，把inputName通过this.setData 设置为空 //直接将input值设置空 this.setData({ inputName: '' }) 但是在uniapp上这样做，并不会改变input输入的内容，尝试改用了: this.inputNam
uni-app清空input输入框内容
热门推荐
shijie
12-24 1万+
uni-app
UNIAPP----input去除输入的空格
weixin_44126737的博客
08-27 5703
通过正则筛选空格 <inputtype="text"name="userName"onkeyup="this.value=this.value.replace(/[, ]/g,'')"> 或者在发送请求时，去除用户输入的空格，然后发到后端 data: { 'name': this.name.replace(/[, ]/g,''), 'varieties': this.varieties.replace(/[, ]...
uni-app input中的值无法被清除
qq_41200881的博客
04-23 2888
问题描述： uni-app的表单提交后清除input内容失败。 原因： 数据绑定用的:value,改成v-model后问题解决
记录uniapp开发时input框限制输入
qq_42441107的博客
11-09 5439
记录uniapp开发时input框限制输入 input框输入手机号的约束 <input @input="onlyNum" class="inp" v-model="phone" name="phone" type="number" maxlength="11" placeholder="请输入您的联系电话" placeholder-class="pl-style" @blur="replaceInput" /> onlyNum(){ if(!(event.keyCode==46)
uniapp输入框带清除
09-05
UniApp是一个基于Vue.js的跨平台开发框架，具有良好的开发效率和跨平台的特性。在UniApp中，输入框带清除的功能可以通过以下方式实现。 首先，在template中添加一个输入框组件，并绑定一个变量用于存储输入的内容。例如： ``` <template> <view> <input v-model="inputValue" placeholder="请输入内容"></input> <button @click="clearInput">清除</button> </view> </template> ``` 然后，在script的data中定义inputValue变量，并在methods中添加clearInput方法，用于清空输入框内容。例如： ``` <script> export default { data() { return { inputValue: '' } }, methods: { clearInput() { this.inputValue = '' } } } </script> ``` 在上述代码中，`v-model="inputValue"`用于双向绑定输入框的值，当输入框内容发生改变时，inputValue变量也会被更新。`@click="clearInput"`表示当点击清除按钮时，调用clearInput方法清空输入框内容。clearInput方法会将inputValue设为空字符串，从而实现清除输入框的功能。 通过以上代码，就可以实现一个带有清除按钮的输入框。用户可以输入内容，同时点击清除按钮可以清空输入框的内容。这样就方便用户在需要清空输入框内容时进行操作。在UniApp中，通过使用v-model和定义相应的方法，可以很方便地实现输入框带清除的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值