From c0e28222ffd6ef5ea60cf4a82b15ea7d8d601424 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=8F=A8=E5=8F=A8?= <hi@wangdaodao.com>
Date: Thu, 13 Jun 2024 11:35:06 +0800
Subject: [PATCH] Feat: Badge add some new features.

---
 examples/docs/en-US/badge.md | 95 +++++++++++++++++++++++-----------
 examples/docs/es/badge.md    | 95 +++++++++++++++++++++++-----------
 examples/docs/fr-FR/badge.md | 95 +++++++++++++++++++++++-----------
 examples/docs/zh-CN/badge.md | 98 +++++++++++++++++++++++++-----------
 packages/badge/src/main.vue  | 27 ++++++++--
 types/badge.d.ts             | 15 ++++++
 6 files changed, 306 insertions(+), 119 deletions(-)

diff --git a/examples/docs/en-US/badge.md b/examples/docs/en-US/badge.md
index 9f9a687d701..48356163415 100644
--- a/examples/docs/en-US/badge.md
+++ b/examples/docs/en-US/badge.md
@@ -9,35 +9,62 @@ 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">
-  <el-button size="small">comments</el-button>
-</el-badge>
-<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">
-    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
-  </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item class="clearfix">
-      comments
-      <el-badge class="mark" :value="12" />
-    </el-dropdown-item>
-    <el-dropdown-item class="clearfix">
-      replies
-      <el-badge class="mark" :value="3" />
-    </el-dropdown-item>
-  </el-dropdown-menu>
-</el-dropdown>
-
+<template>
+  <div>
+    <div>
+      <el-badge :value="12" class="item">
+        <el-button size="small">comments</el-button>
+      </el-badge>
+      <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" class="item">
+        <span class="el-dropdown-link">
+          Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item class="clearfix">
+            comments
+            <el-badge class="mark" :value="12" />
+          </el-dropdown-item>
+          <el-dropdown-item class="clearfix">
+            replies
+            <el-badge class="mark" :value="3" />
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </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 |
diff --git a/examples/docs/es/badge.md b/examples/docs/es/badge.md
index 8001fa0eec5..17e736b8406 100644
--- a/examples/docs/es/badge.md
+++ b/examples/docs/es/badge.md
@@ -9,35 +9,62 @@ 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">
-  <el-button size="small">comments</el-button>
-</el-badge>
-<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">
-    Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
-  </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item class="clearfix">
-      comments
-      <el-badge class="mark" :value="12" />
-    </el-dropdown-item>
-    <el-dropdown-item class="clearfix">
-      replies
-      <el-badge class="mark" :value="3" />
-    </el-dropdown-item>
-  </el-dropdown-menu>
-</el-dropdown>
-
+<template>
+  <div>
+    <div>
+      <el-badge :value="12" class="item">
+        <el-button size="small">comments</el-button>
+      </el-badge>
+      <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" class="item">
+        <span class="el-dropdown-link">
+          Click Me<i class="el-icon-caret-bottom el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item class="clearfix">
+            comments
+            <el-badge class="mark" :value="12" />
+          </el-dropdown-item>
+          <el-dropdown-item class="clearfix">
+            replies
+            <el-badge class="mark" :value="3" />
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </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 |
 
diff --git a/examples/docs/fr-FR/badge.md b/examples/docs/fr-FR/badge.md
index cf21b165f82..8a4dbdbd2b0 100644
--- a/examples/docs/fr-FR/badge.md
+++ b/examples/docs/fr-FR/badge.md
@@ -9,35 +9,62 @@ 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">
-  <el-button size="small">Commentaires</el-button>
-</el-badge>
-<el-badge :value="3" class="item">
-  <el-button size="small">Réponses</el-button>
-</el-badge>
-<el-badge :value="1" class="item" type="primary">
-  <el-button size="small">Commentaires</el-button>
-</el-badge>
-<el-badge :value="2" class="item" type="warning">
-  <el-button size="small">Réponses</el-button>
-</el-badge>
-
-<el-dropdown trigger="click">
-  <span class="el-dropdown-link">
-    Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
-  </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item class="clearfix">
-      Commentaires
-      <el-badge class="mark" :value="12" />
-    </el-dropdown-item>
-    <el-dropdown-item class="clearfix">
-      Réponses
-      <el-badge class="mark" :value="3" />
-    </el-dropdown-item>
-  </el-dropdown-menu>
-</el-dropdown>
-
+<template>
+  <div>
+    <div>
+      <el-badge :value="12" class="item">
+        <el-button size="small">Commentaires</el-button>
+      </el-badge>
+      <el-badge :value="3" class="item">
+        <el-button size="small">Réponses</el-button>
+      </el-badge>
+      <el-badge :value="1" class="item" type="primary">
+        <el-button size="small">Commentaires</el-button>
+      </el-badge>
+      <el-badge :value="2" class="item" type="warning">
+        <el-button size="small">Réponses</el-button>
+      </el-badge>
+      <el-dropdown trigger="click" class="item">
+        <span class="el-dropdown-link">
+          Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item class="clearfix">
+            Commentaires
+            <el-badge class="mark" :value="12" />
+          </el-dropdown-item>
+          <el-dropdown-item class="clearfix">
+            Réponses
+            <el-badge class="mark" :value="3" />
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </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 |
\ No newline at end of file
diff --git a/examples/docs/zh-CN/badge.md b/examples/docs/zh-CN/badge.md
index b6cabcef431..1b78a8231d5 100644
--- a/examples/docs/zh-CN/badge.md
+++ b/examples/docs/zh-CN/badge.md
@@ -8,35 +8,65 @@
 :::demo 定义`value`属性，它接受`Number`或者`String`。
 
 ```html
-<el-badge :value="12" class="item">
-  <el-button size="small">评论</el-button>
-</el-badge>
-<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">
-    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
-  </span>
-  <el-dropdown-menu slot="dropdown">
-    <el-dropdown-item class="clearfix">
-      评论
-      <el-badge class="mark" :value="12" />
-    </el-dropdown-item>
-    <el-dropdown-item class="clearfix">
-      回复
-      <el-badge class="mark" :value="3" />
-    </el-dropdown-item>
-  </el-dropdown-menu>
-</el-dropdown>
-
+<template>
+  <div>
+    <div>
+      <el-badge :value="0" class="item">
+        <el-button size="small">评论</el-button>
+      </el-badge>
+      <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-badge :value="2" class="item" type="warning">
+        <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>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item class="clearfix">
+            评论
+            <el-badge class="mark" :value="12" />
+          </el-dropdown-item>
+          <el-dropdown-item class="clearfix">
+            回复
+            <el-badge class="mark" :value="3" />
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </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 | 自定义默认内容 |
diff --git a/packages/badge/src/main.vue b/packages/badge/src/main.vue
index fb3051d38f6..790a3740861 100644
--- a/packages/badge/src/main.vue
+++ b/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
+      };
     }
   }
 };
diff --git a/types/badge.d.ts b/types/badge.d.ts
index 38e763f86d1..25de1b6f39b 100644
--- a/types/badge.d.ts
+++ b/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
 }