# 红点提醒（Badge）
一般用于新上线的功能、某一个已经上线的功能有了新的更新、某一个功能有内容的变化，业务上的提醒。
基本样式
一共两种样式：
1
使用方法
1、小红点：
最基本也是最常用的红点类型，是小红点的最初形态，一般被投放在业务入口处，用于内容、功能或动态更新的提醒。
2、小红点+数字：
由基础的小红点样式演化而来，可以展示未读消息的数量，一般用于消息、社交场景，在有新的好友信息，新的点赞或评论时显示。
# 示例
<template>
<div class="wrapper">
<dof-minibar title="8.2红点提醒"></dof-minibar>
<div class="title-box">
<text class="title-text">基础样式</text>
</div>
<div class="badge-box">
<div class="badge-item">
<dof-badge :dot="true"></dof-badge>
</div>
<div class="badge-item">
<dof-badge :theme="'colmo-gray'" :dot="true"></dof-badge>
</div>
<div class="badge-item" style="width: 120px; height: 120px;">
<dof-badge content="1"></dof-badge>
</div>
<!-- <dof-badge class="m-r-80" :dot="true"></dof-badge>
<dof-badge content="1"></dof-badge> -->
</div>
</div>
</template>
<style scoped>
.wrapper {
background-color: #f9f9f9;
}
.m-t-16 {
margin-top: 16px;
}
.badge-item {
width: 100px;
height: 90px;
}
.title-box {
padding: 32px;
background-color: #e5e5e8;
}
.title-text {
font-family: PingFangSC-Medium;
font-size: 36px;
color: #000000;
font-weight: 500;
}
.badge-box {
padding: 66px 0;
display: flex;
flex-direction: row;
align-items: center;
}
@media screen and (weex-theme: colmo) {
.wrapper {
background-color: #151617;
}
}
</style>
<script>
import { DofMinibar, DofBadge } from 'dolphin-weex-ui'
const animation = weex.requireModule('animation')
export default {
components: { DofMinibar, DofBadge },
data: () => ({}),
computed: {},
created() {},
mounted() {},
methods: {}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
# Attributes
| 参数 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
| theme | 颜色主题，可选值为: colmo colmo-gray brand red purple blue-purple blue cyan yellow orange orange-red gray-offline | String | colmo | - |
| small | 是否显示小徽标 | boolean | false | - |
| dot | 是否展示为小红点 | boolean | false | - |
| content | 徽标内容 | Number String | - | - |
| max | 最大值，超过最大值会显示 {max}+，仅当 content 为数字时有效 | number | - | - |
| color | 自定义徽标背景颜色 | String | red | - |
| inline | 是否行内展示 | boolean | - | - |
点我扫二维码 查看demo