element-ui autocomplete 组件源码分享

紧接着 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 获取焦点。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MTK8781安卓核心板_MT8781(Helio G99)核心板性能参数

MT8781安卓核心板搭载了八核CPU,其中包括两个主频高达2.2GHz的高性能Arm Cortex-A76处理器。这一处理器采用了台积电6纳米级芯片生产工艺,以及先进的3D图形功能的高性能Arm Mali G57级GPU。通过超快LPDDR4X内存和UFS 2.2存储供电,不仅提高了游…

新版Idea2023.3.5与lombok冲突、@Data失效

新版idea和lombok冲突,加上Data,其他地方get set也不报错,但是一运行就找不到get set方法。 但是直接使用Getter和Setter可以访问、应该是Data失效了。 解决方法: 看推上介绍是 lombok 与 idea 采集 get 、set 方法的时候所用的技…

成都市酷客焕学新媒体科技有限公司:实现品牌的更大价值!

成都市酷客焕学新媒体科技有限公司专注于短视频营销,深知短视频在社交媒体中的巨大影响力。该公司巧妙地将品牌信息融入富有创意和趣味性的内容中,使观众在轻松愉悦的氛围中接受并传播这些信息。凭借独特的创意和精准的营销策略,成都市酷客焕…

llama-index 结合chatglm3-6B 利用RAG 基于文档智能问答

简介 llamaindex结合chatglm3使用 import os import torch from llama_index.core import VectorStoreIndex, ServiceContext from llama_index.core.callbacks import CallbackManager from llama_index.core.llms.callbacks import llm_completion_callback from llama_ind…

计算机网络链路层

数据链路 链路是从一个节点到相邻节点之间的物理线路(有线或无线) 数据链路是指把实现协议的软件和硬件加到对应链路上。帧是点对点信道的数据链路层的协议数据单元。 点对点信道 通信的主要步骤: 节点a的数据链路层将网络层交下来的包添…

【three.js】后期处理outlinePass描边实现点击选中物体效果

在 Three.js 中,通过后期处理技术可以实现各种视觉效果,其中包括描边(Outline)效果,用于突出显示或选中特定物体。本文将重点介绍如何使用 Three.js 中的 OutlinePass 后期处理效果来实现点击选中物体的效果&#xff0…

LeetCode:509斐波那契数 C语言

斐波那契数 (通常用 F(n) 表示)形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和。也就是: F(0) 0,F(1) 1 F(n) F(n - 1) F(n - 2),其中 n > 1给定 n &a…

【笔记】RDD算子操作(Spark基础知识)

持续更新中!!! 目录 一、RDD的创建 1.从本地创建 (1)本地文件 (2)hdfs文件(先提前创建目录并上传文件) 2.从集合创建(通过并行集合(列表&am…

【C语言基础】:数据在内存中的存储

文章目录 一、整数在内存中的存储二、大小端字节序和字节序判断1. 为什么有大小端?2. 练习 三、浮点数在内存中的存储1. 浮点数的存储1.1 浮点数的存储过程1.2 浮点数取的过程 四、题目解析 书山有路勤为径,学海无涯苦作舟。 创作不易,宝子们…

基于springboot+vue+Mysql的财务管理系统

开发语言:Java框架:springbootJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:…

LabVIEW单片机的废气再循环EGR检测系统

LabVIEW单片机的废气再循环EGR检测系统 实现了一种基于LabVIEW和STM32F103VET6单片机的EGR(废气再循环)检测系统,监测和控制船用二冲程柴油机的EGR运行状态。通过替代传统的NI采集卡,系统不仅降低了成本,同时也提升了数…

es6 Class基本语法和继承

es6 Class基本语法 class的基本语法: ES6 的class只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已 传统用构造函数生成实例 function Point(x, y) {th…

Unity AI Navigation自动寻路

目录 前言一、Unity中AI Navigation是什么?二、使用步骤1.安装AI Navigation2.创建模型和材质3.编写向目标移动的脚本4.NavMeshLink桥接组件5.NavMeshObstacle组件6.NavMeshModifler组件 三、效果总结 前言 Unity是一款强大的游戏开发引擎,而人工智能&a…

【漏洞复现】chatgpt pictureproxy.php SSRF漏洞(CVE-2024-27564)

0x01 漏洞概述 ChatGPT pictureproxy.php接口存在服务器端请求伪造 漏洞(SSRF) ,未授权的攻击者可以通过将构建的 URL 注入 url参数来强制应用程序发出任意请求。 0x02 测绘语句 fofa: icon_hash"-1999760920" 0x03 漏洞复现 G…

Machine Learning机器学习之统计分析

目录 前言 机器学习之统计分析 统计学的主要目标包括: 统计学核心概念: 统计基础: 训练误差: 常见的损失函数: 正则化和交叉验证 博主介绍:✌专注于前后端、机器学习、人工智能应用领域开发的优质创作者、秉…

使用pytorch构建一个初级的无监督的GAN网络模型

在这个系列中将系统的构建GAN及其相关的一些变种模型,来了解GAN的基本原理。本片为此系列的第一篇,实现起来很简单,所以不要期待有很好的效果出来。 第一篇我们搭建一个无监督的可以生成数字 (0-9) 手写图像的 GAN,使用MINIST数据…

进阶了解C++(6)——二叉树OJ题

Leetcode.606.根据二叉树创建字符串: 606. 根据二叉树创建字符串 - 力扣(LeetCode) 难度不大,根据题目的描述,首先对二叉树进行一次前序遍历,即: class Solution { public:string tree2str(Tr…

TheMoon 恶意软件短时间感染 6,000 台华硕路由器以获取代理服务

文章目录 针对华硕路由器Faceless代理服务预防措施 一种名为"TheMoon"的新变种恶意软件僵尸网络已经被发现正在侵入全球88个国家数千台过时的小型办公室与家庭办公室(SOHO)路由器以及物联网设备。 "TheMoon"与“Faceless”代理服务有关联,该服务…

【算法题】三道题理解算法思想--滑动窗口篇

滑动窗口 本篇文章中会带大家从零基础到学会利用滑动窗口的思想解决算法题,我从力扣上筛选了三道题,难度由浅到深,会附上题目链接以及算法原理和解题代码,希望大家能坚持看完,绝对能有收获,大家有更好的思…

Flask学习(六):蓝图(Blueprint)

蓝图(Blueprint):将各个业务进行区分,然后每一个业务单元可以独立维护,Blueprint可以单独具有自己的模板、静态文件或者其它的通用操作方法,它并不是必须要实现应用的视图和函数的。 Demo目录结构&#xf…