Tag 标签

不提供 RdTag 封装：业务直接使用 Element Plus el-tag。 库样式会全局覆盖语义色与可关闭筛选 Chip 外观。

业务标签

语义色为低饱和中性体系（非 CTA 橙）。可用 type 或扩展类名区分业务层级。

活跃未活跃潜在客户企业商业入门

<template>
  <el-tag type="success" round>活跃</el-tag>
  <el-tag type="info" round>未活跃</el-tag>
  <el-tag type="warning" round>潜在客户</el-tag>
  <el-tag type="primary" round>企业</el-tag>
  <el-tag type="danger" round>风险</el-tag>
  <el-tag round class="tag-tier--business">商业</el-tag>
</template>

筛选标签

closable 标签按筛选 Chip 样式覆盖：描边、浅底、可关闭。适合已选筛选条件展示。

已选关键词：Pacific状态：活跃

<script setup lang="ts">
import { ref } from 'vue'
import { toast } from '@rd-element/ui'

const tags = ref([
  { key: 'search', label: '关键词：Pacific' },
  { key: 'status', label: '状态：活跃' },
])

function removeTag(key: string) {
  tags.value = tags.value.filter((t) => t.key !== key)
  toast.info('已移除筛选条件')
}
</script>

<template>
  <el-tag
    v-for="tag in tags"
    :key="tag.key"
    closable
    round
    @close="removeTag(tag.key)"
  >
    {{ tag.label }}
  </el-tag>
</template>

API

el-tag

标签 API 见 Element Plus Tag。

库扩展类名

类名	说明
tag-tier--business	商业层级标签（紫罗兰语义）

全局样式说明

引入 @rd-element/ui/dist/style.css 后，业务中所有 <el-tag> 会套用库皮肤：

• 语义色：success / warning / danger / info / primary
• closable：筛选 Chip 外观（边框 + 浅底）

import 'element-plus/dist/index.css'
import '@rd-element/ui/dist/style.css' // 须在 EP 样式之后

依赖说明

• vue ^3.5.0、element-plus ^2.8.0 为 peerDependencies
• 业务需引入 EP 基础样式，再引入库覆盖层