Feat: Badge add some new features.

examples/docs/en-US/badge.md

@@ -9,20 +9,22 @@ Displays the amount of new messages.
 :::demo The amount is defined with `value` which accepts `Number` or `String`.
 
 ```html
-<el-badge :value="12" class="item">
+<template>
+  <div>
+    <div>
+      <el-badge :value="12" class="item">
         <el-button size="small">comments</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="3" class="item">
+      <el-badge :value="3" class="item">
         <el-button size="small">replies</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="1" class="item" type="primary">
+      <el-badge :value="1" class="item" type="primary">
         <el-button size="small">comments</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="2" class="item" type="warning">
+      <el-badge :value="2" class="item" type="warning">
         <el-button size="small">replies</el-button>
-</el-badge>
+      </el-badge>
-
+      <el-dropdown trigger="click" class="item">
-<el-dropdown trigger="click">
         <span class="el-dropdown-link">
           Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
         </span>
@@ -36,8 +38,33 @@ Displays the amount of new messages.
             <el-badge class="mark" :value="3" />
           </el-dropdown-item>
         </el-dropdown-menu>
-</el-dropdown>
+      </el-dropdown>
-
+    </div>
+    <div style="margin-top: 20px">
+      <el-badge :value="0" :show-zero="show" class="item">
+        <el-button size="small" @click="show = !show">show-zero: {{ show }}</el-button>
+      </el-badge>
+      <el-badge :value="2" class="item" background-color="#8C18FF">
+        <el-button size="small">background-color</el-button>
+      </el-badge>
+      <el-badge :value="1" :badge-style="{'color':'#000'}" class="item" type="primary">
+        <el-button size="small">badge-style</el-button>
+      </el-badge>
+      <el-badge :value="3" :offset="[10, 10]" class="item">
+        <el-button size="small">offset</el-button>
+      </el-badge>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        show: false
+      };
+    }
+  };
+</script>
 <style>
 .item {
   margin-top: 10px;
@@ -122,3 +149,13 @@ Use a red dot to mark content that needs to be noticed.
 | is-dot        | if a little dot is displayed | boolean   |    —           |  false  |
 | hidden        | hidden badge    | boolean         |          —            |  false  |
 | type          | button type     | string          | primary / success / warning / danger / info |   —  |
+| show-zero    | Whether to show badge when value is zero.             | boolean          | — |    true    |
+| background-color    | background color of the dot             | string          | — |    —    |
+| offset    | offset of badge            | [ left:number, top:number ]          | — |    —    |
+| badge-style    | custom style of badge           | object          | — |    —    |
+| badge-class    | custom class of badge        | string          | — |    —    |
+
+### Badge Slot
+| Name | Description |
+|------|--------|
+| default | customize default content |

examples/docs/es/badge.md

@@ -9,20 +9,22 @@ Muestra la cantidad de mensajes nuevos.
 :::demo La cantidad está definida por `value` que acepta `Number` o `String`.
 
 ```html
-<el-badge :value="12" class="item">
+<template>
+  <div>
+    <div>
+      <el-badge :value="12" class="item">
         <el-button size="small">comments</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="3" class="item">
+      <el-badge :value="3" class="item">
         <el-button size="small">replies</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="1" class="item" type="primary">
+      <el-badge :value="1" class="item" type="primary">
         <el-button size="small">comments</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="2" class="item" type="warning">
+      <el-badge :value="2" class="item" type="warning">
         <el-button size="small">replies</el-button>
-</el-badge>
+      </el-badge>
-
+      <el-dropdown trigger="click" class="item">
-<el-dropdown trigger="click">
         <span class="el-dropdown-link">
           Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
         </span>
@@ -36,8 +38,33 @@ Muestra la cantidad de mensajes nuevos.
             <el-badge class="mark" :value="3" />
           </el-dropdown-item>
         </el-dropdown-menu>
