Tag 标签

用于标记状态或者概括主要内容。

组件类型

基本用法

通过 type 设置不同标签类型。

html

<wd-tag>标签</wd-tag>
<wd-tag type="primary">常用标签</wd-tag>
<wd-tag type="danger">危险标签</wd-tag>
<wd-tag type="warning">警告标签</wd-tag>
<wd-tag type="success">成功标签</wd-tag>

组件变体

标签尺寸

通过 size 设置标签尺寸，支持 small、medium、default、large、extra-large。

html

<wd-tag type="primary" size="small">小标签</wd-tag>
<wd-tag type="primary" size="medium">中标签</wd-tag>
<wd-tag type="primary">默认标签</wd-tag>
<wd-tag type="primary" size="large">较大标签</wd-tag>
<wd-tag type="primary" size="extra-large">特大标签</wd-tag>

浅色标签

设置 variant="light" 展示浅色标签。

html

<wd-tag variant="light">标签</wd-tag>
<wd-tag type="primary" variant="light">常用标签</wd-tag>
<wd-tag type="danger" variant="light">危险标签</wd-tag>

镂空标签

设置 variant="plain" 展示镂空样式。

html

<wd-tag variant="plain">标签</wd-tag>
<wd-tag type="primary" variant="plain">常用标签</wd-tag>

虚线标签

设置 variant="dashed" 展示虚线边框。

html

<wd-tag variant="dashed">标签</wd-tag>
<wd-tag type="warning" variant="dashed">警告标签</wd-tag>

纯文本标签

设置 variant="text" 展示纯文本样式。

html

<wd-tag variant="text">标签</wd-tag>
<wd-tag type="success" variant="text">成功标签</wd-tag>

组件样式

标记标签

设置 mark 生成标记样式。

html

<wd-tag mark>标签</wd-tag>
<wd-tag type="primary" mark>常用标签</wd-tag>

幽灵标记标签

组合 mark 和 variant="plain" 展示幽灵标记样式。

html

<wd-tag mark variant="plain">标签</wd-tag>
<wd-tag type="success" mark variant="plain">成功标签</wd-tag>

圆角标签

设置 round 生成圆角样式。

html

<wd-tag round>标签</wd-tag>
<wd-tag type="primary" round>常用标签</wd-tag>

设置图标

可通过 icon 属性或 icon 插槽自定义左侧图标。

html

<wd-tag icon="clock-circle" type="primary" mark>标签</wd-tag>

<wd-tag type="primary" mark>
  <text>插槽</text>
  <template #icon>
    <wd-icon name="thunderbolt" />
  </template>
</wd-tag>

自定义颜色

通过 color 设置文字颜色，通过 bg-color 设置背景色和边框色。

html

<wd-tag color="#0083ff" bg-color="#d0e8ff">标签</wd-tag>
<wd-tag color="#FAA21E" bg-color="#FAA21E" variant="plain">标签</wd-tag>

特殊样式

可关闭

设置 closable 后，点击关闭按钮会触发 close 事件。

html

<wd-tag v-for="(tag, index) in closableStrongTags" :key="index" :type="tag.type" closable @close="handleCloseStrongTag(index)">
  {{ tag.value }}
</wd-tag>

const closableStrongTags = ref([
  { type: 'default', value: '标签' },
  { type: 'primary', value: '常用' }
])

function handleCloseStrongTag(order: number) {
  closableStrongTags.value = closableStrongTags.value.filter((_, index) => index !== order)
}

新增标签

设置 dynamic 生成新增标签样式，输入确认后触发 confirm 事件；可通过 add 插槽自定义新增按钮内容。

vuets

html

<wd-tag v-for="(tag, index) in dynamicTags" :key="index" type="primary" closable @close="handleClose1(index)">
  {{ tag }}
</wd-tag>
<wd-tag type="primary" dynamic @confirm="handleConfirm"></wd-tag>
<wd-tag type="primary" dynamic @confirm="handleConfirm">
  <template #add>
    <wd-icon name="pushpin" size="12px"></wd-icon>
    <text style="margin-left: 4px">自定义</text>
  </template>
</wd-tag>

const dynamicTags = ref(['标签一', '标签二'])

function handleClose1(order: number) {
  dynamicTags.value = dynamicTags.value.filter((item, index) => index !== order)
}

function handleConfirm({ value }: { value: string }) {
  if (!value) return
  dynamicTags.value = [...dynamicTags.value, value]
}

Attributes

参数	说明	类型	默认值
size	标签尺寸，可选值为 `small`、`medium`、`large`、`extra-large`、`default`	`TagSize`	`default`
type	标签类型，可选值为 `default`、`primary`、`success`、`warning`、`danger`、`volcano`、`lightblue`、`cyan`、`pink`、`purple`	`TagType`	`default`
icon	左侧图标	`string`	`''`
closable	是否可关闭	`boolean`	`false`
dynamic	是否为新增标签	`boolean`	`false`
color	文字颜色	`string`	`''`
bg-color	背景色和边框色	`string`	`''`
round	是否圆角	`boolean`	`false`
mark	是否标记样式	`boolean`	`false`
variant	标签变体，可选值为 `light`、`dark`、`plain`、`dashed`、`text`	`TagVariant`	`dark`
custom-class	根节点自定义类名	`string`	`''`
custom-style	根节点自定义样式	`string`	`''`

Events

事件名称	说明	参数
click	点击标签时触发	`MouseEvent`
close	点击关闭按钮时触发	`MouseEvent`
confirm	新增标签输入确认后触发	`{ value: string }`

Slots

名称	说明
default	标签内容
icon	自定义图标
add	自定义新增标签内容，`dynamic` 为 `true` 时生效

外部样式类

