徽标
介绍
一般用于未读消息或提示信息。在页面中表现为小红点或者带数字的角标。
兼容性提示：在支付宝小程序中使用时，若使用插槽，则需声明
use-slot，use-content-slot，其他平台都不需要声明。
基本使用
通过设置content属性来定义徽标展示的数量
<z-badge :content="5">
<view class="child" />
</z-badge>
使用非数字内容
content属性也可以设置为字符串
<z-badge content="Hot">
<view class="child" />
</z-badge>
使用小红点
通过设置dot属性来展示小红点
<z-badge dot>
<view class="child" />
</z-badge>
设置最大值
通过设置max属性来设置徽标展示的最大值
<z-badge content="20" max="9">
<view class="child" />
</z-badge>
自定义颜色
通过设置color属性来设置徽标的背景颜色
<z-badge content="5" color="#1989fa">
<view class="child" />
</z-badge>
自定义徽标内容
<z-badge>
<div class="child" />
<template #content>
<z-icon name="done" size="20rpx" />
</template>
</z-badge>
独立展示
不适用任何插槽，只展示徽标
<z-badge content="20" />
API
Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| dot | 是否显示为小红点样式 | boolean | false |
|
| max | 当内容为数字时，显示的最大值，超过该数值会显示为 x+ | number|string | null |
|
| color | 背景颜色 | string | - | |
| content | 内容 | number|string | null |
|
| custom-style | 自定义样式 | string | - | |
use-slot支付宝小程序 |
是否使用默认插槽，即被组件包裹的子元素（仅支付宝小程序需要声明此属性） | boolean | false |
|
use-content-slot支付宝小程序 |
是否使用内容插槽，即自定义组件内容（仅支付宝小程序需要声明此属性） | boolean | false |
Slots
| 名称 | 说明 | Bindings |
|---|---|---|
| default | 徽标默认插槽 | |
| content | 徽标内容 |