Tag (标签)

Element-UI 的 Tag 标签组件用于标记和选择，可以展示不同类型的状态、分类或标签，并支持自定义颜色、关闭按钮等功能。

提示

Tag 标签组件官方文档：https://element.eleme.cn/#/zh-CN/component/tag (opens new window)

---

1. 基本用法

Tag 组件可以通过 <el-tag> 标签来使用，并通过不同的属性来自定义标签的外观和行为。

1.1 示例代码

<template>
  <div>
    <el-tag>默认标签</el-tag>
    <el-tag type="success">成功</el-tag>
    <el-tag type="info">信息</el-tag>
    <el-tag type="warning">警告</el-tag>
    <el-tag type="danger">危险</el-tag>
  </div>
</template>

1.2 属性解析

• type：用于设置标签的类型，不同类型对应不同的颜色和风格。
  • 可选值：success、info、warning、danger
  • 默认值：无
• 如果未设置 type，则标签将显示为默认样式。

---

2. Tag 属性

Tag 标签提供了多个属性，开发者可以根据需求进行配置。

参数	说明	类型	可选值	默认值
type	类型	string	success / info / warning / danger	—
closable	是否可关闭	boolean	—	false
disable-transitions	是否禁用渐变动画	boolean	—	false
hit	是否有边框描边	boolean	—	false
color	背景色	string	—	—
size	尺寸	string	medium / small / mini	—
effect	主题	string	dark / light / plain	light

• type：控制标签的颜色和风格，通常用于标记不同的状态或类别。

• closable：是否显示关闭按钮。如果设置为 true，标签的右侧将显示一个关闭按钮，用户可以点击关闭按钮移除标签。

• disable-transitions：禁用标签的渐变动画效果，如果设置为 true，标签的显示和关闭将不会有动画效果。

• hit：为标签添加一个边框描边效果，用于让标签更加突出。

• color：通过自定义颜色来设置标签的背景色，例如可以设置为 #f56c6c。

• size：控制标签的尺寸，medium、small、mini 对应中等、小型、迷你三种不同的尺寸。

• effect：控制标签的主题风格。light 为默认的浅色风格，dark 为深色风格，plain 为简洁风格。

---

3. Tag 事件

Tag 组件提供了两个事件 click 和 close，分别在点击标签和关闭标签时触发。

事件名称	说明	回调参数
click	点击 Tag 时触发的事件	—
close	关闭 Tag 时触发的事件	—

• click：当用户点击标签时触发，常用于响应用户的交互操作。

• close：当用户点击关闭按钮时触发，可以在回调函数中处理标签被关闭后的逻辑。

closable 属性会显示关闭按钮（小 “×” 图标），并且触发 close 事件。通过监听这个事件，可以将 Tag 标签从 DOM 中移除。

<template>
  <div>
    <el-tag closable @close="handleClose">可关闭标签</el-tag>
    <el-tag @click="handleClick">点击我</el-tag>
  </div>
</template>

<script>
export default {
  methods: {
    handleClose() {
      this.$message.info('标签已关闭');
    },
    handleClick() {
      this.$message.success('标签被点击');
    }
  }
};
</script>

4. Tag 常用示例

4.1 可关闭标签

通过 closable 属性使标签可关闭，并监听 close 事件处理标签被关闭后的操作。

<template>
  <el-tag closable @close="handleClose">可关闭标签</el-tag>
</template>

<script>
export default {
  methods: {
    handleClose() {
      this.$message.info('标签已关闭');
    }
  }
};
</script>

4.2 自定义颜色标签

通过 color 属性设置标签的自定义背景色。

<template>
  <el-tag color="#f56c6c">自定义颜色</el-tag>
</template>

4.3 多尺寸标签

通过 size 属性设置标签的尺寸。

<template>
  <el-tag size="medium">中等标签</el-tag>
  <el-tag size="small">小型标签</el-tag>
  <el-tag size="mini">迷你标签</el-tag>
</template>

4.4 边框描边标签

通过 hit 属性设置带有边框描边的标签。

<template>
  <el-tag hit>带描边的标签</el-tag>
</template>

4.5 标签主题效果

通过 effect 属性设置不同主题的标签。

<template>
  <el-tag effect="dark">深色标签</el-tag>
  <el-tag effect="light">浅色标签</el-tag>
  <el-tag effect="plain">简洁标签</el-tag>
</template>