角标
文字链接-slot
vue
<template>
<jp-badge :count="5">
<a src="#" class="text-link">slot-连接</a>
</jp-badge>
</template>
数值显示
vue
<template>
<jp-badge :count="999">
<image src="../../../static/example/ic_homepage_selected.png" class="badge-image" />
</jp-badge>
</template>
<style>
image {
width: 96rpx;
height: 96rpx;
}
</style>
类型选择
dot Boolean 类型,小数点或者数字
vue
<template>
<jp-badge :dot="true" :count="55">
<image src="../../../static/example/ic_homepage_selected.png" class="badge-image" />
</jp-badge>
</template>
<style>
image {
width: 96rpx;
height: 96rpx;
}
</style>
更换主题
vue
<template>
<jp-badge bg-color="#0065FF" :count="55">
<image src="../../../static/example/ic_homepage_selected.png" class="badge-image" />
</jp-badge>
</template>
<style>
image {
width: 96rpx;
height: 96rpx;
}
</style>
props 属性
| 属性名 | 类型 | 默认值 |
|---|---|---|
| count | Number | 0 |
| maxCount | Number | 99 |
| dot | Boolean | false |
| bgColor | String | 'linear-gradient（180deg， #FF7979 0%， #FC2C4A 100%）' |