uniapp 官方扩展组件 uni-combox 实现:只能选择不能手写(输入中支持过滤显示下拉列表)

uniapp 官方扩展组件 uni-combox 实现:只能选择不能手写(输入中支持过滤显示下拉列表)

uni-combox

在这里插入图片描述 在这里插入图片描述

uni-combox 原本支持:

  1. 下拉选择。
  2. 输入关键字,下拉列表自动过滤显示相关
  3. 可以手动输入下,下拉列表中不存在的内容。

问题:

我的需求是不能让用户手输入,只允许选择。
可能有人会说那不如直接使用 uni-data-select ,但是这个又不支持输入时,自动过滤只显示包含的选项。
所以只能自己改造一下了。

改造源码

在这里插入图片描述

  1. data 中添加 oldVal 用于保存初始值,在选择无效值时用于回填。
  2. watch 中如果没有值就初始化 oldVal。如果在 mounted 初始化,万一 uni-combox 被多次封装,就有可能拿不到值。
  3. onFocus 添加 this.inputVal = ''; 实现每次点开下拉列表都能显示所有值。(默认因为已选的值起到过滤的作用,下拉列表将不再有其他内容)
    在这里插入图片描述
  4. onBlur 添加逻辑判断,如果失去焦点时输入框中的值不是从下拉列表中选的就用 oldVal 覆盖它。
if(!this.filterCandidates.some(s=>s===this.inputVal)){ 
	this.inputVal = this.oldVal;
}

参考资料

组件名:uni-combox

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笑虾

多情黯叹痴情癫。情癫苦笑多情难

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值