uniapp模仿下拉框实现文字联想功能 - uniapp输入联想(官方样式-附源码)

一、效果

废话不多说,上效果图:

  • 在下方的:
    在这里插入图片描述
  • 在上方的:
    在这里插入图片描述

二、源码

一般是个输入框,输入关键词,下拉一个搜索列表。
ElementUI有提供<el-autocomplete>,但uniapp官网没提供这么细,特简单扩展了一下:

1、/ components / input-search.vue

<template><view class="uni-stat__select" :class="'uni-stat__select_'+algin"><view class="uni-stat-box" :class="{'uni-stat__actived': current}"><view class="uni-select__input-box" @click="toggleSelector"><slot ref="slot"></slot></view><view class="uni-select--mask" v-if="showSelector" @click="toggleSelector" /><view class="uni-select__selector" v-if="showSelector && current"><view class="uni-popper__arrow"></view><scroll-view scroll-y="true" class="uni-select__selector-scroll"><view class="uni-select__selector-empty" v-if="loadState==0"><text class="cbbb">加载中...</text></view><view class="uni-select__selector-empty" v-else-if="loadState== 1"><text class="cbbb">请求失败,请稍后重试!</text></view><view class="uni-select__selector-empty" v-else-if="loadState== 3"><text class="cbbb">请输入关键词联想~</text></view><view class="uni-select__selector-empty" v-else-if="loadState== 4"><text class="cbbb">没有相关数据!</text></view><view class="uni-select__selector-empty" v-else-if="!list || list.length === 0"><text>{{emptyTips}}</text></view><view v-else class="uni-select__selector-item" v-for="(item,index) in list" :key="index" @click="change(item)"><text :class="{'uni-select__selector__disabled': item.disable}">{{formatItemName(item)}}</text></view></scroll-view></view></view></view>
</template>
<script>export default {name: "input-search",props: {type: {type: [String, Number],require: true,},algin: {type: String,default: 'bottom',},value: {type: [String, Number],default: ''},modelValue: {type: [String, Number],default: ''},emptyTips: {type: String,default: '无选项'},// 格式化输出 用法 field="_id as value, version as text, uni_platform as label" format="{label} - {text}"format: {type: String,default: ''},},watch: {value(newVal) {this.current = newVal;},modelValue(newVal) {this.current = newVal;},current() {this.search();},},data() {return {showSelector: false,current: '',loadState: -1, //-1初始化0加载中1请求失败2成功3请输入4没有数据list: [],searchSyncString: '',};},created() {this.$nextTick(this.init);},methods: {isDisabled(value) {let isDisabled = false;this.mixinDatacomResData.forEach(item => {if (item.value === value) {isDisabled = item.disable}})return isDisabled;},change(item) {if (item.disable) return;this.showSelector = false;this.current = this.formatItemName(item);this.confirm(item);// console.warn(item)},toggleSelector() {if (this.disabled) return;this.showSelector = !this.showSelector;if (this.showSelector) this.search();},formatItemName(item) {let {text,value,channel_code} = itemchannel_code = channel_code ? `(${channel_code})` : ''if (this.format) {// 格式化输出let str = "";str = this.format;for (let key in item) {str = str.replace(new RegExp(`{${key}}`, "g"), item[key]);}return str;}return `${text}`;},init() {this.current = this.value || this.modelValue || '';if (this.current) this.search();this.computeButtom();},getDefaultSlotElem() {let temp = this.$scopedSlots.default;if (temp && typeof(temp) == 'function') {temp = temp();temp = temp && temp[0] ? temp[0].elm : null;}return temp || null;},computeButtom() {this.soltHeight = (this.getDefaultSlotElem() || {}).clientHeight || 40;},search() {let searchSyncString = this.searchSyncString = Math.random();setTimeout(() => {if (searchSyncString != this.searchSyncString) return;this.searchSync();}, 500);},searchSync() {console.log('searchSync::::::', this.loadState, this.current);if (this.loadState == 0 || !this.current) return;this.loadState = 0;// if (!this.current) {// 	this.loadState = 3;// 	return;// }if (this.copySearchText == this.current && this.list && this.list.length > 0) {this.loadState = 2;return;}let params = {};params.categoryCode = this.type;params.searchText = this.copySearchText = this.current || '';this.$request.post('texts/list', params).then((j) => {this.loadState = 2;if (!j.code || j.code != 1) {this.loadState = 1;return this.$errToast(j, '联想词条');}let list = j.data || [];if (!list || list.length < 1) {this.loadState = 4;return;}list.forEach((item, index) => {item.value = item.id;item.text = item.name || '-';});this.list = list;}).catch((res) => {this.loadState = 1;return this.$errToast(j, '联想词条');});this.computeButtom();},confirm(item) {this.$emit('confirm', item.text || item.name|| '');this.loadState = 0;setTimeout(() => {this.loadState = 2;this.computeButtom();}, 800);},},}
</script>
<style lang="scss" scoped>$uni-border-3: #e5e5e5;.uni-stat__select {position: relative;}.uni-stat-box {width: 100%;flex: 1;}.uni-stat__actived {width: 100%;flex: 1;// outline: 1px solid #2979ff;}.uni-select__selector {/* #ifndef APP-NVUE */box-sizing: border-box;/* #endif */position: absolute;top: calc(100% + 12px);left: 0;width: 100%;background-color: #FFFFFF;border: 1px solid #EBEEF5;border-radius: 6px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);z-index: 3;padding: 4px 0;}.uni-stat__select_top .uni-select__selector {bottom: calc(100% + 12px);top: auto;.uni-popper__arrow {bottom: -6px;top: auto;transform: rotate(180deg);}}.uni-select__selector-scroll {/* #ifndef APP-NVUE */max-height: 200px;box-sizing: border-box;/* #endif */}/* #ifdef H5 */@media (min-width: 768px) {.uni-select__selector-scroll {max-height: 600px;}}/* #endif */.uni-select__selector-empty,.uni-select__selector-item {/* #ifndef APP-NVUE */display: flex;cursor: pointer;/* #endif */line-height: 1.3;font-size: 14px;text-align: left;/* border-bottom: solid 1px $uni-border-3; */padding: 2px 10px;margin: 6px 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.uni-select__selector-item:hover {background-color: #f9f9f9;}.uni-select__selector-empty:last-child,.uni-select__selector-item:last-child {/* #ifndef APP-NVUE */border-bottom: none;/* #endif */}.uni-select__selector__disabled {opacity: 0.4;cursor: default;}/* picker 弹出层通用的指示小三角 */.uni-popper__arrow,.uni-popper__arrow::after {position: absolute;display: block;width: 0;height: 0;border-color: transparent;border-style: solid;border-width: 6px;}.uni-popper__arrow {filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));top: -6px;left: 10%;margin-right: 3px;border-top-width: 0;border-bottom-color: #EBEEF5;}.uni-popper__arrow::after {content: " ";top: 1px;margin-left: -6px;border-top-width: 0;border-bottom-color: #fff;}.uni-select--mask {position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: 2;}.cbbb {color: #bbb !important;}
</style>

2、/ pages / xxx / demo.vue

<template><input-search :type="1" :value="handleResult" algin="top" @confirm="confirmInputSearch($event, 'handleResult')"><input class="uni-input" type="text" placeholder="请填写结果" v-model="handleResult" /></input-search><!-- ...... -->
</template>
import inputSearch from "@/components/input-search.vue";
export default {components: {inputSearch,},data() {handleResult: "",},methods: {confirmInputSearch(val, key) {this.$set(this, key, val);},},//......
},

三、参数说明:

名称类型说明
typeint词条类型,如果同个页面有多个联想,
且联想内容不一致时,用此字段与接口对接
valueString词条内容
alginStringnull | top,弹出框的方向,默认bottom
emptyTipsString当词条内容为空时,显示的文本内容(未纳入)
@confirmMethod选中事件,点击了联想内容的一个。返回联想内容text

四、续

  • 功能优势:

    • 官方样式,好看啦
    • 可扩展
    • 支持input、textarea等控件
  • 扩展

    • 输出格式 format
    • 禁用 item内容
    • 未完待续…

[The end]

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

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

相关文章

15个经典面试问题及回答思路,小白以及计算机类学生的福音

前言 这几年在Java工程师招聘时&#xff0c;会看到很多人的简历都写着使用了Spring Cloud做微服务实现&#xff0c;使用Docker做自动化部署&#xff0c;并且也会把这些做为自己的亮点。而比较有趣的这其中以小公司出来的人为绝大多数&#xff0c;大的公司出来的人简历上倒是很…

自动化测试基础——Pytest框架之YAML详解以及Parametrize数据驱动

文章目录 一、YAML详解1.YAML作用2.YAML语法结构3.YAML数据类型3.1.对象3.2.数组3.3.标量 4.YAML的引用5.YAML类型转换 二、YAML的读写与清空1.YAML的读2.YAML的写3.YAML的清空 三、pytest的parametrize简单数据驱动四、pytest的parametrize结合yaml实现数据驱动五、解决pytest…

rabbitmq基础(1)

1、背景 能实现消息队列的框架软件有很多&#xff0c;kafka、rabbitmq、RocketMq、activeMq、Redis&#xff08;非专业&#xff09;&#xff0c;各有各的特点和优缺点。但是之前的公司数据需求规模并非很大&#xff0c;所以采用rabbitmq作为消息队列。 2、rabbitMq的基础架构…

docker单节点搭建在线商城

本文档使用到的软件包以上传到资源中 目录 1. 创建容器并配置基础内容 1.1 将gpmall-repo上传到容器中 1.2 添加yum源 2. 安装基础服务 2.1 安装JAVA环境 2.2 安装Redis缓存服务 2.3 安装Elasticsearch服务 2.4 安装Nginx服务 2.5 安装MariaDB数据库 2.6 安…

LeetCode Python - 36.有效的数独

目录 题目答案运行结果 题目 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08…

【设计模式】(二)设计模式六大设计原则

一、 设计原则概述 设计模式中主要有六大设计原则&#xff0c;简称为SOLID &#xff0c;是由于各个原则的首字母简称合并的来(两个L算一个,solid 稳定的)&#xff0c;六大设计原则分别如下&#xff1a; ​ 1、单一职责原则&#xff08;Single Responsibitity Principle&#…

Fiddler入门:下载、安装、配置、抓包、customize rules

一、fiddler下载安装 安装包下载链接&#xff1a;https://www.telerik.com/download/fiddler 随便选个用途&#xff0c;填写邮箱&#xff0c;地区选择China&#xff0c;勾选“I accept the Fiddler End User License Agreement”&#xff0c;点击“DownLoad for windows”&…

element loading遮罩层添加按钮

<el-table v-loading"loadingText" element-loading-text"拼命加载中" :data"tableData" :tableColumn"tableColumn" :span-method"objectSpanMethod" border :cell-style"cellStyle" :header-cell-style"…

备考2024年小学生古诗文大会:历年真题15题练习和独家解析

如何提高小学生古诗词的知识&#xff1f;如何激发小学生古诗词的学习兴趣&#xff1f;如何提高小学古诗词的学习成绩&#xff1f;如何备考2024年小学生古诗文大会&#xff1f;...如果你也在关心和这些问题&#xff0c;我的建议是参加每年一度的小学生古诗词大会&#xff08;免费…

安卓类加载机制

目录 一、ClassLoader介绍二、双亲委托机制三、类的加载过程 一、ClassLoader介绍 任何一个 Java 程序都是由一个或多个 class 文件组成&#xff0c;在程序运行时&#xff0c;需要将 class 文件加载到 JVM 中才可以使用&#xff0c;负责加载这些 class 文件的就是 Java 的类加…

【深圳五兴科技】Java后端面经

本文目录 写在前面试题总览1、java集合2、创建线程的方式3、对spring的理解4、Spring Boot 和传统 Spring 框架的一些区别5、springboot如何解决循环依赖6、对mybatis的理解7、缓存三兄弟8、接口响应慢的处理思路9、http的状态码 写在前面 关于这个专栏&#xff1a; 本专栏记录…

iOS消息转发流程

当向Objc对象发送消息时&#xff0c;如果找到对象对应的方法&#xff0c;就会进入消息转发流程&#xff0c;给开发者提供一些最后的机会处理消息无法发送问题&#xff0c;以免出现程序崩溃。 1. 回调对象的resolveInstanceMethod方法&#xff0c;在这个方法中&#xff0c;允许开…

LeetCode 热题 100 | 图论(二)

目录 1 基础知识 1.1 什么是拓扑排序 1.2 如何进行拓扑排序 1.3 拓扑排序举例 2 207. 课程表 3 210. 课程表 II 菜鸟做题&#xff0c;语言是 C 1 基础知识 1.1 什么是拓扑排序 含义&#xff1a;根据节点之间的依赖关系来生成一个有序的序列。 应用&#xff1a…

Mybatis实现分页查询数据(代码实操讲解)

在MyBatis中实现分页查询的常见方式有两种&#xff1a;使用MyBatis内置的分页插件如PageHelper&#xff0c;或者手动编写分页的SQL语句。下面我将为你提供两种方式的示例代码。 使用PageHelper分页插件 首先&#xff0c;确保你的项目中已经添加了PageHelper的依赖。在Maven项…

gpt批量工具,gpt批量生成文章工具

GPT批量工具在今天的数字化时代扮演着越来越重要的角色&#xff0c;它们通过人工智能技术&#xff0c;可以自动批量生成各种类型的文章&#xff0c;为用户提供了便利和效率。本文将介绍5款不同的GPT批量工具&#xff0c;并介绍一款知名的147GPT生成工具&#xff0c;以及另外一款…

js SheetJS 合并表格导出到同一个excel中

最近有个需求,我在一个页面显示了4个表格, 然后合并导出到excel文件中 四个表,四个sheet,一个excel文件 最后导出时这样: 实现: 1,页面有个导出的checkbox,勾选则导出,不勾选不处理 2,在一个函数中,集中处理四个表数据获取,并将结果返回出来 //获取数据后返回为…

代码随想录算法训练营第三十四天| 860.柠檬水找零 、406.根据身高重建队列 、452. 用最少数量的箭引爆气球

文章目录 1.柠檬水找零2.根据身高重建队列3.用最少数量的箭引爆气球 1.柠檬水找零 在柠檬水摊上&#xff0c;每一杯柠檬水的售价为 5 美元。顾客排队购买你的产品&#xff0c;&#xff08;按账单 bills 支付的顺序&#xff09;一次购买一杯。 每位顾客只买一杯柠檬水&#xf…

(四)关系模型之关系代数

4.1关系代数概述 基于集合&#xff0c;提供了一系列的关系代数操作&#xff1a;并、差、笛卡尔积(广义积)、 选择、投影和更名等基本操作以及交、 连接和关系除等扩展操作&#xff0c;是一种集合思维的操作语言。关系代数操作以一个或多个关系为输入&#xff0c;结果是一个新的…

食品加工生产污废水处理如何达标排放

食品加工行业作为一个重要的工业部门&#xff0c;在生产过程中产生大量的污废水。合理、高效地处理这些污废水&#xff0c;实现达标排放&#xff0c;是保护环境和促进可持续发展的重要举措。本文将探讨食品加工生产污废水处理的方法和措施&#xff0c;以达到达标排放的目标。 首…

FreeRTOS操作系统学习——内存管理

C库函数与FreeRTOS内存管理区别 在C语言的库函数中&#xff0c;有mallc、free等函数可以申请以及释放内存空间&#xff0c;那么这为什么不适用于FreeRTOS的内存管理呢&#xff1f; 不适合用在资源紧缺的嵌入式系统中这些函数的实现过于复杂、占据的代码空间太大并非线程安全的…