ReTagList标签列表(API)

组件实现基于 Vue3 + Element Plus + Typescript,同时引用 vueUse + lodash-es + tailwindCss (不影响功能,可忽略)

基于ElTag实现的Tag列表,支持Tag列表多选,动态Tag列表

ReTagList标签列表

基础

简单展示Tag列表,可通过size指定尺寸

查看 /demo/tag-list/basic.md
在这里插入图片描述

Tag类型

通过 tagType 控制Tag类型

查看 /demo/tag-list/type.md
在这里插入图片描述

内容溢出Tooltip显示

设置 showOverflowTooltip 开启,结合虚拟触发/单例模式,避免渲染过多tooltip。

在这里插入图片描述

可编辑

设置 editable 开启编辑,输入框按下回车键或者失去焦点后自动保存,默认会忽略相同Tag输入。

:::info
可以通过 createNew 自定义创建新Tag数据类型,通过 beforeAdd 判断是否能加入Tag数据列表。
如果关闭 autoAdd,则需要自行监听 add 事件手动插入Tag数据列表。
:::

查看 /demo/tag-list/editable.md
在这里插入图片描述

input输入框宽度响应

默认新增Tag输入框宽度为 100px,如果你想宽度随输入内容变化,

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

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

相关文章

Arduino开源四足蜘蛛机器人制作教程

视频教程:手把手叫你做四足蜘蛛机器人——1零件介绍_哔哩哔哩_bilibili 一、项目介绍 1.1 项目介绍 Arduino主控,图形化编程,趣味学习 Arduino nano开发板舵机扩展底板 4.8V可充电电池,支持Arduino C语言编程和米思齐图形化编程…

Spring Cloud Config 与 Spring Cloud Bus 来实现动态配置文件

要使用 Spring Cloud Config 与 Spring Cloud Bus 来实现动态配置文件,你可以按照以下步骤操作: ### 步骤 1: 添加依赖 首先,确保你的项目中添加了 Spring Cloud Config 客户端和 Bus 的依赖。对于 Maven 项目,pom.xml 文件应该…

浅谈Kafka(一)

浅谈Kafka(一) 文章目录 浅谈Kafka(一)Kafa的设计是什么样的数据传输的事务定义消息队列的应用场景Kafka怎么样判断节点是否存活Kafka的消息是采用pull模式还是push模式Kafka在磁盘上的消息格式Kafka高效文件存储设计特点Kafka与传…

Yolov10网络详解与实战(附数据集)

文章目录 摘要模型详解模型实战训练COCO数据集下载数据集 COCO转yolo格式数据集(适用V4,V5,V6,V7,V8)配置yolov10环境训练断点训练测试 训练自定义数据集Labelme数据集格式转换训练测试 总结 摘要 模型详解…

CeresPCL 岭回归拟合(曲线拟合)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 由于在使用最小二乘插值拟合时,会涉及到矩阵求逆的操作,但是如果这个矩阵接近于奇异时,那么拟合的结果就会与我们期望的结果存在较大差距,因此就有学者提出在最小二乘的误差函数中添加正则项,即: 这里我们也可…

OpenGL-ES 学习(8) ---- FBO

目录 FBO OverViewFBO 优点使用FBO的步骤 FBO OverView FBO(FrameBuffer Object) 指的是帧缓冲对象,实际上是一个可以添加缓冲区容器,可以为其添加纹理或者渲染缓冲区对象(RBO) FBO(FrameBuffer Object) 本身不能用于渲染,只有添加了纹理或者…

对派生类指针使用C风格的强制类型转换为基类指针

以下来自语言大模型的回答: 值可能发生改变 当对派生类指针使用C风格的强制类型转换成基类指针时,指针的值可能会发生改变。这主要是由于多重继承和虚继承的存在。以下是几个关键点解释: 单继承情况下: 在单继承的情况下,派生类指针转换为…

Stability AI发布了单目视频转4D模型的新AI模型:Stable Video 4D

开放生成式人工智能初创公司Stability AI在3月发布了Stable Video 3D,是一款可以根据图像中的物体生成出可旋转的3D模型视频工具。Stability AI在7月24日发布了新一代的Stable Video 4D,增添了赋予3D模移动作的功能。 Stable Video 4D能在约40秒内生成8…

数字乡村+智慧农业数字化转型大数据平台建设方案

1. 数字农业发展趋势 数字农业正经历全环节数字技术应用、全流程生产经营再造、全方位线上线下对接和管理服务全生命周期覆盖的四大趋势,标志着我国农业进入高质量发展新阶段。 2. 数字乡村的战略意义 数字乡村作为数字化、网络化和信息化的产物,对于…

