Tag 标签

标签用于对信息进行关键词分类或状态标记，通过色彩与形态的快速识别，帮助用户在密集信息中定位属性、筛选内容或感知状态。

import { createApp } from 'vue'
import { Tag as ElTag } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElTag)

标签按尺寸与交互类型组合，覆盖从密集标注到强操作的全场景：

尺寸	高度	纯展示	可操作
大	32px	页面级状态标识、醒目分类标记	表单内筛选标签组、需强点击热区的动态分类
中	24px	表格行内状态、卡片分类、常规信息标注	已选条件聚合、自定义筛选、动态标签管理
小	20px	极密集信息区状态标记、紧凑表格辅助标注	轻量动态分类、空间受限时的标签编辑

基础用法

<script setup lang="ts">
import { Tag as ElTag } from '@szhn/dh-design-pc'

</script>

<template>
  <div class="flex gap-2">
    <el-tag type="primary">Tag 1</el-tag>
    <el-tag type="success">Tag 2</el-tag>
    <el-tag type="info">Tag 3</el-tag>
    <el-tag type="warning">Tag 4</el-tag>
    <el-tag type="danger">Tag 5</el-tag>
  </div>
</template>

可移除标签

<template>
  <div class="flex gap-2">
    <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
      {{ tag.name }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@szhn/dh-design-pc'
import { Tag as ElTag } from '@szhn/dh-design-pc'


interface TagsItem {
  name: string
  type: TagProps['type']
}

const tags = ref<TagsItem[]>([
  { name: 'Tag 1', type: 'primary' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])
</script>

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。

<template>
  <div class="flex gap-2">
    <el-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="w-20"
      size="small"
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <el-button v-else class="button-new-tag" size="small" @click="showInput">
      + New Tag
    </el-button>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import type { InputInstance } from '@szhn/dh-design-pc'
import { Button as ElButton, Input as ElInput, Tag as ElTag } from '@szhn/dh-design-pc'


const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InputInstance>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

<script setup lang="ts">
import { Tag as ElTag } from '@szhn/dh-design-pc'

</script>

<template>
  <div class="flex gap-2">
    <el-tag size="large">Large</el-tag>
    <el-tag>Default</el-tag>
    <el-tag size="small">Small</el-tag>
  </div>
</template>

主题

Tag 组件提供了三个不同的主题：dark 对应填充，light 对应浅底，plain 对应描边。

<template>
  <div class="flex gap-2">
    <span>Dark</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <span>Light</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <span>Plain</span>
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@szhn/dh-design-pc'
import { Tag as ElTag } from '@szhn/dh-design-pc'


type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
])
</script>

圆形标签

Tag 可以通过 round 变为全圆角，也可以通过 half-round 使用半圆角形态。

<template>
  <div class="flex gap-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
      round
    >
      {{ item.label }}
    </el-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@szhn/dh-design-pc'
import { Tag as ElTag } from '@szhn/dh-design-pc'


type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
])
</script>

圆角

使用 radius 属性指定标签圆角档位，支持 2、4、6、8、12、16 和全圆角。

<template>
  <div class="tag-radius-demo">
    <div
      v-for="item in radiusItems"
      :key="item.label"
      class="tag-radius-demo__row"
    >
      <span class="tag-radius-demo__label">{{ item.label }}</span>
      <el-tag type="primary" :radius="item.value">默认标签</el-tag>
      <el-tag type="primary" effect="plain" :radius="item.value">描边标签</el-tag>
      <el-tag type="primary" effect="dark" :radius="item.value">填充标签</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElTag } from '@szhn/dh-design-pc'

const radiusItems = [
  { label: '2px', value: 2 },
  { label: '4px', value: 4 },
  { label: '6px', value: 6 },
  { label: '8px', value: 8 },
  { label: '12px', value: 12 },
  { label: '16px', value: 16 },
  { label: '全圆角', value: 'full' },
] as const
</script>

<style scoped>
.tag-radius-demo {
  display: grid;
  gap: 12px;
}

.tag-radius-demo__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tag-radius-demo__label {
  width: 56px;
  color: var(--vp-c-text-2);
  font-size: 12px;
}
</style>

样式总览

<script lang="ts" setup>
import { Tag as ElTag } from '@szhn/dh-design-pc'

type DemoEffect = 'dark' | 'light' | 'plain'
type DemoSize = 'large' | 'default' | 'small'
type DemoShape = 'square' | 'round' | 'half'

const effects: Array<{ key: string; effect: DemoEffect }> = [
  { key: 'filled', effect: 'dark' },
  { key: 'soft', effect: 'light' },
  { key: 'outline', effect: 'plain' },
]

const sizes: Array<{ key: string; size: DemoSize }> = [
  { key: 'large', size: 'large' },
  { key: 'medium', size: 'default' },
  { key: 'small', size: 'small' },
]

