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

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

  • uni-combox
    • 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/75580.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

24届近3年南京信息工程大学自动化考研院校分析

今天给大家带来的是南京信息工程大学控制考研分析 满满干货~还不快快点赞收藏 一、南京信息工程大学 学校简介 南京信息工程大学位于南京江北新区,是一所以大气科学为特色的全国重点大学,由江苏省人民政府、中华人民共和国教育部、中国气…

轻量级自动化测试框架WebZ

一、什么是WebZ WebZ是我用Python写的“关键字驱动”的自动化测试框架,基于WebDriver。 设计该框架的初衷是:用自动化测试让测试人员从一些简单却重复的测试中解放出来。之所以用“关键字驱动”模式是因为我觉得这样能让测试人员(测试执行人员…

7-2 成绩转换

分数 15 全屏浏览题目 切换布局 作者 沈睿 单位 浙江大学 本题要求编写程序将一个百分制成绩转换为五分制成绩。转换规则: 大于等于90分为A;小于90且大于等于80为B;小于80且大于等于70为C;小于70且大于等于60为D;小…

gitlab修改远程仓库地址

目录 背景: 解决: 1.删除本地仓库关联的远程地址,添加新的远程仓库地址 2.直接修改本地仓库关联的远程仓库地址 3.打开.git隐藏文件修改远程仓库地址 4.拉取代码报错(git host key verification failed) 背景: 公司搬家&#…

数据可视化工具的三大类报表制作流程分享

电脑(pc)、移动、大屏三大类型的BI数据可视化报表制作步骤基本相同,差别就在于尺寸调整和具体的报表布局。这对于采用点击、拖拉拽方式来制作报表的奥威BI数据可视化工具来说就显得特别简单。接下来,我们就一起看看不这三大类型的…

【第三阶段】kotlin语言中的先决条件函数

用于函数内部判断异常,节省开发 1.checkNotNull()如果传入为null则抛出异常 fun main() {var name:String?nullcheckNotNull(name) }执行结果 2.requireNotNull ()如果传入为null则抛出异常 fun main() {var name:String?nullrequireNot…

【图像分类】理论篇(4)图像增强opencv实现

随机旋转 随机旋转是一种图像增强技术,它通过将图像以随机角度进行旋转来增加数据的多样性,从而帮助改善模型的鲁棒性和泛化能力。这在训练深度学习模型时尤其有用,可以使模型更好地适应各种角度的输入。 原图像: 旋转后的图像&…

快手商品详情数据API 抓取快手商品价格、销量、库存、sku信息

快手商品详情数据API是用来获取快手商品详情页数据的接口,请求参数为商品ID,这是每个商品唯一性的标识。返回参数有商品标题、商品标题、商品简介、价格、掌柜昵称、库存、宝贝链接、宝贝图片、商品SKU等。 接口名称:item_get 公共参数 名…

[oneAPI] BERT

[oneAPI] BERT BERT训练过程Masked Language Model(MLM)Next Sentence Prediction(NSP)微调 总结基于oneAPI代码 比赛:https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0517 Intel DevCloud for oneAPI&…

【云原生】Kubernetes 概述

Kubernetes 概述 1.Kubernetes 简介 Kubernetes 是一个可移植的、可扩展的、用于管理容器化工作负载和服务的开源平台,它简化(促进)了声明式配置和自动化。它有一个庞大的、快速增长的生态系统。Kubernetes 的服务、支持和工具随处可见。 K…

电脑-C盘结构

一 缓存文件 winR 输入%temp% 就会进入到电脑缓存目录 这里面的东西都可以删除 主要目录在User/xxx/AppData\Local\Temp 二 临时文件 C盘右键,详细信息 三 桌面文件 文件类型 program data表示是游戏存档/系统/软件的配置文件 drivers文件表示驱动程序文件 s…

cs231n assignment3 q1Network Visualization

文章目录 嫌啰嗦直接看代码Q1 :Network Visualizationcompute_saliency_maps题面解析代码输出 make_fooling_image题面解析代码输出 class_visualization_update_step题面解析代码输出 结语 嫌啰嗦直接看代码 Q1 :Network Visualization compute_saliency_maps 题面 这部分的…

element-ui的el-dialog,简单的封装。

el-dialog是使用率很高的组件 使用el-dialog很多都是按照文档的例子,用一个变量控制是否显示,再来一个变量控制标题。 如果我这个对话框多个地方使用的话还要创建多个变量,甚至关闭之后还要清空一些变量,应该可以简化一点。我写…

JAVA语言:什么是懒加载机制?

JVM没有规定什么时候加载,一般是什么时候使用这个class才会什么时候加载,但是JVM规定了什么时候必须初始化(初始化是第三步、装载、连接、初始化),只要加载之后,那么肯定是要进行初始化的,所以我们就可以通过查看这个类有没有进行初始化,从而判断这个类有没有被加载。 …

第四章:前端框架Vue基础入门

文章目录 一、Vue框架概述1.1 声明响应式的数据 二、Vue内置指令2.1、条件渲染指令v-if/v-show2.2 v-for: 列表渲染2.3、v-text/v-html 模板指令2.4 v-on:事件监听器2.6 动态绑定v-bind2.7 v-model表单元素值绑定 三、计算属性与监视3.1 计算属性computed3.2 watch侦听器3.3 wa…

MySQL中的锁机制

抛砖引玉:多个查询需要在同一时刻进行数据的修改,就会产生并发控制的问题。我们需要如何避免写个问题从而保证我们的数据库数据不会被破坏。 锁的概念 读锁是共享的互相不阻塞的。多个事务在听一时刻可以同时读取同一资源,而相互不干扰。 写…

Github上git lfs oid sha256文件无法下载的解决方案

问题:github上sha文件无法下载&文件超出限制 当我克隆Github上的一个库时,其中有一个包的内容格式如下: version https://git-lfs.github.com/spec/v1 oid sha256:一堆数字和字母 size 一堆数字 这堆东西类似百度网盘的下载链接和密码&a…

【Linux】应用层之HTTP协议

HTTP协议 应用层协议应用层的作用:为应用程序提供网络服务序列化的意义、为什么要将数据序列化?HTTP协议概述HTTP的协议格式请求响应GET方法和POST方法的出现的场景和区别? 应用层协议 在应用层,需要我们传递应用层所需特殊的数据…

分布式 - 服务器Nginx:一小时入门系列之负载均衡

文章目录 1. 负载均衡2. 负载均衡策略1. 轮询策略2. 最小连接策略3. IP 哈希策略4. 哈希策略5. 加权轮询策略 1. 负载均衡 跨多个应用程序实例的负载平衡是一种常用技术,用于优化资源利用率、最大化吞吐量、减少延迟和确保容错配置。‎使用 nginx 作为非常有效的HT…

AP2915DC-DC降压恒流驱动IC LED电源驱动芯片 汽车摩托电动车灯

AP2915 是一款可以一路灯串切换两路灯串的降压 恒流驱动器,高效率、外围简单、内置功率管,适用于 5-80V 输入的高精度降压 LED 恒流驱动芯片。内置功 率管输出功率可达 12W,电流 1.2A。 AP2915 一路灯亮切换两路灯亮,其中一路灯亮可 以全亮&a…