From 38c4f506e7c851d30ee324197d32fbf986ee3ec0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 26 Nov 2020 23:04:13 +0800
Subject: [PATCH] docs(Badge): add content slot demo (#7647)

* docs(Badge): add content slot demo

* docs: fix content
---
 src/badge/README.md                           | 70 ++++++++++++++++---
 src/badge/README.zh-CN.md                     | 51 +++++++++++++-
 src/badge/demo/index.vue                      | 48 ++++++++++++-
 .../test/__snapshots__/demo.spec.js.snap      | 36 +++++++++-
 4 files changed, 188 insertions(+), 17 deletions(-)

diff --git a/src/badge/README.md b/src/badge/README.md
index dc926d836..2f5829491 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -14,7 +14,13 @@ Vue.use(Badge);
 ### Basic Usage
 
 ```html
-<van-badge content="5">
+<van-badge :content="5">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10">
+  <div class="child" />
+</van-badge>
+<van-badge content="Hot">
   <div class="child" />
 </van-badge>
 <van-badge dot>
@@ -23,8 +29,8 @@ Vue.use(Badge);
 
 <style>
   .child {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: #f2f3f5;
     border-radius: 4px;
   }
@@ -34,10 +40,13 @@ Vue.use(Badge);
 ### Max
 
 ```html
-<van-badge content="20" max="9">
+<van-badge :content="20" max="9">
   <div class="child" />
 </van-badge>
-<van-badge content="200" max="99">
+<van-badge :content="50" max="20">
+  <div class="child" />
+</van-badge>
+<van-badge :content="200" max="99">
   <div class="child" />
 </van-badge>
 ```
@@ -45,7 +54,10 @@ Vue.use(Badge);
 ### Custom Color
 
 ```html
-<van-badge content="5" color="#1989fa">
+<van-badge :content="5" color="#1989fa">
+  <div class="child" />
+</van-badge>
+<van-badge :content="10" color="#1989fa">
   <div class="child" />
 </van-badge>
 <van-badge dot color="#1989fa">
@@ -53,10 +65,45 @@ Vue.use(Badge);
 </van-badge>
 ```
 
-### Standaline
+### Custom Content
+
+Use `content` slot to custom :content of badge.
 
 ```html
-<van-badge content="200" max="99" />
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="success" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="cross" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="down" class="badge-icon" />
+  </template>
+</van-badge>
+```
+
+```css
+.badge-icon {
+  display: block;
+  font-size: 10px;
+  line-height: 16px;
+}
+```
+
+### Standalone
+
+```html
+<van-badge :content="20" />
+
+<van-badge :content="200" max="99" />
 ```
 
 ## API
@@ -72,9 +119,10 @@ Vue.use(Badge);
 
 ### Slots
 
-| Name    | Description  |
-| ------- | ------------ |
-| default | Default slot |
+| Name    | Description          |
+| ------- | -------------------- |
+| default | Default slot         |
+| content | Custom badge content |
 
 ### Less Variables
 
diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md
index 67fbac954..de4701a14 100644
--- a/src/badge/README.zh-CN.md
+++ b/src/badge/README.zh-CN.md
@@ -23,14 +23,20 @@ Vue.use(Badge);
 <van-badge :content="5">
   <div class="child" />
 </van-badge>
+<van-badge :content="10">
+  <div class="child" />
+</van-badge>
+<van-badge content="Hot">
+  <div class="child" />
+</van-badge>
 <van-badge dot>
   <div class="child" />
 </van-badge>
 
 <style>
   .child {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: #f2f3f5;
     border-radius: 4px;
   }
@@ -45,6 +51,9 @@ Vue.use(Badge);
 <van-badge :content="20" max="9">
   <div class="child" />
 </van-badge>
+<van-badge :content="50" max="20">
+  <div class="child" />
+</van-badge>
 <van-badge :content="200" max="99">
   <div class="child" />
 </van-badge>
@@ -58,16 +67,54 @@ Vue.use(Badge);
 <van-badge :content="5" color="#1989fa">
   <div class="child" />
 </van-badge>
+<van-badge :content="10" color="#1989fa">
+  <div class="child" />
+</van-badge>
 <van-badge dot color="#1989fa">
   <div class="child" />
 </van-badge>
 ```
 
+### 自定义徽标内容
+
+通过 `content` 插槽可以自定义徽标的内容，比如插入一个图标。
+
+```html
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="success" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="cross" class="badge-icon" />
+  </template>
+</van-badge>
+<van-badge>
+  <div class="child" />
+  <template #content>
+    <van-icon name="down" class="badge-icon" />
+  </template>
+</van-badge>
+```
+
+```css
+.badge-icon {
+  display: block;
+  font-size: 10px;
+  line-height: 16px;
+}
+```
+
 ### 独立展示
 
 当 Badge 没有子元素时，会作为一个独立的元素进行展示。
 
 ```html
+<van-badge :content="20" />
+
 <van-badge :content="200" max="99" />
 ```
 
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index c7558afc4..aa00ee45d 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -4,6 +4,12 @@
       <van-badge content="5">
         <div class="child" />
       </van-badge>
+      <van-badge content="10">
+        <div class="child" />
+      </van-badge>
+      <van-badge content="Hot">
+        <div class="child" />
+      </van-badge>
       <van-badge dot>
         <div class="child" />
       </van-badge>
@@ -13,6 +19,9 @@
       <van-badge content="20" max="9">
         <div class="child" />
       </van-badge>
+      <van-badge content="50" max="20">
+        <div class="child" />
+      </van-badge>
       <van-badge content="200" max="99">
         <div class="child" />
       </van-badge>
@@ -22,13 +31,38 @@
       <van-badge content="5" :color="BLUE">
         <div class="child" />
       </van-badge>
+      <van-badge content="10" :color="BLUE">
+        <div class="child" />
+      </van-badge>
       <van-badge dot :color="BLUE">
         <div class="child" />
       </van-badge>
     </demo-block>
 
+    <demo-block :title="t('customContent')">
+      <van-badge>
+        <div class="child" />
+        <template #content>
+          <van-icon name="success" class="badge-icon" />
+        </template>
+      </van-badge>
+      <van-badge>
+        <div class="child" />
+        <template #content>
+          <van-icon name="cross" class="badge-icon" />
+        </template>
+      </van-badge>
+      <van-badge>
+        <div class="child" />
+        <template #content>
+          <van-icon name="down" class="badge-icon" />
+        </template>
+      </van-badge>
+    </demo-block>
+
     <demo-block :title="t('standalone')">
-      <van-badge content="200" max="99" style="margin-left: 16px;" />
+      <van-badge content="20" style="margin-left: 16px;" />
+      <van-badge content="200" max="99" style="margin-left: 12px;" />
     </demo-block>
   </demo-section>
 </template>
@@ -42,11 +76,13 @@ export default {
       max: '最大值',
       standalone: '独立展示',
       customColor: '自定义颜色',
+      customContent: '自定义徽标内容',
     },
     'en-US': {
       max: 'Max',
       standalone: 'Standalone',
       customColor: 'Custom Color',
+      customContent: 'Custom Content',
     },
   },
 
