TuTag 标签

type / plain / round / closable,内容走插槽,close 事件回传 name 标识。

轻量标签:主题色实心或朴素描边,可圆角胶囊、可关闭。内容走插槽;点关闭按钮触发 close 自定义事件(是否移除由父级决定)。

属性
名称类型说明
typeprimary | success | warning | danger | info标签类型,默认 primary。
plainboolean朴素:透明底 + 主题色文字。
roundboolean圆角胶囊(999px)。
closableboolean可关闭:右侧显示 ×,点击触发 close 事件。
namestring | number标识:close 事件回传该值(便于列表场景区分是哪个标签被关闭)。
childrenArray<VNode | string>标签内容(插槽)。

事件:close,回传 name 标识。

主要
×
成功
×
警告
×
危险
×

已关闭 0 / 4 个标签 —— 点标签右侧 × 触发 close 事件(name 标识是哪个标签)。

实例

ts
createComponent({
  component: TuTag,
  props: { type: 'success', closable: true, name: 'tag-1' },
  children: ['已完成'],
  emitters: { close: (name) => this.removeTag(name) },
})