Wemos D1 Mini pro/ nodeMcu / ESP8266 驱动 240*320 ILI9431 SPI液晶屏

Wemos D1 Mini / nodeMcu / ESP8266 驱动 240*320 ILI9431 SPI液晶屏 效果展示器件硬件连接引脚连接原理图引脚对照表 安装TFT_eSPI库TFT_eSPI库中User_Setup.h文件的参数修改User_Setup.h文件的位置User_Setup.h文件中需要修改的参数User_Setup.h完成源码 例程 缘起&#xff1…

PDF 转Word 开源库

1. Apache PDFBox Apache PDFBox 是一个开源的 Java 库&#xff0c;用于创建和操作 PDF 文档。虽然 PDFBox 本身没有直接支持 PDF 转 Word 的功能&#xff0c;但它可以提取 PDF 内容&#xff0c;你可以结合其他方法将这些内容写入 Word。 添加依赖 <dependency><gr…

网络间通信

1、udp通信 特点&#xff1a;&#xff08;1&#xff09;无连接 &#xff08;2&#xff09;不可靠 2、udp编程&#xff08;c/s模型&#xff09; ssize_t recvfrom(int sockfd, //socket的fd void *buf, //保存数据的一块空间的地址 …

高效分页策略:掌握 LIMIT 语句的正确使用方法与最佳实践

本文主要介绍limit 分页的弊端及线上应该怎么用 LIMIT M,N 平时经常见到使用 <limit m,n> 合适的 order by 来实现分页查询&#xff0c;这样做到底性能如何呢&#xff1f; 先来简单分析下&#xff0c;然后再实际验证一下。 无索引条件下&#xff0c;需要做大量的文件排…

Linux tail -f 报错 No space left on device

问题&#xff1a; 执行tail -f my_file 时报错&#xff1a;No space left on device df -h 检查磁盘剩余空间&#xff0c;剩余空间都很充足&#xff1b; df -i 检测iNode使用情况&#xff0c;剩余iNode也很充足&#xff1b; 参考这篇文章解决了问题 tail: cannot watch /v…

C++的正则表达式简介

文章目录 一、基本概念二、正则表达式的基本用法1、头文件2、正则表达式对象3、正则表达式匹配4、正则表达式语法&#xff08;1&#xff09;基本字符和元字符&#xff08;2&#xff09;字符类&#xff08;3&#xff09;预定义字符类&#xff08;4&#xff09;量词&#xff08;5…

Pandas数据清洗之数据分组和删除重复数据

数据分组 在Pandas中&#xff0c;你可以使用groupby()函数对DataFrame进行分组。这是一个非常强大的功能&#xff0c;可以基于一个或多个列的值来聚合数据。 这里是一个简单的例子来说明如何使用groupby()&#xff1a; 导入Pandas库: import pandas as pd创建一个示例DataFra…

vue3中的组件通信

props通信 可以实现父子组件通信&#xff0c;props数据还是只读的&#xff01;&#xff01;&#xff01; <template><div class"box"><h1>props:我是父组件曹操</h1><hr /><Child info"我是曹操" :money"money&qu…

Redis的缓存穿透、击穿、雪崩

目录 缓存穿透 定义&#xff1a; 解决方法&#xff1a; 缓存击穿 定义&#xff1a; 解决方案&#xff1a; 缓存雪崩 定义&#xff1a; 解决方案&#xff1a; 缓存穿透、缓存击穿和缓存雪崩的区别 缓存穿透 定义&#xff1a; 查询一个不存在的数据&#xff0c;数据库未…

探索802.1X:构筑安全网络的认证之盾

在现代网络安全的世界里&#xff0c;有一个极其重要但又常常被忽视的角色&#xff0c;它就是802.1x认证协议。这个协议可以被称作网络安全的守护者&#xff0c;为我们提供了强有力的防护。今天&#xff0c;我们就来深入探讨一下802.1x的原理、应用和测试&#xff0c;看看它是如…

[000-01-022].第09节:RabbitMQ中的消息分发策略

我的后端学习大纲 RabbitMQ学习大纲 1.不公平分发&#xff1a; 1.1.什么是不公平分发&#xff1a; 1.在最开始的时候我们学习到 RabbitMQ 分发消息采用的轮训分发&#xff0c;但在某种场景下这种策略并不是很好&#xff0c;比方说有两个消费者在处理任务&#xff0c;其中有个…