-</el-dropdown>
+      </el-dropdown>
-
+    </div>
+    <div style="margin-top: 20px">
+      <el-badge :value="0" :show-zero="show" class="item">
+        <el-button size="small" @click="show = !show">show-zero: {{ show }}</el-button>
+      </el-badge>
+      <el-badge :value="2" class="item" background-color="#8C18FF">
+        <el-button size="small">background-color</el-button>
+      </el-badge>
+      <el-badge :value="1" :badge-style="{'color':'#000'}" class="item" type="primary">
+        <el-button size="small">badge-style</el-button>
+      </el-badge>
+      <el-badge :value="3" :offset="[10, 10]" class="item">
+        <el-button size="small">offset</el-button>
+      </el-badge>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        show: false
+      };
+    }
+  };
+</script>
 <style>
 .item {
   margin-top: 10px;
@@ -122,4 +149,14 @@ Puede utilizar un punto rojo para marcar contenido que debe ser notado.
 | is-dot   | si se debe mostrar un pequeño punto      | boolean        | —                 | false       |
 | hidden   | oculta el badge                    | boolean        | —                 | false       |
 | type     | tipo de botón                            | string         | primary / success / warning / danger / info | — |
+| show-zero    | Si se muestra la insignia a las 00: 00.             | boolean          | — |    true    |
+| background-color    | Color de fondo del punto             | string          | — |    —    |
+| offset    | Desviación de la insignia           | [ left:number, top:number ]          | — |    —    |
+| badge-style    | Estilo personalizado de la insignia           | object          | — |    —    |
+| badge-class    | Categoría personalizada de la insignia        | string          | — |    —    |
+
+### Badge Slot
+| Name | Description |
+|------|--------|
+| default | Personalizar el contenido predeterminado |
 

examples/docs/fr-FR/badge.md

@@ -9,20 +9,22 @@ Affiche le nombre de nouveaux messages.
 :::demo La quantité est définit par `value` qui accepte un `Number` ou un `String`.
 
 ```html
-<el-badge :value="12" class="item">
+<template>
+  <div>
+    <div>
+      <el-badge :value="12" class="item">
         <el-button size="small">Commentaires</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="3" class="item">
+      <el-badge :value="3" class="item">
         <el-button size="small">Réponses</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="1" class="item" type="primary">
+      <el-badge :value="1" class="item" type="primary">
         <el-button size="small">Commentaires</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="2" class="item" type="warning">
+      <el-badge :value="2" class="item" type="warning">
         <el-button size="small">Réponses</el-button>
-</el-badge>
+      </el-badge>
-
+      <el-dropdown trigger="click" class="item">
-<el-dropdown trigger="click">
         <span class="el-dropdown-link">
           Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
         </span>
@@ -36,8 +38,33 @@ Affiche le nombre de nouveaux messages.
             <el-badge class="mark" :value="3" />
           </el-dropdown-item>
         </el-dropdown-menu>
-</el-dropdown>
+      </el-dropdown>
-
+    </div>
+    <div style="margin-top: 20px">
+      <el-badge :value="0" :show-zero="show" class="item">
+        <el-button size="small" @click="show = !show">show-zero: {{ show }}</el-button>
+      </el-badge>
+      <el-badge :value="2" class="item" background-color="#8C18FF">
+        <el-button size="small">background-color</el-button>
+      </el-badge>
+      <el-badge :value="1" :badge-style="{'color':'#000'}" class="item" type="primary">
+        <el-button size="small">badge-style</el-button>
+      </el-badge>
+      <el-badge :value="3" :offset="[10, 10]" class="item">
+        <el-button size="small">offset</el-button>
+      </el-badge>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        show: false
+      };
+    }
+  };
+</script>
 <style>
 .item {
   margin-top: 10px;
@@ -123,3 +150,13 @@ Utilisez un point rouge pour signaler du contenu devant être remarqué.
 | is-dot        | Affiche un point rouge. | boolean   |    —           |  false  |
 | hidden        | Cache le badge.    | boolean         |          —            |  false  |
 | type          | Type du bouton.     | string          | primary / success / warning / danger / info |   —  |
+| show-zero    | Si le badge est affiché lorsque la valeur est zéro.            | boolean          | — |    true    |
+| background-color    | Couleur de fond des points             | string          | — |    —    |
+| offset    | Décalage de badge            | [ left:number, top:number ]          | — |    —    |
+| badge-style    | Styles personnalisés de badges           | object          | — |    —    |
+| badge-class    | Catégories personnalisées de badges        | string          | — |    —    |
+
+### Badge Slot
+| Name | Description |
+|------|--------|
+| default | Personnaliser le contenu par défaut |

examples/docs/zh-CN/badge.md

@@ -8,20 +8,25 @@
 :::demo 定义`value`属性，它接受`Number`或者`String`。
 
 ```html
-<el-badge :value="12" class="item">
+<template>
+  <div>
+    <div>
+      <el-badge :value="0" class="item">
         <el-button size="small">评论</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="3" class="item">
+      <el-badge :value="3" class="item">
         <el-button size="small">回复</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="1" class="item" type="primary">
+      <el-badge :value="1" class="item" type="primary">
         <el-button size="small">评论</el-button>
-</el-badge>
+      </el-badge>
-<el-badge :value="2" class="item" type="warning">
+      <el-badge :value="2" class="item" type="warning">
         <el-button size="small">回复</el-button>
-</el-badge>
+      </el-badge>
-
+      <el-badge :value="2" class="item" type="warning">
-<el-dropdown trigger="click">
+        <i class="el-icon-setting"></i>
+      </el-badge>
+      <el-dropdown class="item" trigger="click">
         <span class="el-dropdown-link">
           点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
         </span>
@@ -35,8 +40,33 @@
             <el-badge class="mark" :value="3" />
           </el-dropdown-item>
         </el-dropdown-menu>
-</el-dropdown>
+      </el-dropdown>
-
+    </div>
+    <div style="margin-top: 20px">
+      <el-badge :value="0" :show-zero="show" class="item">
+        <el-button size="small" @click="show = !show">show-zero: {{ show }}</el-button>
+      </el-badge>
+      <el-badge :value="2" class="item" background-color="#8C18FF">
+        <el-button size="small">background-color</el-button>
+      </el-badge>
+      <el-badge :value="1" :badge-style="{'color':'#000'}" class="item" type="primary">
+        <el-button size="small">badge-style</el-button>
+      </el-badge>
+      <el-badge :value="3" :offset="[10, 10]" class="item">
+        <el-button size="small">offset</el-button>
+      </el-badge>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        show: false
+      };
+    }
+  };
+</script>
 <style>
 .item {
   margin-top: 10px;
@@ -118,3 +148,13 @@
 | is-dot       | 小圆点           | boolean         |         —             |  false  |
 | hidden       | 隐藏 badge       | boolean         |         —             |  false  |
 | type         | 类型             | string          | primary / success / warning / danger / info |    —    |
+| show-zero    | 值为零时是否显示 Badge             | boolean          | — |    true    |
+| background-color    | 背景色             | string          | — |    —    |
+| offset    | badge 的偏移量             | [ left:number, top:number ]          | — |    —    |
+| badge-style    | 自定义 badge 样式，如果样式复杂建议使用 `badge-class`            | object          | — |    —    |
+| badge-class    | 自定义 badge 类名            | string          | — |    —    |
+
+### Badge Slot
+| name | 说明 |
+|------|--------|
+| default | 自定义默认内容 |

packages/badge/src/main.vue

@@ -3,11 +3,13 @@
     <slot></slot>
     <transition name="el-zoom-in-center">
       <sup
-        v-show="!hidden && (content || content === 0 || isDot)"
+        v-show="!hidden && (content || isDot)"
         v-text="content"
         class="el-badge__content"
+        :style="computedStyle"
         :class="[
-          type ? 'el-badge__content--' + type : null,
+          badgeClass,
+          type ? 'el-badge__content--' + type : '',
           {
             'is-fixed': $slots.default,
             'is-dot': isDot
@@ -32,6 +34,17 @@ export default {
       validator(val) {
         return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
       }
+    },
+    showZero: {
+      type: Boolean,
+      default: true
+    },
+    offset: Array,
+    badgeClass: String,
+    backgroundColor: String,
+    badgeStyle: {
+      type: Object,
+      default: () => ({})
     }
   },
 
@@ -46,7 +59,15 @@ export default {
         return max < value ? `${max}+` : value;
       }
 
-      return value;
+      return value === 0 && this.showZero ? '0' : value;
+    },
+    computedStyle() {
+      return {
+        'background-color': this.backgroundColor,
+        'margin-right': this.offset ? -this.offset[0] + 'px' : 0,
+        'margin-top': this.offset ? this.offset[1] + 'px' : 0,
+        ...this.badgeStyle
+      };
     }
   }
 };

types/badge.d.ts

@@ -1,5 +1,8 @@
 import { ElementUIComponent } from './component'
 
+/** Badge type */
+export type BadgeType = 'primary' | 'success' | 'warning' | 'info' | 'danger'
+
 /** Badge Component */
 export declare class ElBadge extends ElementUIComponent {
   /** Display value */
@@ -13,4 +16,16 @@ export declare class ElBadge extends ElementUIComponent {
 
   /** Hidden badge */
   hidden: boolean
+
+  showZero: boolean
+
+  offset: [number, number]
+
+  badgeClass: string
+
+  backgroundColor: string
+  
+  badgeStyle: object
+
+  type: BadgeType
 }