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

news2025/1/16 7:44:49

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL 数据库文件的导入导出

目录 数据库的导出 导出整个数据库 导出数据库中的数据表 导出数据库结构 导出数据库中表的表结构 导出多个数据库 导出所有数据库 数据库的导入 数据库的导出 mysqldump -h IP地址 -P 端口 -u 用户名 -p 数据库名 > 导出的文件名 用管理员权限打开cmd进入MySQL的bi…

Java StringBuffer和StringBuilder类

由于String的不可更改特性,为了方便字符串的修改,Java中又提供StringBuilder和StringBuffer类。与String不同的是,StringBuffer和StringBuilder是对字符串本身进行修改,并且不产生新的对象,而String是产生新的字符串进…

中科亿海微浮点数转换定点数

引言 浮点数转换定点数是一种常见的数值转换技术,用于将浮点数表示转换为定点数表示。浮点数表示采用指数和尾数的形式,可以表示较大范围的数值,但存在精度有限的问题。而定点数表示则采用固定小数点位置的形式,具有固定的精度和范…

win10安装mysql和c++读取调用举例

一、下载mysql8.rar解压到C盘(也可以解压到其他位置) 在系统环境变量添加JAVA_HOMEC:\myslq8,并在path中添加%JAVA_HOME%\bin; 二、以管理员身份进入命令窗口 三、修改配置文件指定安装路径和数据库的存放路径 四、键入如下命令初始化并启动mysql服务,然后修改登录…

Linux下grep通配容易混淆的地方

先上一张图: 我希望找到某个版本为8的一个libXXX.8XXX.so ,那么应该怎么写呢? 先看这种写法对不对: 是不是结果出乎你的意料之外? 那么我们来看一下规则: 这里的 "*" 表示匹配前一个字符的零个或多个 于是我们就不难理解了: lib*8*.so 表示 包…

一篇文章搞懂如何使用JDBC操作数据库,还有JDBC进阶操作

目录 简介什么是JDBC如何使用JDBC1、获取连接2、操作数据3、关闭连接,释放资源使用技巧 查询操作创建表,插入模拟数据使用Java查询数据的数据SQL注入问题使用PreparedStatement查询 更新操作插入插入并获取主键更新删除 JDBC事务JDBC的批量操作JDBC连接池…

微服务与Nacos概述-5

引入OpenFeign 添加依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency><groupId>com.alibaba.cloud</groupId>…

【Linux】CentOS7.3环境下安装Mysql 8.0.30

CentOS7.3环境下安装Mysql 8.0.30 1.mysql官网下载安装包 下载地址&#xff1a;https://downloads.mysql.com/archives/community/ 2.上传安装包到linux服务器并解压 tar -vxf mysql-8.0.30-linux-glibc2.12-x86_64.tar.xz修改名称 mv mysql-8.0.30-linux-glibc2.12-x86_6…

中心极限定理例题

关于大数定律的两个题目。 例1 注意牢记公式&#xff1a; P { X } P { ∑ i 1 n x i − n μ n σ < x } ∫ − ∞ x e − x 2 2 d x 2 π P\{ X\} P \{\frac { \sum_{i1}^{n} x_i - n \mu}{\sqrt {n} \sigma} < x \} \frac {\int _{-\infty} ^{x} e ^{- \frac {x^…

keil下载程序具体过程3:从jlink的log开始

引言 本篇文章开始&#xff0c;跟着jlink的log&#xff0c;我们将跟踪镜像文件具体的下载过程。 一、jlink的log 下面的是keil点击Download按钮输出的log。 FromELF: creating hex file... ".\Objects\Project.axf" - 0 Error(s), 0 Warning(s). Build Time Elapsed…

C++ 语言的输入与输出

C 标准 I/O 库包含 iostream、fstream 和 sstringstream。iostream、fstream 比较常用&#xff0c;一般操作于输入和输出&#xff0c;相较于前两者来说 sstringstream 的出现频率就低了许多&#xff0c;一般操作于数据的格式化。为了能更好的理解 C 语言的标准 I/O 库&#xff…

通过MATLAB自动产生Hamming编译码的verilog实现,包含testbench

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 1. 原理 1.1 编码规则 1.2 错误检测和纠正 2. 实现过程 2.1 编码过程 2.2 解码过程 3. 应用领域 3.1 数字通信 3.2 存储系统 3.3 ECC内存 3.4 数据传输 5.算法完整程序工程 1.算法…

MySQL多表关联查询

目录 1. inner join&#xff1a; 2. left join&#xff1a; 3. right join&#xff1a; 4.自连接 5.交叉连接&#xff1a; 6、联合查询 7、子查询 1. inner join&#xff1a; 代表选择的是两个表的交差部分。 内连接就是表间的主键与外键相连&#xff0c;只取得键值一致…

全国各地区数字经济工具变量-文本词频统计(2002-2023年)

数据简介&#xff1a;本数据使用全国各省工作报告&#xff0c;对其中数字经济相关的词汇进行词频统计&#xff0c;从而构建数字经济相关的工具变量。凭借数字经济政策供给与数字经济发展水平的相关系数的显著性作为二者匹配程度的划分依据&#xff0c;一定程度上规避了数字经济…

Vue.js2+Cesium1.103.0 九、淹没分析效果

Vue.js2Cesium1.103.0 九、淹没分析效果 Demo <template><divid"cesium-container"style"width: 100%; height: 100%;"><spanid"button"style"position: absolute; right: 50px; top: 50px; z-index: 999; font-size: 24px…

旅卦-火山旅

前言&#xff1a;人生就像一趟旅行&#xff0c;为谋生奔波也是旅&#xff0c;旅是人生的常态&#xff0c;我们看一下易经里的旅卦&#xff0c;分析下卦辞和爻辞以及自己的理解。 目录 卦辞 爻辞 总结 卦辞 旅&#xff1a;小亨&#xff0c;旅贞吉。 卦序&#xff1a;穷大者…

oracle 增加控制文件

oracle 增加控制文件 1、看control_file路径 SQL> show parameter controlNAME TYPE VALUE ------------------------------------ ----------- ------------------------------ control_file_record_keep_time integer …

Grafana展示k8s中pod的jvm监控面板/actuator/prometheus

场景 为保障java服务正常运行&#xff0c;对服务的jvm进行监控&#xff0c;通过使用actuator组件监控jvm情况&#xff0c;使用prometheus对数据进行采集&#xff0c;并在Grafana展现。 基于k8s场景 prometheus数据收集 配置service的lable&#xff0c;便于prometheus使用labl…

大数据课程I2——Kafka的架构

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 掌握Kafka的架构&#xff1b; ⚪ 掌握Kafka的Topic与Partition&#xff1b; 一、Kafka核心概念及操作 1. producer生产者&#xff0c;可以是一个测试线程&#xff0c;也…

青大数据结构【2014】

一、单选 二、简答 为了解决顺序队列的假溢出问题,提出了循环队列,即把存储队列的表从逻辑上看成一个环 判别队列空和满有三种方法: 1)采用计数器判别,空时,计数器为0;满时,计数器为maxsize; 2)另设一个布尔变量以匹配队列的满和空; 3)少用一个元素的空间,约…