Badge: add type attribute (#12991)

* badge: add type attribute

* Update badge.md

examples/docs/en-US/badge.md

@@ -15,6 +15,12 @@ Displays the amount of new messages.
 <el-badge :value="3" class="item">
   <el-button size="small">replies</el-button>
 </el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">replies</el-button>
+</el-badge>
 
 <el-dropdown trigger="click">
   <span class="el-dropdown-link">
@@ -130,9 +136,10 @@ Use a red dot to mark content that needs to be noticed.
 </style>
 
 ### Attributes
-| Attribute          | Description            | Type            | Accepted Values                 | Default   |
+| Attribute     | Description     | Type            | Accepted Values       | Default |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| value          | display value      | string, number          |          —             |    —     |
+| value         | display value   | string, number  |          —            |    —    |
-| max          |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |
+| max           |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |
-| is-dot       | if a little dot is displayed   | boolean  |  —  |  false |
+| is-dot        | if a little dot is displayed | boolean   |    —           |  false  |
-| hidden | hidden badge | boolean | — | false |
+| hidden        | hidden badge    | boolean         |          —            |  false  |
+| type          | button type     | string          | primary / success / warning / danger / info |   —  |

examples/docs/es/badge.md

@@ -15,6 +15,12 @@ Muestra la cantidad de mensajes nuevos.
 <el-badge :value="3" class="item">
   <el-button size="small">replies</el-button>
 </el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">comments</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">replies</el-button>
+</el-badge>
 
 <el-dropdown trigger="click">
   <span class="el-dropdown-link">
@@ -136,3 +142,4 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
 | max      | valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number` | number         | —                 | —           |
 | is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |
 | hidden   | hidden badge                             | boolean        | —                 | false       |
+| type     | tipo de botón                            | string         | primary / success / warning / danger / info | — |

examples/docs/zh-CN/badge.md

@@ -20,6 +20,12 @@
 <el-badge :value="3" class="item">
   <el-button size="small">回复</el-button>
 </el-badge>
+<el-badge :value="1" class="item" type="primary">
+  <el-button size="small">评论</el-button>
+</el-badge>
+<el-badge :value="2" class="item" type="warning">
+  <el-button size="small">回复</el-button>
+</el-badge>
 
 <el-dropdown trigger="click">
   <span class="el-dropdown-link">
@@ -133,8 +139,9 @@
 
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
-|-------------  |---------------- |---------------- |---------------------- |-------- |
+|------------- |---------------- |---------------- |---------------------- |-------- |
-| value          | 显示值      | string, number          |          —             |    —     |
+| value        | 显示值           | string, number  |          —            |    —    |
-| max          |  最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
+| max          | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
-| is-dot       | 小圆点    | boolean  |  —  |  false |
+| is-dot       | 小圆点           | boolean         |         —             |  false  |
-| hidden | 隐藏 badge | boolean | — | false |
+| hidden       | 隐藏 badge       | boolean         |         —             |  false  |
+| type         | 类型             | string          | primary / success / warning / danger / info |    —    |

packages/badge/src/main.vue

@@ -6,7 +6,13 @@
         v-show="!hidden && (content || content === 0 || isDot)"
         v-text="content"
         class="el-badge__content"
-        :class="{ 'is-fixed': $slots.default, 'is-dot': isDot }">
+        :class="[
+          'el-badge__content--' + type,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
       </sup>
     </transition>
   </div>
@@ -20,7 +26,13 @@ export default {
     value: {},
     max: Number,
     isDot: Boolean,
-    hidden: Boolean
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
   },
 
   computed: {

packages/theme-chalk/src/badge.scss

@@ -37,5 +37,21 @@
       right: 0;
       border-radius: 50%;
     }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $--color-primary;
+        } @else if $type == success {
+          background-color: $--color-success;
+        } @else if $type == warning {
+          background-color: $--color-warning;
+        } @else if $type == info {
+          background-color: $--color-info;
+        } @else {
+          background-color: $--color-danger;
+        }
+      }
+    }
   }
 }