前端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 徽標(biāo)組件正是為此設(shè)計它以圓形數(shù)字徽標(biāo)或狀態(tài)色點為核心支持基本徽章、點狀徽章、計數(shù)徽章、狀態(tài)徽章四種形態(tài)可通過position、offset精確控制位置通過status與bg-color控制顏色體系。讀完本文你將掌握 Badge 全部參數(shù)含默認(rèn)值與校驗規(guī)則的用法并能結(jié)合 badge.tsx 的源碼理解其類名組合、偏移量計算與最大計數(shù)截斷的底層實現(xiàn)。何時使用Badge 出現(xiàn)在圖標(biāo)右上角或列表項右方通過不同的狀態(tài)色加數(shù)字提示用戶有消息需要處理時。典型場景如未讀消息數(shù)、系統(tǒng)告警計數(shù)、運行狀態(tài)指示燈等。從 badge.scss 可以看到組件根節(jié)點是一個position: relative; display: inline-block的容器這使得它既能內(nèi)聯(lián)包裹圖標(biāo)或文字也可以獨立使用——這一結(jié)構(gòu)決定了他后續(xù)所有形態(tài)的行為差異?；净照禄净照率?Badge 的默認(rèn)形態(tài)當(dāng)有包裹元素時在包裹元素右上角顯示徽章和數(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 時由于默認(rèn)max-count為 99實際渲染為99。這個截斷邏輯在 badge.tsx 的text計算屬性中實現(xiàn)僅當(dāng)count與maxCount同時為數(shù)字類型時才做比較count maxCount時輸出${maxCount}否則原樣輸出count。單元測試badge max見 badge.spec.ts也驗證了該行為count: 100默認(rèn)渲染99而設(shè)置maxCount: 1000后則正常顯示100。點狀徽章當(dāng)有包裹元素且show-dot參數(shù)為true時Badge 變?yōu)辄c狀徽章默認(rèn)在右上角展示一個小圓點不顯示數(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ù)徽章當(dāng)徽章獨立使用且不包裹任何元素時只展示徽章狀態(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存在默認(rèn)插槽內(nèi)容且設(shè)置了position時才會追加位置類并追加devui-badge--fixedposition: absolute使其絕對定位覆蓋到包裹元素上。沒有插槽內(nèi)容時徽標(biāo)就是普通流內(nèi)元素直接以計數(shù)形態(tài)展示。這也是有包裹/無包裹決定形態(tài)的根本原因。狀態(tài)徽章當(dāng)徽章獨立使用、不包裹任何元素且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品牌/信息默認(rèn)值common$devui-unavailable且文字色為$devui-aide-text中性/通用這些變量定義在 styles-var/private/_color.scss 與 styles-var/private/_basic.scss 中全部通過 CSS 變量如--devui-danger間接引用因此可以隨主題體系整體切換?；照挛恢猛ㄟ^position參數(shù)設(shè)置徽章位置默認(rèn)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%)即讓徽標(biāo)中心點恰好落在包裹元素的左上角頂點上四個角同理。這種寫法讓徽標(biāo)在任意尺寸的包裹元素上都能保持居中對齊頂點。自定義通過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僅在有默認(rèn)插槽即存在包裹元素且傳入了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并不是條件渲染組件始終渲染徽標(biāo)類在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ù)名類型默認(rèn)說明countnumber--可選設(shè)置基本徽章和計數(shù)徽章中顯示的數(shù)目源碼中類型為[Number, String]支持2.3k等文本計數(shù)max-countnumber99可選設(shè)置基本徽章和計數(shù)徽章最大可顯示數(shù)目當(dāng)count max-count時顯示max-countshow-dotbooleanfalse可選true時為點狀徽章有包裹或狀態(tài)徽章無包裹false時為基本徽章有包裹或計數(shù)徽章無包裹statusBadgeStatusTypeinfo可選狀態(tài)色positionBadgePositionTypetop-right可選徽標(biāo)位置bg-colorstring--可選自定義徽標(biāo)色此時status參數(shù)設(shè)置的徽章狀態(tài)色失效text-colorstring--可選自定義徽標(biāo)文字顏色offset[number, number]--可選有包裹時徽標(biāo)位置偏移量格式為[x, y]單位為 pxx為相對right或left的偏移量y為相對top或bottom的偏移量hiddenbooleanfalse可選是否顯示徽章默認(rèn)值與上表一一對應(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對外導(dǎo)出可直接import { BadgeStatusType } from vue-devui使用以當(dāng)前倉庫導(dǎo)出為準(zhǔn)。組件注冊名由install方法完成app.component(Badge.name, Badge)即全局可用d-badge。實現(xiàn)小結(jié)類名如何組合Badge 的渲染輸出為兩段外層devui-badge容器 內(nèi)層devui-badge__content徽標(biāo)節(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}僅當(dāng)有默認(rèn)插槽內(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截斷默認(rèn)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)指南精確定位徽標(biāo)狀態(tài)點的位置Ant Design Blazor Badge 偏移量 Offset 參數(shù)實戰(zhàn)指南精確定位徽標(biāo)狀態(tài)點的位置 Badge徽標(biāo)組件右上角的數(shù)字角標(biāo)或狀態(tài)點在前端UI組件設(shè)計系統(tǒng)Ant Design Vue Badge 徽標(biāo)組件完全指南count 計數(shù)、狀態(tài)點與 Ribbon 緞帶實戰(zhàn)Ant Design Vue Badge 徽標(biāo)組件完全指南count 計數(shù)、狀態(tài)點與 Ribbon 緞帶實戰(zhàn) Badge徽標(biāo)是 Ant Design Vu前端UI組件設(shè)計系統(tǒng)Ant Design Blazor Badge 徽標(biāo)組件完全指南計數(shù)角標(biāo)、狀態(tài)點與緞帶徽標(biāo)實戰(zhàn)Ant Design Blazor Badge 徽標(biāo)組件完全指南計數(shù)角標(biāo)、狀態(tài)點與緞帶徽標(biāo)實戰(zhàn) 導(dǎo)讀 Badge徽標(biāo)是 Ant Design Blazor前端UI組件設(shè)計系統(tǒng)創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考