Tag 标签

用于标记关键词和概括主要内容。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

标签类型

支持 default、primary、success、warning、danger 五种类型，默认为 default。

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

朴素标签

通过 plain 属性设置为朴素标签。

<zq-tag type="primary" plain text="朴素标签" />

圆角标签

通过 round 属性设置为圆角标签。

<zq-tag type="primary" round text="圆角标签" />

标记标签

通过 mark 属性设置为标记样式（左侧直角，右侧圆角）。

<zq-tag type="primary" mark text="标记标签" />

标签尺寸

支持 small、normal、large 三种尺寸。

<zq-tag type="primary" size="small" text="小号" />
<zq-tag type="primary" size="normal" text="普通" />
<zq-tag type="primary" size="large" text="大号" />

带图标的标签

通过 icon 属性设置左侧图标。

<zq-tag type="primary" icon="star" text="图标标签" />

可关闭标签

通过 closeable 属性设置为可关闭标签，关闭后触发 close 事件。

<zq-tag type="primary" closeable text="可关闭标签" @close="onClose" />

通过插槽自定义内容

<zq-tag type="primary">自定义内容</zq-tag>

API

Props

参数	说明	类型	默认值
type	标签类型	'default' | 'primary' | 'success' | 'warning' | 'danger'	'default'
size	标签尺寸	'small' | 'normal' | 'large'	'normal'
text	标签文字	string	''
icon	左侧图标名称	string	''
plain	是否为朴素标签	boolean	false
round	是否为圆角标签	boolean	false
mark	是否为标记样式	boolean	false
closeable	是否可关闭	boolean	false

Events

事件名	说明	回调参数
click	点击标签时触发	event: Event
close	关闭标签时触发	-

Slots

名称	说明
default	标签内容，优先级高于 text 属性

主题定制

变量名	说明
--color-primary	主要标签颜色
--color-success	成功标签颜色
--color-warning	警告标签颜色
--color-error	危险标签颜色
--color-bg-hover	默认标签背景色
--color-text-secondary	默认标签文字色
--color-border	朴素默认标签边框色