Tag 标签

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

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

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

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

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

基础用法

可移除标签

动态编辑标签

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

不同尺寸

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

主题

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

圆形标签

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

圆角

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

样式总览

可选中的标签

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

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	是否禁用	boolean	false
type	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 ​