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,如果你想宽度随输入内容变化,

  • 19
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iWangsd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值