Badge 徽標 - Vant 4
Badge 徽標
🏷️ 介紹
徽標元件用於在元素右上角展示數字或小紅點，是提醒使用者注意的絕佳方式！無論是訊息提醒、狀態標識還是數量顯示，都能輕鬆勝任。
📦 引入
透過以下方式來全域註冊元件，更多註冊方式請參考元件註冊。
import { createApp } from'vue'; import { Badge } from'vant'; const app = createApp(); app.use(Badge);🎯 程式碼演示
基礎用法
設定 content 屬性後，Badge 會在子元素的右上角顯示對應的徽標，也可以透過 dot 來顯示小紅點。簡單配置，醒目提醒！
最大值
設定 max 屬性後，當 content 的數值超過最大值時，會自動顯示為 {max}+。智慧處理大數值，保持介面整潔！
自訂顏色
透過 color 屬性來設定徽標的顏色。個性化配色，匹配你的設計風格！
自訂徽標內容
透過 content 插槽可以自訂徽標的內容，比如插入一個圖示。
.badge-icon { display: block; font-size: 10px; line-height: 16px; }自訂徽標位置
透過 position 屬性來設定徽標的位置。
獨立展示
當 Badge 沒有子元素時，會作為一個獨立的元素進行展示。
API
Props
| 參數 | 說明 | 類型 | 預設值 |
|---|---|---|---|
| content | 徽標內容（dot 為 fasle 時生效） | *number | string* |
| color | 徽標背景顏色 | string | #ee0a24 |
| dot | 是否展示為小紅點 | boolean | false | | max | 最大值，超過最大值會顯示 {max}+，僅當 content 為數字時有效 | number | string | - | | offset | 設定徽標的偏移量，陣列的兩項分別對應水平向右和垂直向下方向的偏移量，預設單位為 px | [number | string, number | string] | - | | show-zero | 當 content 為數字 0 或字串 '0' 時，是否展示徽標 | boolean | true | | position | 徽標位置，可選值為 top-left``bottom-left``bottom-right | string | top-right |
Slots
| 名稱 | 說明 |
|---|---|
| default | 徽標包裹的子元素 |
| content | 自訂徽標內容 |
類型定義
元件匯出以下類型定義：
importtype { BadgeProps, BadgePosition } from'vant';主題定製
樣式變數
元件提供了下列 CSS 變數，可用於自訂樣式，使用方法請參考 ConfigProvider 元件。
| 名稱 | 預設值 | 描述 |
|---|---|---|
| --van-badge-size | 16px | - |
| --van-badge-color | var(--van-white) | - |
| --van-badge-padding | 0 3px | - |
| --van-badge-font-size | var(--van-font-size-sm) | - |
| --van-badge-font-weight | var(--van-font-bold) | - |
| --van-badge-border-width | var(--van-border-width) | - |
| --van-badge-background | var(--van-danger-color) | - |
| --van-badge-dot-color | var(--van-danger-color) | - |
| --van-badge-dot-size | 8px | - |
| --van-badge-font | -apple-system-font, Helvetica Neue, Arial, sans-serif | - |
📝 總結
Badge 徽標元件是介面中的小小提醒專家！🏷️ 它能在不打擾使用者的前提下，巧妙地傳達重要資訊。無論是訊息數量、狀態提示還是特殊標記，都能以最直觀的方式呈現給使用者。
🎯 核心特性：
- 🔴 小紅點模式：簡潔的狀態提醒
- 🔢 數字顯示：精確的數量統計
- 🎨 自訂樣式：靈活的顏色和位置配置
- 📍 智慧定位：四個角落任意選擇
- 🎭 內容定製：支援文字、圖示等多種內容
- 🔢 智慧截斷：大數值自動顯示為 max+ 格式
從購物車商品數量到未讀訊息提醒，Badge 讓你的應用介面更加生動有趣！
🔗 相關內容
- Button 按鈕 - 可以配合 Badge 使用的按鈕元件
- Icon 圖示 - 可以作為 Badge 內容的圖示元件
- Tag 標籤 - 類似的標記元件
- NoticeBar 通知欄 - 另一種資訊提示方式