点我扫二维码，查看demo

# Badge 徽标组件

# 介绍

在右上角展示徽标数字或小红点。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Badge } from '@dolphin-iot/ui'

Vue.use(Badge);

1
2
3
4

# 代码演示

# 基础用法

设置 content 属性后，Badge 会在子元素的右上角显示对应的徽标，也可以通过 dot 来显示小红点。

<template>
<div>
    <mx-badge content="9">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="100">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="hot">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge :dot="true">
        <div class="temp"></div>
    </mx-badge>
</div>
</template>
<style>
.temp{
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
}
.mx-badge-wrapper,
.mx-badge{
    margin-left: 20px;
}
</style>

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

# 小徽标

设置 small 属性可是显示较小的徽标, dot 为 true 时不受影响。

<template>
<div>
    <mx-badge content="9" :small="true">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="100" :small="true">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="hot" :small="true">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge :dot="true" :small="true">
        <div class="temp"></div>
    </mx-badge>
</div>
</template>
<style>
.temp{
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
}
.mx-badge-wrapper,
.mx-badge{
    margin-left: 20px;
}
</style>

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

# 最大值

设置 max 属性后，当 content 的数值超过最大值时，会自动显示为 {max}+

<template>
<div>
    <mx-badge content="20" :max="9">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="100" :max="99">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="60" :max="30">
        <div class="temp"></div>
    </mx-badge>
</div>
</template>
<style>
.temp{
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
}
.mx-badge-wrapper,
.mx-badge{
    margin-left: 20px;
}
</style>

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

# 主题

设置 theme 属性可以更改主题颜色, 支持 brand red purple blue-purple blue cyan yellow orange orange-red gray-offline 十种主题颜色。默认为 red。

<template>
<div>
    <mx-badge content="20" :max="9" theme="brand">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="100" :max="99" theme="purple">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="60" :max="30" theme="yellow">
        <div class="temp"></div>
    </mx-badge>
</div>
</template>
<style>
.temp{
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
}
.mx-badge-wrapper,
.mx-badge{
    margin-left: 20px;
}
</style>

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

# 自定义颜色

设置 color 属性可以自定义颜色。

<template>
<div>
    <mx-badge content="20" :max="9" color="#25cf42">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="100" :max="99" color="#ff8225">
        <div class="temp"></div>
    </mx-badge>
    <mx-badge content="60" :max="30" color="#ff3b30">
        <div class="temp"></div>
    </mx-badge>
</div>
</template>
<style>
.temp{
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
}
.mx-badge-wrapper,
.mx-badge{
    margin-left: 20px;
}
</style>

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

# 独立展示

当没有子元素时，会作为一个独立的元素进行展示。

<template>
<div>
    <mx-badge content="20" :max="9" color="#25cf42" />
    <mx-badge content="100" :max="99" color="#ff8225" />
    <mx-badge content="60" :max="30" color="#ff3b30" />
    <mx-badge content="100" :max="99" color="#25cf42" dot/>
</div>
</template>
<style>
.mx-badge-wrapper,
.mx-badge{
    margin-left: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Api

# Props

参数	说明	类型	默认值	是否必须
theme	颜色主题，可选值为: `brand` `red` `purple` `blue-purple` `blue` `cyan` `yellow` `orange` `orange-red` `gray-offline`	string	`red`	`-`
small	是否显示小徽标	boolean	`false`	`-`
dot	是否展示为小红点	boolean	`false`	`-`
content	徽标内容	boolean string	`-`	`-`
max	最大值，超过最大值会显示 `{max}+`，仅当 `content` 为数字时有效	number	`-`	`-`
color	自定义颜色	string	`-`	`-`

# Slots

名称	说明
default	徽标包裹的子元素
content	自定义徽标内容

← Switch 开关 Swiper 轮播 →