const cells: Array<{ key: string; shape: DemoShape; closable: boolean }> = [
  { key: 'square', shape: 'square', closable: false },
  { key: 'square-close', shape: 'square', closable: true },
  { key: 'round', shape: 'round', closable: false },
  { key: 'round-close', shape: 'round', closable: true },
  { key: 'half', shape: 'half', closable: false },
  { key: 'half-close', shape: 'half', closable: true },
]

const getTagSize = (size: DemoSize) => (size === 'default' ? undefined : size)
</script>

<template>
  <div class="tag-design-demo">
    <div v-for="effectGroup in effects" :key="effectGroup.key" class="tag-design-demo__section">
      <div v-for="sizeGroup in sizes" :key="`${effectGroup.key}-${sizeGroup.key}`" class="tag-design-demo__row">
        <el-tag
          v-for="cell in cells"
          :key="cell.key"
          :effect="effectGroup.effect"
          type="primary"
          :size="getTagSize(sizeGroup.size)"
          :round="cell.shape === 'round'"
          :half-round="cell.shape === 'half'"
          :closable="cell.closable"
          disable-transitions
        >
          默认标签
        </el-tag>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tag-design-demo {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  overflow-x: auto;
  background: #F4F4F4;
  border-radius: 6px;
}

.tag-design-demo__section {
  display: grid;
  gap: 18px;
}

.tag-design-demo__row {
  display: grid;
  grid-template-columns: repeat(6, minmax(104px, max-content));
  align-items: center;
  min-width: max-content;
  column-gap: 20px;
  row-gap: 12px;
}

@media (max-width: 720px) {
  .tag-design-demo {
    padding: 20px;
  }

  .tag-design-demo__row {
    grid-template-columns: repeat(3, minmax(104px, max-content));
  }
}
</style>

可选中的标签

有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 check-tag组件。您可以在2.5.4中使用 type 属性。

<template>
  <div class="flex gap-2">
    <el-check-tag checked>Checked</el-check-tag>
    <el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
    <el-check-tag disabled>Disabled</el-check-tag>
  </div>
  <div class="flex gap-2 mt-4">
    <el-check-tag :checked="checked1" type="primary" @change="onChange1">
      Tag 1
    </el-check-tag>
    <el-check-tag :checked="checked2" type="success" @change="onChange2">
      Tag 2
    </el-check-tag>
    <el-check-tag :checked="checked3" type="info" @change="onChange3">
      Tag 3
    </el-check-tag>
    <el-check-tag :checked="checked4" type="warning" @change="onChange4">
      Tag 4
    </el-check-tag>
    <el-check-tag :checked="checked5" type="danger" @change="onChange5">
      Tag 5
    </el-check-tag>
    <el-check-tag
      :checked="checked6"
      disabled
      type="success"
      @change="onChange6"
    >
      Tag 6
    </el-check-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CheckTag as ElCheckTag } from '@szhn/dh-design-pc'


const checked = ref(false)
const checked1 = ref(true)
const checked2 = ref(true)
const checked3 = ref(true)
const checked4 = ref(true)
const checked5 = ref(true)
const checked6 = ref(true)

const onChange = (status: boolean) => {
  checked.value = status
}

const onChange1 = (status: boolean) => {
  checked1.value = status
}

const onChange2 = (status: boolean) => {
  checked2.value = status
}

const onChange3 = (status: boolean) => {
  checked3.value = status
}

const onChange4 = (status: boolean) => {
  checked4.value = status
}

const onChange5 = (status: boolean) => {
  checked5.value = status
}

const onChange6 = (status: boolean) => {
  checked6.value = status
}
</script>

Tag API

Tag Attributes

属性名	说明	类型	默认
type	Tag 的类型	enum	primary
closable	是否可关闭	boolean	false
disable-transitions	是否禁用渐变动画	boolean	false
hit	是否有边框描边	boolean	false
color	背景色	string	—
size	Tag 的尺寸	enum	—
effect	Tag 的主题	enum	light
round	Tag 是否为圆形	boolean	false
half-round	Tag 是否为半圆角	boolean	false
radius	标签圆角档位	enum	—

Tag Events

事件名	说明	Type
click	点击 Tag 时触发的事件	Function
close	关闭 Tag 时触发的事件	Function

Tag Slots

名称	说明
default	自定义默认内容

CheckTag API

CheckTag Attributes

属性名	说明	类型	默认
checked / v-model:checked	是否选中	boolean	false
disabled 2.8.2	是否禁用	boolean	false
type 2.5.4	CheckTag 类型	enum	primary

CheckTag Events

事件名	说明	类型
change	点击 Check Tag 时触发的事件	Function

CheckTag Slots

名称	说明
default	自定义默认内容

Tag 标签 ​

基础用法 ​

可移除标签 ​

动态编辑标签 ​

不同尺寸 ​

主题 ​

圆形标签 ​

圆角 ​

样式总览 ​

可选中的标签 ​

Tag API ​

Tag Attributes ​

Tag Events ​

Tag Slots ​

CheckTag API ​

CheckTag Attributes ​

CheckTag Events ​

CheckTag Slots ​