Tag 標籤

LhTag 用於標識和分類。

基礎用法

標籤一標籤二標籤三

vue

<script setup lang="ts">
import { LhTag } from '@lh-ui/vue3'
</script>

<template>
  <LhTag>标签一</LhTag>
  <LhTag>标签二</LhTag>
  <LhTag>标签三</LhTag>
</template>

vue

<script>
import { LhTag } from '@lh-ui/vue3'

export default {
  components: { LhTag }
}
</script>

<template>
  <LhTag>标签一</LhTag>
  <LhTag>标签二</LhTag>
  <LhTag>标签三</LhTag>
</template>

類型

主要標籤成功標籤警告標籤危險標籤資訊標籤

vue

<script setup lang="ts">
</script>

<template>
  <LhTag type="primary">主要标签</LhTag>
  <LhTag type="success">成功标签</LhTag>
  <LhTag type="warning">警告标签</LhTag>
  <LhTag type="danger">危险标签</LhTag>
  <LhTag type="info">信息标签</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag type="primary">主要标签</LhTag>
  <LhTag type="success">成功标签</LhTag>
  <LhTag type="warning">警告标签</LhTag>
  <LhTag type="danger">危险标签</LhTag>
  <LhTag type="info">信息标签</LhTag>
</template>

尺寸

小標籤中標籤大標籤

vue

<script setup lang="ts">
</script>

<template>
  <LhTag size="small">小标签</LhTag>
  <LhTag size="medium">中标签</LhTag>
  <LhTag size="large">大标签</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag size="small">小标签</LhTag>
  <LhTag size="medium">中标签</LhTag>
  <LhTag size="large">大标签</LhTag>
</template>

可關閉

標籤一標籤二停用標籤

vue

<script setup lang="ts">
import { ref } from 'vue'

const show1 = ref(true)
const show2 = ref(true)
</script>

<template>
  <LhTag v-if="show1" closable @close="show1 = false">标签一</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">标签二</LhTag>
  <LhTag disabled>禁用标签</LhTag>
</template>

vue

<script>
export default {
  data() {
    return {
      show1: true,
      show2: true,
    }
  },
}
</script>

<template>
  <LhTag v-if="show1" closable @close="show1 = false">标签一</LhTag>
  <LhTag v-if="show2" type="primary" closable @close="show2 = false">标签二</LhTag>
</template>

圓角與標記

圓角標籤標記標籤圓角標記

vue

<script setup lang="ts">
</script>

<template>
  <LhTag round>圆角标签</LhTag>
  <LhTag hit>标记标签</LhTag>
  <LhTag round hit>圆角标记</LhTag>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTag round>圆角标签</LhTag>
  <LhTag hit>标记标签</LhTag>
  <LhTag round hit>圆角标记</LhTag>
</template>

自訂主題

為標籤應用自訂顏色主題。

松花綠標籤成功

vue

<script setup lang="ts">
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'

const songhuaTheme = {
  'primary-color': '#5B8C5A',
  'primary-color-hover': '#7BB079',
  'primary-color-bg': '#E8F5E8',
}
</script>

<template>
  <!-- 局部主題：松花綠 -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">松花绿标签</LhTag>
    <LhTag type="success">成功</LhTag>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTag },
  data() {
    return {
      songhuaTheme: {
        'primary-color': '#5B8C5A',
        'primary-color-hover': '#7BB079',
        'primary-color-bg': '#E8F5E8',
      },
    }
  },
}
</script>

<template>
  <!-- 局部主題：松花綠 -->
  <LhConfigProvider :theme-vars="songhuaTheme">
    <LhTag type="primary">松花绿标签</LhTag>
    <LhTag type="success">成功</LhTag>
  </LhConfigProvider>
</template>

更多主題請參考主題定製。

國際化

標籤文字可以透過 LhConfigProvider 配合語言包實現國際化切換。

標籤

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhTag } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- 透過 ConfigProvider 切換語言包 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTag>{{ locale === 'zh-CN' ? '标签' : 'Tag' }}</LhTag>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTag, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTag, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- 透過 ConfigProvider 切換語言包 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTag>{{ locale === 'zh-CN' ? '标签' : 'Tag' }}</LhTag>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Tag API

Props

屬性	說明	類型	預設值
type	標籤類型	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'default'`
size	尺寸	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
closable	是否可關閉	`boolean`	`false`
disabled	是否停用	`boolean`	`false`
round	是否為圓角	`boolean`	`false`
hit	是否有邊框描邊	`boolean`	`false`
onClose	關閉時的自訂處理	`(e: Event) => void`	—
sx	快速版面配置屬性（如 `{ mt: 2, w: '50%' }`），轉內聯樣式作用於根元素	`LhSxProps`	—

Events

事件	說明	類型
click	點選標籤時觸發	`(e: MouseEvent) => void`
close	關閉標籤時觸發	`(e: Event) => void`

Slots

插槽名	說明
default	標籤內容

無障礙

關閉按鈕是純圖示按鈕，aria-label 取語言包 tag.close（中文「關閉」），隨 ConfigProvider 語言切換
關閉按鈕內的圖示 <svg> 標記為 aria-hidden，避免螢幕閱讀器重複播報
標籤文本本身可直接讀取，無需額外命名

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/tag/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhTagProps

export interface LhTagProps {
  type?: LhTagType
  size?: LhTagSize
  closable?: boolean
  disabled?: boolean
  round?: boolean
  hit?: boolean
  /** 關閉時的自訂處理 */
  onClose?: (e: Event) => void
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhTagSize

export type LhTagSize = LhComponentSize

LhTagType _{（來自 @lh-ui/share/core/tag）}

export type LhTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default'

LhComponentSize _{（來自 @lh-ui/share/core/shared）}

export type LhComponentSize = (typeof LH_SIZE_CONST)[keyof typeof LH_SIZE_CONST]

Tag 標籤 ​

基礎用法 ​

類型 ​

尺寸 ​

可關閉 ​

圓角與標記 ​

自訂主題 ​

國際化 ​

Tag API ​

Props ​

Events ​

Slots ​

無障礙 ​

類型定義 ​