组件实现基于
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,如果你想宽度随输入内容变化,