Badge 徽標

圖示 / 按鈕角落的數值或狀態標記。支援類型配色、max 截斷、紅點、零值顯隱與位置偏移。

徽標

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>未讀訊息</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>超出 max 截斷</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>紅點模式</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>零值預設隱藏</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>small 尺寸</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset 微調位置 / hidden 隱藏 / content 自訂文案</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="熱" type="danger" :offset="[6, 4]">
        <LhButton>offset 偏移</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>hidden 開關</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? '顯示徽標' : '隱藏徽標' }}</LhButton>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    hidden: false,
  }),
}
</script>

Props

屬性	說明	類型	預設值
type	類型配色	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	徽標數值（超出 max 時截斷為 max+）	string \| number	—
size	尺寸	'small' \| 'default' \| 'large'	'default'
max	數值上限	number	—
isDot	紅點模式（忽略 value）	boolean	false
hidden	隱藏徽標	boolean	false
offset	相對預設位置的偏移 [x, y]	[number, number]	—
showZero	value 為 0 時是否仍展示	boolean	false
content	自訂文案（覆蓋 value）	string	—
sx	sx 快速佈局屬性	—	—

Slots

預設插槽：徽標掛載的宿主元素。