W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
在右上角展示徽標(biāo)數(shù)字或小紅點。
通過以下方式來全局注冊組件,更多注冊方式請參考組件注冊。
import { createApp } from 'vue';
import { Badge } from 'vant';
const app = createApp();
app.use(Badge);
設(shè)置 ?content
? 屬性后,Badge 會在子元素的右上角顯示對應(yīng)的徽標(biāo),也可以通過 ?dot
? 來顯示小紅點。
<van-badge :content="5">
<div class="child" />
</van-badge>
<van-badge :content="10">
<div class="child" />
</van-badge>
<van-badge content="Hot">
<div class="child" />
</van-badge>
<van-badge dot>
<div class="child" />
</van-badge>
<style>
.child {
width: 40px;
height: 40px;
background: #f2f3f5;
border-radius: 4px;
}
</style>
設(shè)置 ?max
? 屬性后,當(dāng) ?content
? 的數(shù)值超過最大值時,會自動顯示為 ?{max}+
?。
<van-badge :content="20" max="9">
<div class="child" />
</van-badge>
<van-badge :content="50" max="20">
<div class="child" />
</van-badge>
<van-badge :content="200" max="99">
<div class="child" />
</van-badge>
通過 ?color
? 屬性來設(shè)置徽標(biāo)的顏色。
<van-badge :content="5" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge :content="10" color="#1989fa">
<div class="child" />
</van-badge>
<van-badge dot color="#1989fa">
<div class="child" />
</van-badge>
通過 ?content
? 插槽可以自定義徽標(biāo)的內(nèi)容,比如插入一個圖標(biāo)。
<van-badge>
<div class="child" />
<template #content>
<van-icon name="success" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="cross" class="badge-icon" />
</template>
</van-badge>
<van-badge>
<div class="child" />
<template #content>
<van-icon name="down" class="badge-icon" />
</template>
</van-badge>
.badge-icon {
display: block;
font-size: 10px;
line-height: 16px;
}
通過 ?position
? 屬性來設(shè)置徽標(biāo)的位置。
<van-badge :content="10" position="top-left">
<div class="child" />
</van-badge>
<van-badge :content="10" position="bottom-left">
<div class="child" />
</van-badge>
<van-badge :content="10" position="bottom-right">
<div class="child" />
</van-badge>
當(dāng) Badge 沒有子元素時,會作為一個獨立的元素進(jìn)行展示。
<van-badge :content="20" />
<van-badge :content="200" max="99" />
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
content | 徽標(biāo)內(nèi)容 | number | string | - |
color | 徽標(biāo)背景顏色 | string | #ee0a24
|
dot | 是否展示為小紅點 | boolean | false
|
max | 最大值,超過最大值會顯示 {max}+ ,僅當(dāng) content 為數(shù)字時有效 |
number | string | - |
offset v3.0.5
|
設(shè)置徽標(biāo)的偏移量,數(shù)組的兩項分別對應(yīng)水平和垂直方向的偏移量,默認(rèn)單位為 px
|
[number | string, number | string] | - |
show-zero v3.0.10
|
當(dāng) content 為數(shù)字 0 或字符串 '0' 時,是否展示徽標(biāo) | boolean | true
|
position v3.2.7
|
徽標(biāo)位置,可選值為 top-left bottom-left bottom-right
|
string | top-right
|
名稱 | 說明 |
---|---|
default | 徽標(biāo)包裹的子元素 |
content | 自定義徽標(biāo)內(nèi)容 |
組件導(dǎo)出以下類型定義:
import type { BadgeProps, BadgePosition } from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--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 | - |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: