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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ATF(TF-A) 威胁模型汇总

安全之安全(security)博客目录导读 目录计划如下,相关内容补充中,待完成后进行超链接,敬请期待,欢迎您的关注 1、通用威胁模型 2、SPMC威胁模型 3、EL3 SPMC威胁模型 4、fvp_r 平台威胁模型 5、RSS-AP接口威胁模型 威胁建模是安全…

TCP服务器实现—多进程版,多线程版,线程池版

目录 前言 1.存在的问题 2.多进程版 3.多线程版 4.线程池版 总结 前言 在上一篇文章中使用TCP协议实现了一个简单的服务器,可以用来服务端和客户端通信,但是之前的服务器存在一个问题,就是当有多个客户端连接服务器的时候,服…

【Unity细节】Unity中的层级LayerMask

👨‍💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶‍🌫️收录于专栏:unity细节和bug 😶‍🌫️优质专栏 ⭐【…

MySQL索引介绍 为什么mysql使用B+树

什么是索引? 索引是一种用于快速查询和检索数据的数据结构,常见的索引结构有:B树,B树和Hash。 索引的作用就相当于目录。打个比方,我们在查字典的时候,如果没有目录,那我们就只能一页一页的去…

K8S核心组件etcd详解(上)

1 介绍 https://etcd.io/docs/v3.5/ etcd是一个高可用的分布式键值存储系统,是CoreOS(现在隶属于Red Hat)公司开发的一个开源项目。它提供了一个简单的接口来存储和检索键值对数据,并使用Raft协议实现了分布式一致性。etcd广泛应用…

Llama 2免费托管及API提供

Llama 2 是 Meta 最新的文本生成模型,目前其性能优于所有开源替代方案。 推荐:用 NSDT编辑器 快速搭建可编程3D场景 1、强大的Llama 2 它击败了 Falcon-40B(之前最好的开源基础模型),与 GPT-3.5 相当,仅低…

redis的三种集群方式

redis有三种集群方式:主从复制,哨兵模式和集群。 1.主从复制 主从复制原理: 从服务器连接主服务器,发送SYNC命令; 主服务器接收到SYNC命名后,开始执行BGSAVE命令生成RDB文件并使用缓冲区记录此后执行的所…

Fluent-MyBatis

Fluent-MyBatis Fluent-MyBatis 简介 何为 Fluent Mybatis? Fluent Mybatis, 是一款 Mybatis 语法增强框架, 综合了 Mybatis Plus, Dynamic SQL, JPA 等框架特性和优点 Fluent-MyBatis 开源地址 Fluent-MyBatis 原理 Fluent-MyBatis 原理是利用 annotation pro…

2023.8.12号论文阅读

文章目录 TriFormer: A Multi-modal Transformer Framework For Mild Cognitive Impairment Conversion Prediction摘要本文方法实验结果 SwIPE: Efficient and Robust Medical Image Segmentation with Implicit Patch Embeddings摘要本文方法实验结果 TriFormer: A Multi-mod…

Java实现钉钉企业内部应用机器和自定义机器人发送消息

前言 公司让写一个服务监控的功能,当监测到服务停止时,向钉钉群里推送报警信息。之前大概看到钉钉的开放平台的API文档,好像能群发消息的只有机器人。 钉钉开放平台目前提供三种机器人: 企业内部应用机器人 群模板机器人 自定义机器人 本来向用自己比较熟悉的自定义机器人…

【实用黑科技】如何 把b站的缓存视频弄到本地——数据恢复软件WinHex 和 音视频转码程序FFmpeg

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:效率…

numpy与matplotlib 常用日常代码

matplotlab 和 numpy 可能是python 数据处理工作中用的最多的库了, 官网的文档十分详细,但是就是因为数量庞大,很多时候常用的功能和生僻冷门的功能混在一起,找不到重点。按照二八原则,掌握20%的功能就已经能应付绝大多…

[Docker精进篇] Docker镜像构建和实践 (三)

前言: Docker镜像构建的作用是将应用程序及其依赖打包到一个可移植、自包含的镜像中,以便在不同环境中快速、可靠地部署和运行应用程序。 文章目录 Docker镜像构建1️⃣是什么?2️⃣为什么?3️⃣镜像构建一、用现有容器构建新镜像…

最强自动化测试框架Playwright(34)CDPSession

在 Playwright 中,CDPSession 类是用于与浏览器的 Chrome DevTools Protocol (CDP) 会话进行交互的对象。CDP 是与Chromium浏览器通信的底层协议,它提供了许多与浏览器进行交互和控制的功能。 CDPSession 类提供了执行底层 CDP 命令的方法,并…

优测云服务平台|【压力测试功能升级】轻松完成压测任务

一、本次升级主要功能如下: 1.多份报告对比查看测试结果 2.报告新增多种下载格式 Word格式Excel格式 3.新增多种编排复杂场景的控制器 漏斗控制器并行控制器事务控制器仅一次控制器分组控制器集合点 4.新增概览页面,包含多种统计维度 二、报告对比…

30W IP网络有源音箱 校园广播音箱

SV-7042XT是深圳锐科达电子有限公司的一款2.0声道壁挂式网络有源音箱,具有10/100M以太网接口,可将网络音源通过自带的功放和喇叭输出播放,可达到功率30W。同时它可以外接一个30W的无源副音箱,用在面积较大的场所。5寸进口全频低音…

嵌入式Linux开发实操(九):CAN接口开发

前言: CAN网络在汽车中的使用可以说相当广泛。而CAN网络需要的收发器最常用的就是NXP 的TJA1042: CAN网络:

Docker网络与Cgroup硬件资源占用控制

目录 1.dockers的网络模式 1.1 获取容器的进程号 1.2 docker网络模式的特性 1.3 host主机模式 1.4 container模式 1.5 none模式 1.6 bridge 桥接模式 1.6 容器的自定义网络 (1)未创建自定义网络时,创建指定IP容器的测试 &#xff0…

opsForHash() 与 opsForValue 请问有什么区别?

&#x1f449;&#xff1a;&#x1f517;官方API参考手册 如图&#xff0c;opsForHash()返回HashOperations<K,HK,HV>但是 opsForValue()返回ValueOperations<K,V>… 区别就是opsForHash的返回值泛型中有K,HK,HV,其中K是Redis指定的某个数据库里面某一个关键字(由…

详解拦截器和过滤器

目录 代码演示过滤器Demo拦截器Demo 过滤器自定义拦截器配置拦截器过滤器执行原理多个过滤器的执行顺序 拦截器自定义拦截器注册拦截器1&#xff09;注册拦截器2&#xff09;配置拦截的路径3&#xff09;配置不拦截的路径 多个拦截器的执行顺序 过滤器和拦截器的区别 代码演示 …