el‐tag - daniel-qa/Vue GitHub Wiki

el-tag

  • 範例

<template>
  <div>
    <el-tag type="success" size="small">成功</el-tag>
    <el-tag type="info" effect="plain">信息</el-tag>
    <el-tag type="warning" closable @close="onTagClose">可關閉</el-tag>
    <el-tag style="background-color: #409eff; color: white;">自定義樣式</el-tag>
  </div>
</template>

<script setup>
const onTagClose = () => {
  console.log('標籤關閉');
};
</script>

常見功能展示

1. 顏色類型

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>

2. 關閉標籤

使用 closable 屬性，讓標籤可以關閉。

<el-tag closable>可關閉的標籤</el-tag>
<el-tag type="info" closable>信息標籤</el-tag>

3. 不同大小

size 屬性控制標籤的大小。

<el-tag size="large">大標籤</el-tag>
<el-tag size="default">普通標籤</el-tag>
<el-tag size="small">小標籤</el-tag>

4. 主題樣式

effect 屬性控制標籤的主題樣式。

<el-tag effect="dark">深色主題</el-tag>
<el-tag effect="light">淺色主題</el-tag>
<el-tag effect="plain">簡約主題</el-tag>

5. 自定義顏色

標籤的樣式可以通過 style 或 class 自定義。

<el-tag style="background-color: #f56c6c; color: white;">自定義顏色</el-tag>
<el-tag style="border-color: #e6a23c; color: #e6a23c;">自定義邊框</el-tag>

參數屬性

常用屬性

屬性 說明 類型 可選值 預設值
type 標籤的樣式類型 string success / info / warning / danger —
size 標籤的大小 string large / default / small default
effect 標籤的主題樣式 string dark / light / plain light
closable 是否可關閉 boolean — false
disable-transitions 是否禁用漸變動畫 boolean — false
⚠️ **GitHub.com Fallback** ⚠️