类名	说明
custom-class	根节点样式类
custom-style	根节点内联样式

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-tag-color	$text-white	基础文字颜色
--wot-tag-font-size	$typography-label-size-main	基础字号
--wot-tag-radius	$radius-small	默认圆角
--wot-tag-round-radius	$radius-radius-full	圆角标签圆角
--wot-tag-mark-radius	$radius-large $radius-main	标记标签圆角
--wot-tag-icon-spacing	$spacing-ultra-tight	图标间距
--wot-tag-input-width	$n-64	输入态宽度
--wot-tag-primary-light-bg	$primary-1	主色浅色背景
--wot-tag-primary-bg	$primary-6	主色背景
--wot-tag-primary-color	$primary-6	主色文字颜色
--wot-tag-success-bg	$success-main	成功色背景
--wot-tag-success-light-bg	$success-surface	成功色浅色背景
--wot-tag-success-color	$success-main	成功色文字颜色
--wot-tag-warning-bg	$warning-main	警告色背景
--wot-tag-warning-light-bg	$warning-surface	警告色浅色背景
--wot-tag-warning-color	$warning-main	警告色文字颜色
--wot-tag-danger-bg	$danger-main	危险色背景
--wot-tag-danger-light-bg	$danger-surface	危险色浅色背景
--wot-tag-danger-color	$danger-main	危险色文字颜色
--wot-tag-volcano-bg	$volcano-6	橘火色背景
--wot-tag-volcano-light-bg	$volcano-1	橘火色浅色背景
--wot-tag-volcano-color	$volcano-6	橘火色文字颜色
--wot-tag-info-bg	$text-auxiliary	默认信息色背景
--wot-tag-info-light-bg	$filled-content	默认信息色浅色背景
--wot-tag-info-color	$text-secondary	默认信息色文字颜色
--wot-tag-lightblue-bg	$lightblue-6	亮蓝色背景
--wot-tag-lightblue-light-bg	$lightblue-1	亮蓝色浅色背景
--wot-tag-lightblue-color	$lightblue-6	亮蓝色文字颜色
--wot-tag-cyan-bg	$cyan-6	青色背景
--wot-tag-cyan-light-bg	$cyan-1	青色浅色背景
--wot-tag-cyan-color	$cyan-6	青色文字颜色
--wot-tag-pink-bg	$pink-6	粉色背景
--wot-tag-pink-light-bg	$pink-1	粉色浅色背景
--wot-tag-pink-color	$pink-6	粉色文字颜色
--wot-tag-purple-bg	$purple-6	紫色背景
--wot-tag-purple-light-bg	$purple-1	紫色浅色背景
--wot-tag-purple-color	$purple-6	紫色文字颜色
--wot-tag-small-font-size	$typography-label-size-small	小尺寸字号
--wot-tag-small-line-height	$typography-label-line--height-size-small	小尺寸行高
--wot-tag-small-padding	$padding-zero $padding-super-tight	小尺寸内边距
--wot-tag-small-round-padding	$padding-zero $padding-tight	小尺寸圆角态内边距
--wot-tag-small-icon-size	$n-10	小尺寸图标尺寸
--wot-tag-medium-font-size	$typography-label-size-main	中尺寸字号
--wot-tag-medium-line-height	$typography-label-line--height-size-main	中尺寸行高
--wot-tag-medium-padding	$n-1 $padding-super-tight	中尺寸内边距
--wot-tag-medium-round-padding	$n-1 $padding-tight	中尺寸圆角态内边距
--wot-tag-medium-icon-size	$n-10	中尺寸图标尺寸
--wot-tag-default-font-size	$typography-label-size-main	默认尺寸字号
--wot-tag-default-line-height	$typography-label-line--height-size-main	默认尺寸行高
--wot-tag-default-padding	$n-3 $padding-extra-tight	默认尺寸内边距
--wot-tag-default-round-padding	$n-3 $padding-loose	默认尺寸圆角态内边距
--wot-tag-default-icon-size	$n-12	默认尺寸图标尺寸
--wot-tag-large-font-size	$typography-label-size-large	大尺寸字号
--wot-tag-large-line-height	$typography-label-line--height-size-large	大尺寸行高
--wot-tag-large-padding	$n-3 $padding-extra-tight	大尺寸内边距
--wot-tag-large-round-padding	$n-3 $padding-loose	大尺寸圆角态内边距
--wot-tag-large-icon-size	$n-12	大尺寸图标尺寸
--wot-tag-extra-large-font-size	$typography-body-size-main	超大尺寸字号
--wot-tag-extra-large-line-height	$typography-body-line--height-size-main	超大尺寸行高
--wot-tag-extra-large-padding	$n-3 $padding-extra-tight	超大尺寸内边距
--wot-tag-extra-large-round-padding	$n-3 $padding-loose	超大尺寸圆角态内边距
--wot-tag-extra-large-icon-size	$n-12	超大尺寸图标尺寸

源代码

文档

• 组件

Tag 标签 ​

组件类型 ​

基本用法 ​

组件变体 ​

标签尺寸 ​

浅色标签 ​

镂空标签 ​

虚线标签 ​

纯文本标签 ​

组件样式 ​

标记标签 ​

幽灵标记标签 ​

圆角标签 ​

设置图标 ​

自定义颜色 ​

特殊样式 ​

可关闭 ​

新增标签 ​

Attributes ​

Events ​

Slots ​

外部样式类 ​

主题定制 ​

CSS 变量 ​

源代码 ​

Tag 标签

组件类型

基本用法

组件变体

标签尺寸

浅色标签

镂空标签

虚线标签

纯文本标签

组件样式

标记标签

幽灵标记标签

圆角标签

设置图标

自定义颜色

特殊样式

可关闭

新增标签

Attributes

Events

Slots

外部样式类

主题定制

CSS 变量

源代码