uniapp 官方扩展组件 uni-combox 实现:只能选择不能手写(输入中支持过滤显示下拉列表)
- uni-combox
- uni-combox 原本支持:
- 问题:
- 改造源码
- 参考资料
uni-combox

uni-combox 原本支持:
- 下拉选择。
- 输入关键字,下拉列表自动过滤显示相关
- 可以手动输入下,下拉列表中不存在的内容。
问题:
我的需求是不能让用户手输入,只允许选择。
可能有人会说那不如直接使用 uni-data-select ,但是这个又不支持输入京时,自动过滤只显示包含京的选项。
所以只能自己改造一下了。
改造源码

- 在
data中添加oldVal用于保存初始值,在选择无效值时用于回填。 - 在
watch中如果没有值就初始化oldVal。如果在mounted初始化,万一uni-combox被多次封装,就有可能拿不到值。 - 在
onFocus添加this.inputVal = '';实现每次点开下拉列表都能显示所有值。(默认因为已选的值起到过滤的作用,下拉列表将不再有其他内容)

onBlur添加逻辑判断,如果失去焦点时输入框中的值不是从下拉列表中选的就用oldVal覆盖它。
if(!this.filterCandidates.some(s=>s===this.inputVal)){
this.inputVal = this.oldVal;
}
参考资料
组件名:uni-combox



















