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