element-ui autocomplete 组件源码分享

news2024/11/13 11:02:43

紧接着 input 组件的源码,分享带输入建议的 autocomplete 组件,在 element-ui 官方文档上,没有这个组件的 api 目录,它的 api 是和 input 组件的 api 在一起的,看完源码之后发现,源码当中 autocomplete 组件是一个单独的组件,进而在此做单独的简单分享。主要从以下五个方面来分享。

1、autocomplete 组件的页面结构。

2、autocomplete 组件的属性。

3、autocomplete 组件的 slot。

4、autocomplete 组件的事件。

5、autocomplete 组件的方法。

一、autocomplete 组件的页面结构

二、autocomplete 组件的属性

2.1 placeholder 属性,输入框占位文本,类型 string,无默认值。

2.2 disabled 属性,禁用,类型 boolean,默认 false。

2.3 value-key 属性,输入建议对象中用于显示的键名,类型 string,默认 value。

2.4 value 属性,必填值,输入绑定值,类型 string,无默认值。

2.5 debounce 属性,获取输入建议的去抖延时,类型 number,默认 300。

2.6 placement 属性,菜单弹出的位置,类型 string,top / top-start / top-end / bottom / bottom-start / bottom-end,默认 bottom-start。

2.7 fetch-suggestions 属性,返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它,类型 Function(queryString, callback),无默认值。

fetchSuggestions  函数的小结:

1、子组件通过 props 接收父组件传递过来的 fetchSuggestions 函数。

2、子组件内部调用父组件传递过来的 fetchSuggestions 方法,并给这个方法传递两个参数,一个是当前查询的字符串,一个是回调函数。

3、父组件中的 querySearch 方法被调用,处理查询字符串,并用过回调函数返回结构给子组件。

4、子组件在回调函数中接收福咱们返回的数据,并据此更新状态或执行其他操作。

这种传值方式使得父组件和子组件之间以一种相对解耦的方式进行通信,父组件提供数据检索逻辑,子组件负责触发检索并处理检索结果。

2.8 popper-class 属性,Autocomplete 下拉列表的类名,类型 string,无默认值。

2.9 trigger-on-focus 属性,是否在输入框 focus 时显示建议列表,类型 boolean,默认 true。

2.10 name 属性,原生属性,类型 string,无默认值。

2.11 select-when-unmatched 属性,在输入没有任何匹配建议的情况下,按下回车是否触发 select 事件,类型 boolean,默认 false。

2.12 label 属性,输入框关联的label文字,类型 string,无默认值。

2.13 prefix-icon 属性,输入框头部图标,类型 string,无默认值。

2.14 suffix-icon 属性,输入框尾部图标,类型 string,无默认值。

2.15 hide-loading 属性,是否隐藏远程加载时的加载图标,类型 boolean,默认 false。

2.16 popper-append-to-body 属性,是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时,可将该属性设置为 false,类型 boolean,默认 true。

2.17 highlight-first-item 属性,是否默认突出显示远程搜索建议中的第一项,类型 boolean,默认 false。

三、autocomplete 组件的 slot

3.1 prefix,输入框头部内容。

3.2 suffix,输入框尾部内容。

3.3 prepend,输入框前置内容。

3.4 append,输入框后置内容。

四、autocomplete 组件的事件

4.1 select,点击选中建议项时触发,选中建议项。

4.2 change,input值改变时触发,(value: string | number)。

五、autocomplete 组件的方法

5.1 focus,使 input 获取焦点。

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

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

相关文章

农村分散式生活污水分质处理及循环利用技术指南

标准已完成意见征集: 本文件给出了农村分散式生活污水分质处理及循环利用的总则、污水收集、污水分质处理、资源化利用、利用模式、运维管理等的指导。 本文件适用于农村分散式生活污水分质处理及循环利用的设施新建、扩建和改建工程的设计、施工与运维。 注:本文件…

Linux基础篇:解析Linux命令执行的基本原理

Linux 命令是一组可在 Linux 操作系统中使用的指令,用于执行特定的任务,例如管理文件和目录、安装和配置软件、网络管理等。这些命令通常在终端或控制台中输入,并以文本形式显示输出结果。 Linux 命令通常以一个或多个单词的简短缩写或单词…

嵌入式学习44-哈希算法和排序算法

Hash 哈希算法: 在记录的 存储位置 和它的 关键字 之间建立一种去特定的对应关系,使得每个关键字key对应一个存储位置; 查找时,根据确定的对应关系,找到给定的 key 的映射。 记录的存储位置 f&a…

振弦采集仪在预防地质灾害监测中的作用与应用前景

振弦采集仪在预防地质灾害监测中的作用与应用前景 振弦采集仪(String Vibrating Sensor,简称SVM)是一种用于地质灾害监测的重要仪器,它通过测量地面振动信号来预测和预警地质灾害的发生。SVM的作用在于提供实时、准确的地质灾害监…

【C++课程设计】校园导游程序及通信线路设计

