Skip to content

Commit 261abd6

Browse files
ziyoungziyoung
authored
Badge: add type attribute (#12991)
* badge: add type attribute * Update badge.md
1 parent ec0074b commit 261abd6

File tree

5 files changed

+61
-12
lines changed

5 files changed

+61
-12
lines changed

‎examples/docs/en-US/badge.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ Displays the amount of new messages.
1515
<el-badge :value="3" class="item">
1616
<el-button size="small">replies</el-button>
1717
</el-badge>
18+
<el-badge :value="1" class="item" type="primary">
19+
<el-button size="small">comments</el-button>
20+
</el-badge>
21+
<el-badge :value="2" class="item" type="warning">
22+
<el-button size="small">replies</el-button>
23+
</el-badge>
1824

1925
<el-dropdown trigger="click">
2026
<span class="el-dropdown-link">
@@ -130,9 +136,10 @@ Use a red dot to mark content that needs to be noticed.
130136
</style>
131137

132138
### Attributes
133-
| Attribute | Description | Type | Accepted Values | Default |
139+
| Attribute | Description | Type | Accepted Values | Default |
134140
|------------- |---------------- |---------------- |---------------------- |-------- |
135-
| value | display value | string, number | — | — |
136-
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
137-
| is-dot | if a little dot is displayed | boolean | — | false |
138-
| hidden | hidden badge | boolean | — | false |
141+
| value | display value | string, number | — | — |
142+
| max | maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number` | number | — | — |
143+
| is-dot | if a little dot is displayed | boolean | — | false |
144+
| hidden | hidden badge | boolean | — | false |
145+
| type | button type | string | primary / success / warning / danger / info | — |

‎examples/docs/es/badge.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ Muestra la cantidad de mensajes nuevos.
1515
<el-badge :value="3" class="item">
1616
<el-button size="small">replies</el-button>
1717
</el-badge>
18+
<el-badge :value="1" class="item" type="primary">
19+
<el-button size="small">comments</el-button>
20+
</el-badge>
21+
<el-badge :value="2" class="item" type="warning">
22+
<el-button size="small">replies</el-button>
23+
</el-badge>
1824

1925
<el-dropdown trigger="click">
2026
<span class="el-dropdown-link">
@@ -136,3 +142,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
136142
| max | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number | — | — |
137143
| is-dot | si se debe mostrar un pequeño punto | boolean | — | false |
138144
| hidden | hidden badge | boolean | — | false |
145+
| type | tipo de botón | string | primary / success / warning / danger / info | — |

‎examples/docs/zh-CN/badge.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@
2020
<el-badge :value="3" class="item">
2121
<el-button size="small">回复</el-button>
2222
</el-badge>
23+
<el-badge :value="1" class="item" type="primary">
24+
<el-button size="small">评论</el-button>
25+
</el-badge>
26+
<el-badge :value="2" class="item" type="warning">
27+
<el-button size="small">回复</el-button>
28+
</el-badge>
2329

2430
<el-dropdown trigger="click">
2531
<span class="el-dropdown-link">
@@ -133,8 +139,9 @@
133139

134140
### Attributes
135141
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
136-
|------------- |---------------- |---------------- |---------------------- |-------- |
137-
| value | 显示值 | string, number | — | — |
138-
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
139-
| is-dot | 小圆点 | boolean | — | false |
140-
| hidden | 隐藏 badge | boolean | — | false |
142+
|------------- |---------------- |---------------- |---------------------- |-------- |
143+
| value | 显示值 | string, number | — | — |
144+
| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — |
145+
| is-dot | 小圆点 | boolean | — | false |
146+
| hidden | 隐藏 badge | boolean | — | false |
147+
| type | 类型 | string | primary / success / warning / danger / info | — |

‎packages/badge/src/main.vue

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
v-show="!hidden && (content || content === 0 || isDot)"
77
v-text="content"
88
class="el-badge__content"
9-
:class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
9+
:class="[
10+
'el-badge__content--' + type,
11+
{
12+
'is-fixed': $slots.default,
13+
'is-dot': isDot
14+
}
15+
]">
1016
</sup>
1117
</transition>
1218
</div>
@@ -20,7 +26,13 @@ export default {
2026
value: {},
2127
max: Number,
2228
isDot: Boolean,
23-
hidden: Boolean
29+
hidden: Boolean,
30+
type: {
31+
type: String,
32+
validator(val) {
33+
return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
34+
}
35+
}
2436
},
2537
2638
computed: {

‎packages/theme-chalk/src/badge.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,21 @@
3737
right: 0;
3838
border-radius: 50%;
3939
}
40+
41+
@each $type in (primary, success, warning, info, danger) {
42+
@include m($type) {
43+
@if $type == primary {
44+
background-color: $--color-primary;
45+
} @else if $type == success {
46+
background-color: $--color-success;
47+
} @else if $type == warning {
48+
background-color: $--color-warning;
49+
} @else if $type == info {
50+
background-color: $--color-info;
51+
} @else {
52+
background-color: $--color-danger;
53+
}
54+
}
55+
}
4056
}
4157
}

0 commit comments

Comments
 (0)