@@ -69,10 +105,16 @@ export default {
   }
 
   .child {
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     background: @gray-2;
     border-radius: 4px;
   }
+
+  .badge-icon {
+    display: block;
+    font-size: 10px;
+    line-height: 16px;
+  }
 }
 </style>
diff --git a/src/badge/test/__snapshots__/demo.spec.js.snap b/src/badge/test/__snapshots__/demo.spec.js.snap
index 29e88b7b1..7d4fd4dea 100644
--- a/src/badge/test/__snapshots__/demo.spec.js.snap
+++ b/src/badge/test/__snapshots__/demo.spec.js.snap
@@ -7,6 +7,14 @@ exports[`renders demo correctly 1`] = `
       <div class="child"></div>
       <div class="van-badge van-badge--fixed">5</div>
     </div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed">10</div>
+    </div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed">Hot</div>
+    </div>
     <div class="van-badge__wrapper">
       <div class="child"></div>
       <div class="van-badge van-badge--dot van-badge--fixed"></div>
@@ -17,6 +25,10 @@ exports[`renders demo correctly 1`] = `
       <div class="child"></div>
       <div class="van-badge van-badge--fixed">9+</div>
     </div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed">20+</div>
+    </div>
     <div class="van-badge__wrapper">
       <div class="child"></div>
       <div class="van-badge van-badge--fixed">99+</div>
@@ -27,13 +39,35 @@ exports[`renders demo correctly 1`] = `
       <div class="child"></div>
       <div class="van-badge van-badge--fixed" style="background: rgb(25, 137, 250);">5</div>
     </div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed" style="background: rgb(25, 137, 250);">10</div>
+    </div>
     <div class="van-badge__wrapper">
       <div class="child"></div>
       <div class="van-badge van-badge--dot van-badge--fixed" style="background: rgb(25, 137, 250);"></div>
     </div>
   </div>
   <div>
-    <div class="van-badge" style="margin-left: 16px;">99+</div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed"><i class="badge-icon van-icon van-icon-success">
+          <!----></i></div>
+    </div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed"><i class="badge-icon van-icon van-icon-cross">
+          <!----></i></div>
+    </div>
+    <div class="van-badge__wrapper">
+      <div class="child"></div>
+      <div class="van-badge van-badge--fixed"><i class="badge-icon van-icon van-icon-down">
+          <!----></i></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-badge" style="margin-left: 16px;">20</div>
+    <div class="van-badge" style="margin-left: 12px;">99+</div>
   </div>
 </div>
 `;