前端UI組件設(shè)計系統(tǒng)【免費下載鏈接】vue-devui基于全新 DevUI Design 設(shè)計體系的 Vue3 組件庫面向研發(fā)工具的開源前端解決方案。項目地址https://gitcode.com/DevCloudFE/vue-devui點擊查看免費下載在研發(fā)工具類應(yīng)用中消息提醒、狀態(tài)提示是高頻場景。vue-devui 的 Badge 徽標組件正是為此設(shè)計它以圓形數(shù)字徽標或狀態(tài)色點為核心支持基本徽章、點狀徽章、計數(shù)徽章、狀態(tài)徽章四種形態(tài)可通過position、offset精確控制位置通過status與bg-color控制顏色體系。讀完本文你將掌握 Badge 全部參數(shù)含默認值與校驗規(guī)則的用法并能結(jié)合 badge.tsx 的源碼理解其類名組合、偏移量計算與最大計數(shù)截斷的底層實現(xiàn)。何時使用Badge 出現(xiàn)在圖標右上角或列表項右方通過不同的狀態(tài)色加數(shù)字提示用戶有消息需要處理時。典型場景如未讀消息數(shù)、系統(tǒng)告警計數(shù)、運行狀態(tài)指示燈等。從 badge.scss 可以看到組件根節(jié)點是一個position: relative; display: inline-block的容器這使得它既能內(nèi)聯(lián)包裹圖標或文字也可以獨立使用——這一結(jié)構(gòu)決定了他后續(xù)所有形態(tài)的行為差異?；净照禄净照率?Badge 的默認形態(tài)當有包裹元素時在包裹元素右上角顯示徽章和數(shù)目。template d-badge :count6 statusdanger classbadge-item未讀消息/d-badge d-badge :count7 statuswaiting classbadge-item未讀消息/d-badge d-badge :count8 statussuccess classbadge-item未讀消息/d-badge d-badge :count100 statusinfo classbadge-item未讀消息/d-badge /template style .badge-item { background-color: var(--devui-global-bg, #f3f6f8); margin-right: 20px; margin-bottom: 8px; border-radius: 10px; padding: 4px 8px; font-size: 14px; } /style注意第四個例子count為 100 時由于默認max-count為 99實際渲染為99。這個截斷邏輯在 badge.tsx 的text計算屬性中實現(xiàn)僅當count與maxCount同時為數(shù)字類型時才做比較count maxCount時輸出${maxCount}否則原樣輸出count。單元測試badge max見 badge.spec.ts也驗證了該行為count: 100默認渲染99而設(shè)置maxCount: 1000后則正常顯示100。點狀徽章當有包裹元素且show-dot參數(shù)為true時Badge 變?yōu)辄c狀徽章默認在右上角展示一個小圓點不顯示數(shù)目。template d-badge statusdanger show-dot classbadge-dot-item d-icon namefeedback / /d-badge d-badge statuswaiting show-dot classbadge-dot-item d-icon namefeedback / /d-badge d-badge statuswarning show-dot classbadge-dot-item d-icon namefeedback / /d-badge d-badge statusinfo show-dot classbadge-dot-item d-icon namefeedback / /d-badge /template style .badge-dot-item { margin-right: 20px; } /style從樣式實現(xiàn)看badge.scss點狀形態(tài)由devui-badge--dot修飾類渲染為6px × 6px的圓形與計數(shù)形態(tài)devui-badge--count的16px高、最小寬度16px的膠囊形狀形成對比。兩種形態(tài)的類名切換發(fā)生在 badge.tsx 的className計算屬性中props.showDot ? ns.m(dot) : ns.m(count)。計數(shù)徽章當徽章獨立使用且不包裹任何元素時只展示徽章狀態(tài)色和數(shù)目即計數(shù)徽章。它常用于列表項右側(cè)的未讀計數(shù)template ul classbadge-list li classbadge-list-item span系統(tǒng)消息/span d-badge statuscommon :count50/d-badge /li li classbadge-list-item span個人消息/span d-badge statuscommon :count500/d-badge /li /ul /template style .badge-list { width: 200px; font-size: 14px; background-color: var(--devui-base-bg, #fff); box-shadow: var(--devui-shadow-length-base, 0 1px 4px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.2)); } .badge-list-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; } /style從源碼結(jié)構(gòu)看計數(shù)徽章與基本徽章的差異不在 JS 層而在 CSS 層badge.tsx 只有在ctx.slots.default存在默認插槽內(nèi)容且設(shè)置了position時才會追加位置類并追加devui-badge--fixedposition: absolute使其絕對定位覆蓋到包裹元素上。沒有插槽內(nèi)容時徽標就是普通流內(nèi)元素直接以計數(shù)形態(tài)展示。這也是有包裹/無包裹決定形態(tài)的根本原因。狀態(tài)徽章當徽章獨立使用、不包裹任何元素且show-dot為true時即為狀態(tài)徽章不同狀態(tài)展示不同色點常用于狀態(tài)指示如運行中/失敗/等待。template d-badge statusdanger show-dot/d-badge nbsp;danger br / d-badge statuswarning show-dot/d-badge nbsp;warning br / d-badge statuswaiting show-dot/d-badge nbsp;waiting br / d-badge statusinfo show-dot/d-badge nbsp;info br / d-badge statussuccess show-dot/d-badge nbsp;success br / /template各狀態(tài)色與 SCSS 設(shè)計變量的映射關(guān)系見 badge.scssstatus背景色變量語義danger$devui-danger回退#f66f6a失敗、錯誤、告警warning$devui-warning警告waiting$devui-waiting回退#beccfa等待中success$devui-success成功info$devui-brand品牌/信息默認值common$devui-unavailable且文字色為$devui-aide-text中性/通用這些變量定義在 styles-var/private/_color.scss 與 styles-var/private/_basic.scss 中全部通過 CSS 變量如--devui-danger間接引用因此可以隨主題體系整體切換。徽章位置通過position參數(shù)設(shè)置徽章位置默認top-right。template d-badge :count6 statusdanger positiontop-left classbadge-item未讀消息/d-badge d-badge :count7 statuswaiting positiontop-right classbadge-item未讀消息/d-badge d-badge :count8 statussuccess positionbottom-left classbadge-item d-icon nameemoji / /d-badge d-badge :count100 statusinfo positionbottom-right classbadge-item d-icon namenotice / /d-badge /template四個位置類badge.scss的實現(xiàn)統(tǒng)一采用貼邊 transform: translate(±50%, ±50%)的方式例如top-left是left: 0; top: 0; transform: translate(-50%, -50%)即讓徽標中心點恰好落在包裹元素的左上角頂點上四個角同理。這種寫法讓徽標在任意尺寸的包裹元素上都能保持居中對齊頂點。自定義通過bg-color參數(shù)設(shè)置徽章展示狀態(tài)色此時status參數(shù)設(shè)置的徽章狀態(tài)色失效通過text-color自定義文字顏色通過offset參數(shù)設(shè)置相對于position的徽章偏移量。template d-badge :count666 statussuccess stylemargin-right: 20px d-icon namenotice / /d-badge d-badge :count666 statussuccess stylemargin-right: 30px :offset[-10, 0] d-icon namenotice / /d-badge d-badge count6 stylemargin-right: 20px :offset[0, -10]未讀消息/d-badge d-badge count6 bg-colorred text-color#fff stylemargin-right: 20px未讀消息/d-badge d-badge count2.3k bg-color#000 text-color#fff/d-badge /templateoffset的計算細節(jié)值得注意badge.tsx僅在有默認插槽即存在包裹元素且傳入了offset時才生效它會把position按-拆分為[yName, xName]如top-right拆為[top, right]然后把offset的[x, y]分別賦給right/left與top/bottom內(nèi)聯(lián)樣式。也就是說x控制相對right或left的偏移y控制相對top或bottom的偏移單位為 px。offset: [-10, 10]position: top-right最終生成top: 10px; right: -10px這一點被測試badge offsetXYbadge.spec.ts明確斷言。另外注意count實際上同時接受字符串badge-types.ts 中其類型為[Number, String]因此count2.3k這類文本型計數(shù)可以直接展示這也是最后一個示例成立的原因。隱藏徽章通過hidden屬性設(shè)置徽章是否可見適合消息已讀后漸隱的場景template d-badge :hiddenisHidden :count6 statusdanger classbadge-item未讀消息/d-badge d-badge :hiddenisHidden statusdanger show-dot classbadge-dot-item d-icon namefeedback / /d-badge br / d-button clickhiddenNum隱藏/d-button /template script import { defineComponent, ref } from vue; export default defineComponent({ setup() { const isHidden ref(false); const hiddenNum () { isHidden.value !isHidden.value; }; return { isHidden, hiddenNum, }; }, }); /script從實現(xiàn)看hidden并不是條件渲染組件始終渲染徽標類在devui-badge--hidden與devui-badge--show之間切換而是通過 CSS 過渡實現(xiàn)淡入淡出--show為visibility: visible; opacity: 1并使用 ease-out 過渡--hidden為visibility: hidden; opacity: 0并使用 ease-in 過渡badge.scss。測試badge hiddenbadge.spec.ts驗證了hidden在true/false切換時這兩個類互斥出現(xiàn)。Badge 參數(shù)參數(shù)名類型默認說明countnumber--可選設(shè)置基本徽章和計數(shù)徽章中顯示的數(shù)目源碼中類型為[Number, String]支持2.3k等文本計數(shù)max-countnumber99可選設(shè)置基本徽章和計數(shù)徽章最大可顯示數(shù)目當count max-count時顯示max-countshow-dotbooleanfalse可選true時為點狀徽章有包裹或狀態(tài)徽章無包裹false時為基本徽章有包裹或計數(shù)徽章無包裹statusBadgeStatusTypeinfo可選狀態(tài)色positionBadgePositionTypetop-right可選徽標位置bg-colorstring--可選自定義徽標色此時status參數(shù)設(shè)置的徽章狀態(tài)色失效text-colorstring--可選自定義徽標文字顏色offset[number, number]--可選有包裹時徽標位置偏移量格式為[x, y]單位為 pxx為相對right或left的偏移量y為相對top或bottom的偏移量hiddenbooleanfalse可選是否顯示徽章默認值與上表一一對應(yīng)可對照 badge-types.ts 中的badgeProps定義status與position還配有validator傳入不在白名單內(nèi)的值時 Vue 會在開發(fā)環(huán)境給出告警。bg-color與text-color的映射發(fā)生在 badge.tsx 的style計算屬性中直接寫入內(nèi)聯(lián)background與color樣式優(yōu)先級高于 status 修飾類的背景色這正是自定義色時 status 失效的實現(xiàn)機制。Badge 類型定義BadgeStatusTypetype BadgeStatusType danger | warning | waiting | success | info | common;BadgePositionTypetype BadgePositionType top-left | top-right | bottom-left | bottom-right;兩個類型均在 badge-types.ts 中定義并通過 badge/index.ts 的export * from ./src/badge-types對外導出可直接import { BadgeStatusType } from vue-devui使用以當前倉庫導出為準。組件注冊名由install方法完成app.component(Badge.name, Badge)即全局可用d-badge。實現(xiàn)小結(jié)類名如何組合Badge 的渲染輸出為兩段外層devui-badge容器 內(nèi)層devui-badge__content徽標節(jié)點badge.tsx。內(nèi)層類名按如下順序拼接devui-badge__content基類形態(tài)devui-badge--dot或devui-badge--count由show-dot決定狀態(tài)色devui-badge--{status}只要傳了status就追加位置devui-badge--{position}僅當有默認插槽內(nèi)容且傳了positiondevui-badge--fixed有包裹時絕對定位顯隱devui-badge--hidden或devui-badge--show。類名前綴由共享工具 use-namespace.ts 生成遵循 BEM 命名b()產(chǎn)出塊名e()產(chǎn)出__elementm()產(chǎn)出--modifier。這套命名約定也是單測斷言 DOM 類名如contentClass dotClass的基礎(chǔ)。單元測試覆蓋點badge.spec.ts 對核心行為做了逐項驗證可作為行為驗收清單基本計數(shù)count: 80正?；仫@show-dot切換false時不出現(xiàn)--dot類置true后出現(xiàn)再置回false后消失max-count截斷默認count: 100顯示99maxCount: 1000時顯示100bg-color生成內(nèi)聯(lián)樣式background: red;offset[-10, 10]top-right生成top: 10px; right: -10px;hidden切換--hidden/--show類互斥status六個取值逐一產(chǎn)生對應(yīng)修飾類position四個取值逐一產(chǎn)生對應(yīng)修飾類。參考文檔與源碼組件文檔badge/index.md組件實現(xiàn)badge.tsxProps 與類型定義badge-types.ts樣式實現(xiàn)badge.scss注冊入口badge/index.ts單元測試badge.spec.ts贊分享前端UI組件設(shè)計系統(tǒng)【免費下載鏈接】vue-devui基于全新 DevUI Design 設(shè)計體系的 Vue3 組件庫面向研發(fā)工具的開源前端解決方案。項目地址https://gitcode.com/DevCloudFE/vue-devui點擊查看免費下載相關(guān)推薦Ant Design Blazor Badge 偏移量 Offset 參數(shù)實戰(zhàn)指南精確定位徽標狀態(tài)點的位置Ant Design Blazor Badge 偏移量 Offset 參數(shù)實戰(zhàn)指南精確定位徽標狀態(tài)點的位置 Badge徽標組件右上角的數(shù)字角標或狀態(tài)點在前端UI組件設(shè)計系統(tǒng)Ant Design Vue Badge 徽標組件完全指南count 計數(shù)、狀態(tài)點與 Ribbon 緞帶實戰(zhàn)Ant Design Vue Badge 徽標組件完全指南count 計數(shù)、狀態(tài)點與 Ribbon 緞帶實戰(zhàn) Badge徽標是 Ant Design Vu前端UI組件設(shè)計系統(tǒng)Ant Design Blazor Badge 徽標組件完全指南計數(shù)角標、狀態(tài)點與緞帶徽標實戰(zhàn)Ant Design Blazor Badge 徽標組件完全指南計數(shù)角標、狀態(tài)點與緞帶徽標實戰(zhàn) 導讀 Badge徽標是 Ant Design Blazor前端UI組件設(shè)計系統(tǒng)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考