Tag 标签

不提供 RdTag 封装：业务直接使用 Element Plus el-tag。 库仅将 type="primary" 固定为 EP 默认蓝（不跟品牌橙）；其余 type 用 EP 原样。

业务标签

除 primary（固定蓝）外，其余语义色为 Element Plus 默认。

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

<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="info" round>入门</el-tag>
</template>

筛选标签

closable 使用 Element Plus 默认外观，适合已选筛选条件展示。

已选关键词：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。

全局样式说明

引入 @rd-element/ui/dist/style.css 后，对 <el-tag> 的库干预仅有：

• type="primary"：固定为 Element Plus 默认蓝（#409eff / #ecf5ff），含 closable 关闭钮 hover，不跟品牌橙 --el-color-primary
• 其它 type / closable：不覆盖，使用 EP 原样

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 基础样式，再引入库样式