Badge 徽標

LhBadge 用於顯示未讀訊息數量或狀態標記。

基礎用法

⁵

vue

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

<template>
  <LhBadge :value="5">
    <div>目标内容</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge :value="5">
    <div>目标内容</div>
  </LhBadge>
</template>

自訂最大值

⁹⁹⁺

vue

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

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>目标内容</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    :value="100"
    :max="99"
  >
    <div>目标内容</div>
  </LhBadge>
</template>

紅點

is-dot 只顯示小紅點、不展示具體數值，適合「有更新」類提示，可用 type 換色。

消息

待辦

vue

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

<template>
  <!-- 紅點 -->
  <LhBadge is-dot>
    <div>目标内容</div>
  </LhBadge>
  <!-- 紅點（警告色） -->
  <LhBadge is-dot type="warning">
    <div>目标内容</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 紅點 -->
  <LhBadge is-dot>
    <div>目标内容</div>
  </LhBadge>
  <!-- 紅點（警告色） -->
  <LhBadge is-dot type="warning">
    <div>目标内容</div>
  </LhBadge>
</template>

偏移、零值與自訂內容

offset 微調徽標位置（[x, y] 像素偏移）；show-zero 讓零值也顯示；content 用自訂文案代替數字。

offset

⁵

show-zero

⁰

content

^新

vue

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

<template>
  <!-- 偏移 -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>目标内容</div>
  </LhBadge>
  <!-- 零值也顯示 -->
  <LhBadge :value="0" show-zero>
    <div>目标内容</div>
  </LhBadge>
  <!-- 自訂內容 -->
  <LhBadge value="新" content="新">
    <div>目标内容</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 偏移 -->
  <LhBadge :value="5" :offset="[6, 6]">
    <div>目标内容</div>
  </LhBadge>
  <!-- 零值也顯示 -->
  <LhBadge :value="0" show-zero>
    <div>目标内容</div>
  </LhBadge>
  <!-- 自訂內容 -->
  <LhBadge value="新" content="新">
    <div>目标内容</div>
  </LhBadge>
</template>

vue

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

<template>
  <LhBadge is-dot>
    <div>目标内容</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge is-dot>
    <div>目标内容</div>
  </LhBadge>
</template>

類型

vue

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

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    type="primary"
    :value="2"
  >
    <div>Primary</div>
  </LhBadge>
  <LhBadge
    type="success"
    :value="1"
  >
    <div>Success</div>
  </LhBadge>
  <LhBadge
    type="warning"
    :value="1"
  >
    <div>Warning</div>
  </LhBadge>
  <LhBadge
    type="info"
    :value="1"
  >
    <div>Info</div>
  </LhBadge>
</template>

尺寸

⁵

vue

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

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhBadge
    size="small"
    :value="5"
  >
    <div>Small</div>
  </LhBadge>
  <LhBadge
    size="medium"
    :value="5"
  >
    <div>Medium</div>
  </LhBadge>
  <LhBadge
    size="large"
    :value="5"
  >
    <div>Large</div>
  </LhBadge>
</template>

控制顯示與隱藏

¹⁰

vue

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

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>目标内容</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? '显示' : '隐藏' }}
  </LhButton>
</template>

vue

<script>
import { ref } from 'vue'

const badgeValue = ref(10)
const isHidden = ref(false)
</script>

<template>
  <LhBadge
    :value="badgeValue"
    :hidden="isHidden"
  >
    <div>目标内容</div>
  </LhBadge>
  <LhButton @click="isHidden = !isHidden">
    {{ isHidden ? '显示' : '隐藏' }}
  </LhButton>
</template>

類型定義

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

LhBadgeProps

export interface LhBadgeProps {
  type?: LhBadgeType
  value?: string | number
  size?: LhBadgeSize
  max?: number
  isDot?: boolean
  hidden?: boolean
  offset?: [number, number]
  showZero?: boolean
  content?: string
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
}

LhBadgeSize

export type LhBadgeSize = LhComponentSize

LhBadgeOffset

export type LhBadgeOffset = [number, number]

LhBadgeType _{（來自 @lh-ui/share/core/badge）}

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

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

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

國際化

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

訊息

⁵

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhBadge, LhButton } 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">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

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

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

<template>
  <!-- 透過 ConfigProvider 切換語言包 -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhBadge :value="5">
      <div>{{ locale === 'zh-CN' ? '消息' : 'Messages' }}</div>
    </LhBadge>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

API

屬性	說明	類型	預設值
type	徽標類型	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "default"`	`'danger'`
value	顯示值	`string \| number`	—
size	尺寸	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
max	最大值	`number`	`99`
isDot	小圓點模式	`boolean`	`false`
hidden	是否隱藏	`boolean`	`false`
offset	偏移量	`[number, number]`	—
showZero	是否顯示 0	`boolean`	`false`
content	自訂內容	`string`	—
sx	快速版面配置屬性（如 `{ mt: 2, w: '50%' }`），轉內聯樣式作用於根元素	`LhSxProps`	—

無障礙

小圓點模式（is-dot）的角標是純裝飾，標記為 aria-hidden，不進入無障礙樹
數值模式保留文字內容，螢幕閱讀器可讀取「99+」等計數

Badge 徽標 ​

基礎用法 ​

自訂最大值 ​

紅點 ​

偏移、零值與自訂內容 ​

類型 ​

尺寸 ​

控制顯示與隱藏 ​

類型定義 ​

國際化 ​

API ​

無障礙 ​