Tag 标签

标签用于标记与分类信息，支持语义类型、浅色与深色效果、尺寸、圆角以及可关闭，也可通过默认插槽自定义内容。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-tag 的用法，可按需组合。

<template>
  <mu-tag text="标签"></mu-tag>
</template>

类型

通过 type 设置标签的语义类型，默认为 default。

<mu-tag type="primary" text="主要"></mu-tag>
<mu-tag type="success" text="成功"></mu-tag>
<mu-tag type="warning" text="警告"></mu-tag>
<mu-tag type="danger" text="危险"></mu-tag>

深色效果

将 effect 设为 dark，使用深色填充效果。

<mu-tag type="primary" effect="dark" text="主要"></mu-tag>
<mu-tag type="success" effect="dark" text="成功"></mu-tag>
<mu-tag type="warning" effect="dark" text="警告"></mu-tag>
<mu-tag type="danger" effect="dark" text="危险"></mu-tag>

圆角

开启 round 后标签显示为全圆角。

<mu-tag :round="true" type="primary" text="圆形标签"></mu-tag>
<mu-tag :round="true" type="success" effect="dark" text="圆形标签"></mu-tag>

尺寸

通过 size 设置标签尺寸，可选 small、default、large。

<mu-tag size="small" type="primary" text="small"></mu-tag>
<mu-tag type="primary" text="default"></mu-tag>
<mu-tag size="large" type="primary" text="large"></mu-tag>

可关闭

开启 closable 后显示关闭图标，移除时带淡出动画。

<mu-tag type="primary" closable text="可关闭"></mu-tag>
<mu-tag type="success" closable text="点击关闭"></mu-tag>
<mu-tag type="warning" effect="dark" closable text="可关闭"></mu-tag>

自定义内容

使用默认插槽自定义标签内容，插槽内容优先于 text 属性。

<mu-tag type="primary">
  <text class="tag-icon-text">★ 收藏</text>
</mu-tag>
<mu-tag type="success" effect="dark" closable>
  <text class="tag-icon-text">✓ 已完成</text>
</mu-tag>

关闭时长

通过 duration 设置关闭时的淡出时长，单位为毫秒。

<mu-tag type="primary" closable :duration="600" text="点我或关闭"></mu-tag>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
type	标签语义类型，可选 default、primary、success、warning、danger，error 视为 danger	string	default
effect	显示效果，可选 light、dark	string	light
size	标签尺寸，可选 small、default、large	string	default
round	是否为全圆角标签	boolean	false
closable	是否可关闭	boolean	false
duration	关闭时的淡出时长，单位为毫秒	number	300
text	标签文字内容	string	-
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
click	点击标签时触发	event: UniEvent
close	关闭标签后（淡出结束）触发	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
default	自定义标签内容，优先于 text 属性

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：close 事件在淡出动画结束后才触发，控制标签显隐请配合 v-if 使用。
• 使用注意：默认插槽内容优先于 text 属性。
• 使用注意：type 传入 error 会被当作 danger 处理，size 仅识别 small、default、large。