当前位置: 首页 > news >正文

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.mrgr.cn/news/10252.html

相关文章:

  • Solon2 接口开发:实战 Gateway 模式效果
  • K8S 1.31 新功能: 跨核分发CPU
  • 【图像处理】Retinex算法用于图像亮度增强
  • 【Deep-ML系列】Pegasos Kernel SVM Implementation(手写支持向量机)
  • Spring MVC (面试篇)
  • <数据集>水面垃圾识别数据集<目标检测>
  • 【运维高级内容--MySQL】
  • 【C#】【EXCEL】Bumblebee/Classes/ExFont.cs
  • Mysql系列—3.体系架构
  • java反序列化之CommonCollections1利⽤链的学习
  • 改造小蚁摄像头支持免费无限容量云储存(Samba挂载篇)
  • ES(索引数据库)导入MySQL全量(批量导入)和增量数据Canal增量数据同步利器
  • ctfshow WEB刷题
  • ~/.bashrc 应用
  • Linux 驱动开发与Linux应用开发你知道多少?
  • 美容院医美行业营销的目的和作用|美业SaaS系统、门店管理系统源码
  • Python生成JMeter测试脚本----HTTP信息头管理器和用户定义的变量
  • 无人机之如何利用无人机进行地形测绘
  • 零基础5分钟上手谷歌云GCP - 服务器自动扩展
  • 5步掌握Python Django开发办公管理系统核心技巧