私信我获得论文 问题描述: 设计校园平面图,所含景点不少于10个。以图中顶点表示校内各景点,存放景点名称、代号、简介等信息;以边表示路径,存放路径长度等相关信息。 (1) 显示校园平面图(用cout显示即可&a…

C#实现身份证格式验证(自建异常实现提醒)

基本信息 中国居民身份证的格式包括18位数字,这些数字分别代表不同的信息: 第1、2位数字表示省份代码。 第3、4位数字表示城市代码。 第5、6位数字表示区县代码。 第7至14位数字表示出生年、月、日(其中7、8、9、10位是年,11、12…

理发店在线预约小程序源码系统 带完整的安装代码包以及搭建教程

理发店作为人们日常生活中经常光顾的场所,其服务质量和预约便利性直接影响到顾客的满意度。传统的理发店预约方式往往存在效率低下、信息不透明等问题,无法满足现代消费者的需求。因此,开发一款理发店在线预约小程序源码系统,对于…

Zabbix6 - Centos7源码编译部署HA高可用集群手册

Zabbix6 - Centos7源码编译部署HA高可用集群手册 HA高可用集群 总所周知,在我们IT运维的圈圈中,HA高可用集群服务算是逼格最高的吧也是运维里保障力度最大的环境。 HA是HighlyAvailable缩写,是双机集群系统简称,提高可用性集群,是保证业务连续性的有效解决方案,一般有两个…

数据运营分析-详解

一、指标与指标体系 指标体系就是业务逻辑的框架,也是思考业务逻辑的第一步 案例: 老板,我负责的用户活跃,主要考察每天启动产品的注册用户数量,整体来看,每月活跃保持7.3%的增长,是因为渠道团队的拉新活动带来很多新增注册用户,占每月活跃用户的40%,新一年会继续沿…

苹果应用商店上架工具比较分析与推荐

摘要 移动应用app上架是开发者关注的重要环节,但常常会面临审核不通过等问题。为帮助开发者顺利完成上架工作,各种辅助工具应运而生。本文探讨移动应用app上架原理、常见辅助工具功能及其作用,最终指出合理使用工具的重要性。 引言 移动应…

CSS实现小车旅行动画实现

小车旅行动画实现 效果展示 CSS 知识点 灵活使用 background 属性下的 repeating-linear-gradient 实现路面效果灵活运用 animation 属性与 transform 实现小车和其他元素的动画效果 动画场景分析 从效果图可以看出需要实现此动画的话,需要position属性控制元素…

梵宁教育助力大学生技能学习全面探索

在数字化时代,设计、剪辑与手绘等技能已成为大学生必备的能力之一。梵宁教育,以其深厚的教育底蕴和前瞻的教育理念,为广大学子提供了一个全面学习这些技能的优质平台。本文将深入探讨梵宁教育如何助力大学生在设计、剪辑与手绘技能上的学习与…

数据中心末端配电监控产品--AMB智能母线监控/始端箱插接箱母线测温/电力智能母线/智能母线测温/母线槽测温

列头柜对比母线槽 安科瑞薛瑶瑶18701709087 ◉铺设难度大,工期长◉聚集温升,火灾隐患◉检修困难◉灵活性差 ◉列头柜占用机柜位 列头柜电缆--智能母线系统 ◉安装方便,工期短◉柜顶明装,方便检修◉散热快,温升低&…

Uibot6.0 (RPA财务机器人师资培训第5天 ) 报销汇总机器人案例实战

训练网站:泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981https…

新网站收录时间是多久,新建网站多久被百度收录

对于新建的网站而言,被搜索引擎收录是非常重要的一步,它标志着网站的正式上线和对外开放。然而,新网站被搜索引擎收录需要一定的时间,而且时间长短受多种因素影响。本文将探讨新网站收录需要多长时间,以及新建网站多久…

安全测试体系

安全测试体系 安全测试体系安全测试定义安全测试与传统的区别安全测试常用方法安全测试常用方法 客户端脚本安全测试跨站脚本攻击(XSS)XSS攻击的类型XSS攻击常用的HTML标签XSS攻击步骤页面查找XSS漏洞XSS攻击防御 跨站点请求伪造(CSRF&#x…

leetcode热题100.柱状图中最大的矩形

Problem: 84. 柱状图中最大的矩形 文章目录 题目思路复杂度Code 题目 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例 1: 输入:hei…

2014年认证杯SPSSPRO杯数学建模B题(第二阶段)位图的处理算法全过程文档及程序

2014年认证杯SPSSPRO杯数学建模 B题 位图的处理算法 原题再现: 图形(或图像)在计算机里主要有两种存储和表示方法。矢量图是使用点、直线或多边形等基于数学方程的几何对象来描述图形,位图则使用像素来描述图像。一般来说&#…

【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)

使用介绍 1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺…

无需麻烦:电脑如何轻松管理和同步iPhone应用

轻松实现电脑对iPhone应用管理 摘要 本文介绍了如何使用克魔助手工具实现电脑对手机应用的管理操作。通过简单的步骤,用户可以批量操作手机应用、运行应用、查看应用日志以及安装测试IPA包,提高工作效率和方便管理手机应用。 引言 在日常工作中&#…