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.hqwc.cn/news/70543.html

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

相关文章

什么文件传输协议才能保障跨国文件传输安全又稳定

在当今的全球化时代,跨国文件传输是一种常见而又重要的需求,无论是个人还是企业,都需要通过网络来分享和交换各种类型和大小的文件。但是,跨国文件传输也面临着许多挑战和风险,如何选择一个合适的文件传输协议&#xf…

性能测试—Jmeter工具

文章目录 性能测试1. 术语介绍2. 方法3. 应用场景4. 工具(Jmeter)4.1 介绍4.2 元件和组件4.2.2 元件4.2.1 组件 4.3 作用域4.4 参数化4.5 执行脚本 性能测试 1. 术语介绍 响应时间(Response time):对请求作出响应所需要的时间。 在互联网上对…

【简单认识zookeeper+kafka分布式消息队列集群的部署】

文章目录 一、zookeeper1、定义2、工作机制3、Zookeeper 特点4、Zookeeper 数据结构5、Zookeeper 应用场景6、Zookeeper 选举机制(1)第一次启动选举机制(2)非第一次启动选举机制 7、部署zookeeper群集 二、消息队列概述1、为什么需…

C语言实现将字典dict.txt上传到数据库中

代码 #include <stdio.h> #include <string.h> #include <unistd.h> #include <sqlite3.h>int do_insert(sqlite3 *db,char *word,char *mean);int main(int argc, const char *argv[]) {//以读的方式打开文件FILE* fpfopen("./dict.txt",&…

好用的安卓手机投屏到mac分享

工具推荐&#xff1a;scrcpy github地址&#xff1a;https://github.com/Genymobile/scrcpy/tree/master mac使用方式 安装环境&#xff0c;打开terminal&#xff0c;执行以下命令&#xff0c;没有brew的先安装brew brew install scrcpy brew install android-platform-too…

Java Vue Uniapp MES生产执行管理系统

本MES系统是一款B/S结构、通用的生产执行管理系统&#xff0c;功能强大&#xff01; 系统基于多年离散智造行业的业务经验组建&#xff0c;主要目的是为国内离散制造业的中小企业提供一个专业化、通用性、低成本的MES系统解决方案。 联系作者获取

Python 实现性能自动化测试竟然如此简单

一、思考 ❓❔ 1.什么是性能自动化测试&#xff1f; 性能 系统负载能力超负荷运行下的稳定性系统瓶颈自动化测试 使用程序代替手工提升测试效率 性能自动化 使用代码模拟大批量用户让用户并发请求多页面多用户并发请求采集参数&#xff0c;统计系统负载能力生成报告 2.Pytho…

计算机毕设项目之基于django+mysql的疫情实时监控大屏系统(前后全分离)

系统阐述的是一款新冠肺炎疫情实时监控系统的设计与实现&#xff0c;对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计&#xff0c;描述&#xff0c;实现和分析与测试方面来表明开发的过程。开发中使用了 django框架和MySql数据库技术搭建系统的整体…

Nginx代理功能与负载均衡详解

序言 Nginx的代理功能与负载均衡功能是最常被用到的&#xff0c;关于nginx的基本语法常识与配置已在上篇文章中有说明&#xff0c;这篇就开门见山&#xff0c;先描述一些关于代理功能的配置&#xff0c;再说明负载均衡详细。 Nginx代理服务的配置说明 1、上一篇中我们在http…

《cpolar内网穿透》外网SSH远程连接linux(CentOS)服务器

本次教程我们来实现如何在外公网环境下&#xff0c;SSH远程连接家里/公司的Linux CentOS服务器&#xff0c;无需公网IP&#xff0c;也不需要设置路由器。 视频教程 [video(video-jrpesBrv-1680147672481)(type-csdn)(url-CSDN直播https://live-file.csdnimg.cn/release/live/…

计算机竞赛 opencv 图像识别 指纹识别 - python

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器视觉的指纹识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 该项目较为新颖&#xff0c;适…

Linux与bash(基础内容一)

一、常见的linux命令&#xff1a; 1、文件&#xff1a; &#xff08;1&#xff09;常见的文件命令&#xff1a; &#xff08;2&#xff09;文件属性&#xff1a; &#xff08;3&#xff09;修改文件属性&#xff1a; 查看文件的属性&#xff1a; ls -l 查看文件的属性 ls …