el-tag详解

el-tag 是 Element Plus 框架中的标签组件，用于标记和分类信息。它常用于表单、列表等场景。

el-tag 属性详解

1. type:

   • 类型: String
   • 用途: 标签的类型，可选值为 success、info、warning、danger。
   • 默认值: —

2. hit:

   • 类型: Boolean
   • 用途: 是否添加圆角样式。
   • 默认值: false

3. disable-transitions:

   • 类型: Boolean
   • 用途: 是否禁用渐变动画。
   • 默认值: false

4. closable:

   • 类型: Boolean
   • 用途: 是否可关闭。
   • 默认值: false

5. color:

   • 类型: String
   • 用途: 自定义背景色。
   • 默认值: —

6. size:

   • 类型: String
   • 用途: 标签的尺寸，可选值为 medium、small、mini。
   • 默认值: —

el-tag 事件详解

1. close:

   • 事件名称: close
   • 用途: 当标签被关闭时触发。
   • 参数: 无

el-tag 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义标签的内容。

完整示例代码

<template>
  <div>
    <h2>Tag 示例</h2>

    <!-- 基本用法 -->
    <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>

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

    <!-- 自定义背景色的标签 -->
    <el-tag color="#FF0000">红色背景标签</el-tag>

    <!-- 不同尺寸的标签 -->
    <el-tag size="medium">中等标签</el-tag>
    <el-tag size="small">小型标签</el-tag>
    <el-tag size="mini">迷你标签</el-tag>

    <!-- 带有圆角样式的标签 -->
    <el-tag hit>带有圆角样式的标签</el-tag>

    <!-- 禁用渐变动画的标签 -->
    <el-tag disable-transitions>禁用渐变动画的标签</el-tag>

    <!-- 自定义内容的标签 -->
    <el-tag>
      <i class="el-icon-user"></i>
      用户标签
    </el-tag>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const handleClose = () => {
  ElMessage({
    message: '标签已关闭',
    type: 'success'
  })
}
</script>

代码解释

1. 基本用法:

   • 使用 el-tag 组件并设置标签内容。

   • <el-tag>标签一</el-tag>
     

2. 不同类型的标签:

   • 使用 type 属性设置标签的类型。

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

3. 可关闭的标签:

   • 使用 closable 属性设置标签为可关闭，并绑定 close 事件。

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

4. 自定义背景色的标签:

   • 使用 color 属性设置标签的背景色。

   • <el-tag color="#FF0000">红色背景标签</el-tag>
     

5. 不同尺寸的标签:

   • 使用 size 属性设置标签的尺寸。

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

6. 带有圆角样式的标签:

   • 使用 hit 属性设置标签为带有圆角样式。

   • <el-tag hit>带有圆角样式的标签</el-tag>
     

7. 禁用渐变动画的标签:

   • 使用 disable-transitions 属性禁用标签的渐变动画。

   • <el-tag disable-transitions>禁用渐变动画的标签</el-tag>
     

8. 自定义内容的标签:

   • 使用默认插槽自定义标签的内容。

   • <el-tag>
       <i class="el-icon-user"></i>
       用户标签
     </el-tag>
     

事件处理函数

• handleClose:

  • 处理标签关闭事件。

  • const handleClose = () => {
      ElMessage({
        message: '标签已关闭',
        type: 'success'
      })
    }
    

自定义样式

• 自定义标签样式:

  • 使用 <style scoped> 自定义标签的样式。

  • .el-tag {
      margin-right: 10px;
      margin-bottom: 10px;
    }