From 272a89423e38c264e62dbef31ec0374f3a497269 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 15 Aug 2020 07:27:35 +0800
Subject: [PATCH] docs: remove legacy slot usage

---
 src/count-down/README.md                      |  2 +-
 src/count-down/README.zh-CN.md                | 12 ++++----
 src/count-down/demo/index.vue                 | 14 ++++-----
 src/form/demo/FieldTypeArea.vue               | 27 ++++++++---------
 src/form/demo/FieldTypeCalendar.vue           | 15 +++++-----
 src/form/demo/FieldTypeDatetimePicker.vue     | 27 ++++++++---------
 src/form/demo/FieldTypePicker.vue             | 29 ++++++++++---------
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 src/grid/test/index.spec.js                   |  4 ++-
 src/radio/demo/index.vue                      |  8 +++--
 src/switch/demo/index.vue                     |  4 ++-
 src/tree-select/demo/index.vue                |  2 +-
 12 files changed, 78 insertions(+), 68 deletions(-)

diff --git a/src/count-down/README.md b/src/count-down/README.md
index 0ed8d66f8..d6240004e 100644
--- a/src/count-down/README.md
+++ b/src/count-down/README.md
@@ -43,7 +43,7 @@ export default {
 
 ```html
 <van-count-down :time="time">
-  <template v-slot="timeData">
+  <template #default="timeData">
     <span class="block">{{ timeData.hours }}</span>
     <span class="colon">:</span>
     <span class="block">{{ timeData.minutes }}</span>
diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md
index cfd1aada5..b37b30448 100644
--- a/src/count-down/README.zh-CN.md
+++ b/src/count-down/README.zh-CN.md
@@ -13,7 +13,7 @@ Vue.use(CountDown);
 
 ### 基础用法
 
-`time`属性表示倒计时总时长，单位为毫秒
+`time` 属性表示倒计时总时长，单位为毫秒。
 
 ```html
 <van-count-down :time="time" />
@@ -31,7 +31,7 @@ export default {
 
 ### 自定义格式
 
-通过`format`属性设置倒计时文本的内容
+通过 `format` 属性设置倒计时文本的内容。
 
 ```html
 <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
@@ -39,7 +39,7 @@ export default {
 
 ### 毫秒级渲染
 
-倒计时默认每秒渲染一次，设置`millisecond`属性可以开启毫秒级渲染
+倒计时默认每秒渲染一次，设置 `millisecond` 属性可以开启毫秒级渲染。
 
 ```html
 <van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
@@ -47,11 +47,11 @@ export default {
 
 ### 自定义样式
 
-通过插槽自定义倒计时的样式，`timeData`对象格式见下方表格
+通过插槽自定义倒计时的样式，`timeData` 对象格式见下方表格。
 
 ```html
 <van-count-down :time="time">
-  <template v-slot="timeData">
+  <template #default="timeData">
     <span class="block">{{ timeData.hours }}</span>
     <span class="colon">:</span>
     <span class="block">{{ timeData.minutes }}</span>
@@ -79,7 +79,7 @@ export default {
 
 ### 手动控制
 
-通过 ref 获取到组件实例后，可以调用`start`、`pause`、`reset`方法
+通过 ref 获取到组件实例后，可以调用 `start`、`pause`、`reset` 方法。
 
 ```html
 <van-count-down
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index 47619b927..5b583dbc8 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -14,14 +14,12 @@
 
     <demo-block :title="t('customStyle')">
       <van-count-down :time="time">
-        <template v-slot="currentTime">
-          <div>
-            <span class="block">{{ currentTime.hours }}</span>
-            <span class="colon">:</span>
-            <span class="block">{{ currentTime.minutes }}</span>
-            <span class="colon">:</span>
-            <span class="block">{{ currentTime.seconds }}</span>
-          </div>
+        <template #default="currentTime">
+          <span class="block">{{ currentTime.hours }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ currentTime.minutes }}</span>
+          <span class="colon">:</span>
+          <span class="block">{{ currentTime.seconds }}</span>
         </template>
       </van-count-down>
     </demo-block>
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index f8bcfeb5a..73e96d06e 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -8,19 +8,20 @@
     :placeholder="t('placeholder')"
     @click="showArea = true"
   >
-    <van-popup
-      v-model="showArea"
-      round
-      slot="extra"
-      position="bottom"
-      get-container="body"
-    >
-      <van-area
-        :area-list="t('areaList')"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-      />
-    </van-popup>
+    <template #extra>
+      <van-popup
+        v-model="showArea"
+        round
+        position="bottom"
+        get-container="body"
+      >
+        <van-area
+          :area-list="t('areaList')"
+          @confirm="onConfirm"
+          @cancel="onCancel"
+        />
+      </van-popup>
+    </template>
   </van-field>
 </template>
 
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index 485a78c3b..01d4e5d72 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -8,13 +8,14 @@
     :placeholder="t('placeholder')"
     @click="showCalendar = true"
   >
-    <van-calendar
-      v-model="showCalendar"
-      round
-      slot="extra"
-      get-container="body"
-      @confirm="onConfirm"
-    />
+    <template #extra>
+      <van-calendar
+        v-model="showCalendar"
+        round
+        get-container="body"
+        @confirm="onConfirm"
+      />
+    </template>
   </van-field>
 </template>
 
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index d044c9c06..72629cf65 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -8,19 +8,20 @@
     :placeholder="t('placeholder')"
     @click="showPicker = true"
   >
-    <van-popup
-      v-model="showPicker"
-      round
-      slot="extra"
-      position="bottom"
-      get-container="body"
-    >
-      <van-datetime-picker
-        type="time"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-      />
-    </van-popup>
+    <template #extra>
+      <van-popup
+        v-model="showPicker"
+        round
+        position="bottom"
+        get-container="body"
+      >
+        <van-datetime-picker
+          type="time"
+          @confirm="onConfirm"
+          @cancel="onCancel"
+        />
+      </van-popup>
+    </template>
   </van-field>
 </template>
 
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index bf70f9787..779a4e89b 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -8,20 +8,21 @@
     :placeholder="t('placeholder')"
     @click="showPicker = true"
   >
-    <van-popup
-      v-model="showPicker"
-      round
-      slot="extra"
-      position="bottom"
-      get-container="body"
-    >
-      <van-picker
-        show-toolbar
-        :columns="t('textColumns')"
-        @confirm="onConfirm"
-        @cancel="onCancel"
-      />
-    </van-popup>
+    <template #extra>
+      <van-popup
+        v-model="showPicker"
+        round
+        position="bottom"
+        get-container="body"
+      >
+        <van-picker
+          show-toolbar
+          :columns="t('textColumns')"
+          @confirm="onConfirm"
+          @cancel="onCancel"
+        />
+      </van-popup>
+    </template>
   </van-field>
 </template>
 
diff --git a/src/grid/test/__snapshots__/index.spec.js.snap b/src/grid/test/__snapshots__/index.spec.js.snap
index e7d763ddc..92eb96f44 100644
--- a/src/grid/test/__snapshots__/index.spec.js.snap
+++ b/src/grid/test/__snapshots__/index.spec.js.snap
@@ -14,7 +14,7 @@ exports[`render icon-slot 1`] = `
   <div class="van-grid-item" style="flex-basis: 25%;">
     <div class="van-grid-item__content van-grid-item__content--center van-hairline">
       <div class="van-grid-item__icon-wrapper">
-        <div></div>
+        <div>Custom Icon</div>
         <div class="van-info">1</div>
       </div>
     </div>
diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js
index 77377b69f..166640e38 100644
--- a/src/grid/test/index.spec.js
+++ b/src/grid/test/index.spec.js
@@ -50,7 +50,9 @@ test('render icon-slot', () => {
     template: `
       <van-grid icon-size="10">
         <van-grid-item info="1">
-          <div slot="icon" />
+          <template #icon>
+            <div>Custom Icon</div>
+          </template>
         </van-grid-item>
       </van-grid>
     `,
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index 0a6762822..ec64036d4 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -82,10 +82,14 @@
       <van-radio-group v-model="radio5">
         <van-cell-group>
           <van-cell clickable :title="t('radio') + 1" @click="radio5 = '1'">
-            <van-radio name="1" slot="right-icon" />
+            <template #right-icon>
+              <van-radio name="1" />
+            </template>
           </van-cell>
           <van-cell clickable :title="t('radio') + 2" @click="radio5 = '2'">
-            <van-radio name="2" slot="right-icon" />
+            <template #right-icon>
+              <van-radio name="2" />
+            </template>
           </van-cell>
         </van-cell-group>
       </van-radio-group>
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index 686676ab9..2f44b1c55 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -30,7 +30,9 @@
 
     <demo-block :title="t('withCell')">
       <van-cell center :title="t('title')">
-        <van-switch v-model="checked5" slot="right-icon" size="24" />
+        <template #right-icon>
+          <van-switch v-model="checked5" size="24" />
+        </template>
       </van-cell>
     </demo-block>
   </demo-section>
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index 097946964..542f0b1a1 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -22,7 +22,7 @@
         :items="simpleItems"
         :main-active-index.sync="activeIndex3"
       >
-        <template slot="content">
+        <template #content>
           <van-image
             v-if="activeIndex3 === 0"
             :show-loading="false"