Badge 徽章

基础用法

<vz-badge :value="1">
  <text>徽章</text>
</vz-badge>

<vz-badge :value="88">
  <view class="badge"></view>
</vz-badge>

最大数字

<vz-badge :value="100">
  <text>徽章</text>
</vz-badge>

<vz-badge :value="100" max="10">
  <view class="badge"></view>
</vz-badge>

展示 0 值

<vz-badge :value="0" show-zero>
  <text>徽章</text>
</vz-badge>

<vz-badge :value="0" show-zero>
  <view class="badge"></view>
</vz-badge>

文本内容

<vz-badge value="New">
  <text>徽章</text>
</vz-badge>

<vz-badge value="Hot">
  <view class="badge"></view>
</vz-badge>

自定义显示

<vz-badge :value="1">
  <text>徽章</text>
  <template #value="{ value }">
    <vz-icon name="vz-icon-home"></vz-icon>
    <text>&nbsp;{{ value }}</text>
  </template>
</vz-badge>

<vz-badge :value="88">
  <view class="badge"></view>
  <template #value="{ value }">
    <vz-icon name="vz-icon-home"></vz-icon>
    <text>&nbsp;{{ value }}</text>
  </template>
</vz-badge>

位置偏移

<vz-badge :value="1" :offset="[16, 8]">
  <text>徽章</text>
</vz-badge>

<vz-badge :value="88" :offset="[20, 8]">
  <view class="badge"></view>
</vz-badge>

圆点显示

<vz-badge is-dot>
  <text>徽章</text>
</vz-badge>

<vz-badge is-dot>
  <view class="badge"></view>
</vz-badge>

背景颜色

<vz-badge :value="1" color="var(--vz-color-primary)">
  <text>徽章</text>
</vz-badge>

<vz-badge :value="88" color="var(--vz-color-primary)">
  <view class="badge"></view>
</vz-badge>

独立展示

<vz-badge :value="1"></vz-badge>

<vz-badge is-dot></vz-badge>

Props

属性名	说明	类型	默认值
value	显示值	number / string	-
max	数字类型最大值，超过最大值会显示 {max}+	number	99
show-zero	值为零时是否显示	boolean	false
is-dot	是否以圆点形式显示	boolean	false
dot-size	圆点大小	string / number	12rpx
color	背景色颜色	string	--vz-color-white
offset	偏移量 [水平, 垂直]	[number, number]	-
i-class	根节点样式类	string	-
i-style	根节点样式	Vue.CSSProperties	-

Slots

插槽名	说明	参数
default	默认插槽	-
value	徽章内容	{ value }

CSS

变量名	说明	默认值
--vz-badge-background	props.color	--vz-color-danger
--vz-badge-dot-size	props.dotSize	12rpx
--vz-badge-px	padding-x	10rpx
--vz-badge-py	padding-y	4rpx
--vz-badge-font-size	字体大小	--vz-font-size-smaller
--vz-badge-color	字体颜色	--vz-color-white
--vz-badge-border-width	边框宽度	1px
--vz-badge-border-color	边框颜色	--vz-bg-color-page
--vz-badge-offset-x	水平偏移量	-
--vz-badge-offset-y	垂直偏移量	-

SCSS

$badge: (
  "px": 10rpx,
  "py": 4rpx,
  "font-size": getCssVar("font-size", "smaller"),
  "color": getCssVar("color", "white"),
  "background": getCssVar("color", "danger"),
  "border-width": 1px,
  "border-color": getCssVar("bg-color", "page"),
  "dot-size": 12rpx,
);