From f36961fe2919a171048ec97e6a5c1f129ffad78e Mon Sep 17 00:00:00 2001
From: lmx-Hexagram <52130356+lmx-Hexagram@users.noreply.github.com>
Date: Fri, 20 Mar 2020 14:12:00 +0800
Subject: [PATCH] docs: change `slot` to `#` (#5858)

* docs(SwipeCell): change "slot" to "v-slot"

* docs(SwipeCell): change `v-slot` to`#`

* docs(cell): change `slot` to `#`

* docs(checkbox): change `slot` to `v-slot`

* docs(field): change `slot` to `v-slot`

* docs(checkbox): remove wrong comment

* docs(radio): change `slot` to `#`

* docs(search): change `slot` to `#`

* docs(slider): change `slot` to `#`

* docs(switch): change `slot` to `#`

* docs(PullRefresh): change `slot` to `#`

* docs(collapse): change `slot` to `#`

* docs(panel): change `slot` to `#`

* docs(swipe): change `slot` to `#`

* docs(navbar): change `slot` to `#`

* docs(tab): change `slot` to `#`

* docs(tabber): change `slot` to `#`

* docs(TreeSelect): change `slot` to `#`

* docs(card): change `slot` to `#`

* docs(submitBar): change `slot` to `#`

* docs(sku): change `slot` to `#` unsure

* docs(cell): delete waste blank line

* docs(panel): fix indentation

* docs(PullRefresh): change "count" to "Refresh Count"

* docs(radio): delete waste blank line

* docs(search): move props above the event

* docs(submitBar): delete waste `<span>`

* docs(swipCell): delete waste blank line

* docs(tabbar): merge `<img>` into one line
---
 src/card/README.md               |  8 +++---
 src/card/README.zh-CN.md         |  8 +++---
 src/cell/README.md               | 23 +++++++++--------
 src/cell/README.zh-CN.md         | 13 +++++-----
 src/checkbox/README.md           | 24 ++++++++++++-----
 src/checkbox/README.zh-CN.md     | 32 +++++++++++++++--------
 src/collapse/README.md           |  4 ++-
 src/collapse/README.zh-CN.md     |  4 ++-
 src/field/README.md              |  4 ++-
 src/field/README.zh-CN.md        |  4 ++-
 src/nav-bar/README.md            |  6 +++--
 src/nav-bar/README.zh-CN.md      |  4 ++-
 src/panel/README.md              |  4 +--
 src/panel/README.zh-CN.md        |  4 +--
 src/pull-refresh/README.md       | 38 +++++++++++++++------------
 src/pull-refresh/README.zh-CN.md | 38 +++++++++++++++------------
 src/radio/README.md              | 36 +++++++++++++++++---------
 src/radio/README.zh-CN.md        | 44 +++++++++++++++++++++-----------
 src/search/README.md             |  5 +++-
 src/search/README.zh-CN.md       |  5 +++-
 src/sku/README.md                |  4 +--
 src/sku/README.zh-CN.md          |  4 +--
 src/slider/README.md             |  8 +++---
 src/slider/README.zh-CN.md       |  8 +++---
 src/submit-bar/README.md         |  6 ++---
 src/submit-bar/README.zh-CN.md   |  6 ++---
 src/swipe/README.md              | 26 ++++++++++++++++---
 src/swipe/README.zh-CN.md        | 26 ++++++++++++++++---
 src/switch/README.md             |  4 ++-
 src/switch/README.zh-CN.md       |  4 ++-
 src/tab/README.md                |  6 ++---
 src/tab/README.zh-CN.md          |  6 ++---
 src/tabbar/README.md             |  8 +++---
 src/tabbar/README.zh-CN.md       |  8 +++---
 src/tree-select/README.md        |  2 +-
 src/tree-select/README.zh-CN.md  |  2 +-
 36 files changed, 277 insertions(+), 159 deletions(-)

diff --git a/src/card/README.md b/src/card/README.md
index dfd4e7c2a..a1db3be97 100644
--- a/src/card/README.md
+++ b/src/card/README.md
@@ -49,14 +49,14 @@ Use slot to custom content.
   price="2.00"
   thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 >
-  <div slot="tags">
+  <template #tags>
     <van-tag plain type="danger">Tag</van-tag>
     <van-tag plain type="danger">Tag</van-tag>
-  </div>
-  <div slot="footer">
+  </template>
+  <template #footer>
     <van-button size="mini">Button</van-button>
     <van-button size="mini">Button</van-button>
-  </div>
+  </template>
 </van-card>
 ```
 
diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md
index 7e5274764..282eb9351 100644
--- a/src/card/README.zh-CN.md
+++ b/src/card/README.zh-CN.md
@@ -51,14 +51,14 @@ Vue.use(Card);
   title="商品标题"
   thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
 >
-  <div slot="tags">
+  <template #tags>
     <van-tag plain type="danger">标签</van-tag>
     <van-tag plain type="danger">标签</van-tag>
-  </div>
-  <div slot="footer">
+  </template>
+  <template #footer>
     <van-button size="mini">按钮</van-button>
     <van-button size="mini">按钮</van-button>
-  </div>
+  </template>
 </van-card>
 ```
 
diff --git a/src/cell/README.md b/src/cell/README.md
index 9487a17c0..50fc59cb8 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -79,19 +79,22 @@ Vue.use(CellGroup);
 ### Use Slots
 
 ```html
-<van-cell value="Content" is-link>
-  <template slot="title">
-    <span class="custom-title">Cell title</span>
-    <van-tag type="danger">Tag</van-tag>
+<van-cell value="内容" is-link>
+  <!-- Use the title slot to customize the title -->
+  <template #title>
+    <span class="custom-title">单元格</span>
+    <van-tag type="danger">标签</van-tag>
   </template>
 </van-cell>
 
-<van-cell title="Cell title" icon="shop-o">
-  <van-icon
-    slot="right-icon"
-    name="search"
-    style="line-height: inherit;"
-  />
+<van-cell title="单元格" icon="shop-o">
+  <!-- Use the right-icon slot to customize the right icon -->
+  <template #right-icon>
+    <van-icon
+      name="search"
+      style="line-height: inherit;"
+    />
+  </template>
 </van-cell>
 ```
 
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md
index 30fbff2cc..86d1e93b3 100644
--- a/src/cell/README.zh-CN.md
+++ b/src/cell/README.zh-CN.md
@@ -87,7 +87,7 @@ Vue.use(CellGroup);
 ```html
 <van-cell value="内容" is-link>
   <!-- 使用 title 插槽来自定义标题 -->
-  <template slot="title">
+  <template #title>
     <span class="custom-title">单元格</span>
     <van-tag type="danger">标签</van-tag>
   </template>
@@ -95,11 +95,12 @@ Vue.use(CellGroup);
 
 <van-cell title="单元格" icon="shop-o">
   <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-  <van-icon
-    slot="right-icon"
-    name="search"
-    style="line-height: inherit;"
-  />
+  <template #right-icon>
+    <van-icon
+      name="search"
+      style="line-height: inherit;"
+    />
+  </template>
 </van-cell>
 ```
 
diff --git a/src/checkbox/README.md b/src/checkbox/README.md
index 52d32589e..e0b879117 100644
--- a/src/checkbox/README.md
+++ b/src/checkbox/README.md
@@ -58,13 +58,21 @@ Use icon slot to custom icon
 
 ```html
 <van-checkbox v-model="checked">
-  Custom Icon
-  <img
-    slot="icon"
-    slot-scope="props"
-    :src="props.checked ? activeIcon : inactiveIcon"
-  >
+  customize icon
+  <template #icon="props">
+    <img
+      class="img-icon"
+      :src="props.checked ? activeIcon : inactiveIcon"
+    />
+</template>
+
 </van-checkbox>
+
+<style>
+.img-icon {
+  height: 20px;  
+}
+</style>
 ```
 
 ```js
@@ -178,7 +186,9 @@ export default {
       :title="`Checkbox ${item}`"
       @click="toggle(index)"
     >
-      <van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
+    <template #right-icon>
+      <van-checkbox :name="item" ref="checkboxes" />
+    </template>
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md
index b573554ba..56bb3353e 100644
--- a/src/checkbox/README.zh-CN.md
+++ b/src/checkbox/README.zh-CN.md
@@ -69,20 +69,30 @@ export default {
 ```html
 <van-checkbox v-model="checked">
   自定义图标
-  <img
-    slot="icon"
-    slot-scope="props"
-    :src="props.checked ? activeIcon : inactiveIcon"
-  >
+  <template #icon="props">
+    <img
+      class="img-icon"
+      :src="props.checked ? activeIcon : inactiveIcon"
+    />
+</template>
+
 </van-checkbox>
+
+<style>
+.img-icon {
+  height: 20px;  
+}
+</style>
 ```
 
 ```js
 export default {
   data() {
-    checked: true,
-    activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+    return {
+      checked: true,
+      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+    }
   }
 }
 ```
@@ -196,7 +206,9 @@ export default {
       :title="`复选框 ${item}`"
       @click="toggle(index)"
     >
-      <van-checkbox slot="right-icon" :name="item" ref="checkboxes" />
+    <template #right-icon>
+      <van-checkbox :name="item" ref="checkboxes" />
+    </template>
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>
@@ -206,7 +218,7 @@ export default {
 export default {
   data() {
     return {
-      list: ['a', 'b']
+      list: ['a', 'b'],
       result: []
     };
   },
diff --git a/src/collapse/README.md b/src/collapse/README.md
index 0830fcc6b..ee73fae73 100644
--- a/src/collapse/README.md
+++ b/src/collapse/README.md
@@ -61,7 +61,9 @@ export default {
 ```html
 <van-collapse v-model="activeNames">
   <van-collapse-item name="1">
-    <div slot="title">Title1 <van-icon name="question-o" /></div>
+    <template #title>
+      <div>Title1 <van-icon name="question-o" /></div>
+    </template>
     Content
   </van-collapse-item>
   <van-collapse-item title="Title2" name="2" icon="shop-o">
diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md
index 75430e99a..1a5a2fa7f 100644
--- a/src/collapse/README.zh-CN.md
+++ b/src/collapse/README.zh-CN.md
@@ -61,7 +61,9 @@ export default {
 ```html
 <van-collapse v-model="activeNames">
   <van-collapse-item name="1">
-    <div slot="title">标题1 <van-icon name="question-o" /></div>
+    <template #title>
+      <div>标题1 <van-icon name="question-o" /></div>
+    </template>
     内容
   </van-collapse-item>
   <van-collapse-item title="标题2" name="2" icon="shop-o">
diff --git a/src/field/README.md b/src/field/README.md
index 16bcb839e..7839507c6 100644
--- a/src/field/README.md
+++ b/src/field/README.md
@@ -133,7 +133,9 @@ Use button slot to insert button
   label="SMS"
   placeholder="SMS"
 >
-  <van-button slot="button" size="small" type="primary">Send SMS</van-button>
+  <template #button>
+    <van-button size="small" type="primary">Send SMS</van-button>
+  </template>
 </van-field>
 ```
 
diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md
index 962d83d2d..5d80e7fc7 100644
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@@ -149,7 +149,9 @@ export default {
   label="短信验证码"
   placeholder="请输入短信验证码"
 >
-  <van-button slot="button" size="small" type="primary">发送验证码</van-button>
+  <template #button>
+    <van-button size="small" type="primary">发送验证码</van-button>
+  </template>
 </van-field>
 ```
 
diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md
index acdd72bd9..ec1b0a071 100644
--- a/src/nav-bar/README.md
+++ b/src/nav-bar/README.md
@@ -43,7 +43,9 @@ export default {
 
 ```html
 <van-nav-bar title="Title" left-text="Back" left-arrow>
-  <van-icon name="search" slot="right" />
+  <template #right>
+    <van-icon name="search"/> 
+  </template>
 </van-nav-bar>
 ```
 
@@ -74,4 +76,4 @@ export default {
 | Event | Description | Arguments |
 |------|------|------|
 | click-left | Triggered when click left button | - |
-| click-right | Triggered when click right button | - |
\ No newline at end of file
+| click-right | Triggered when click right button | - |
diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md
index 4ad59dbee..1825ec6a2 100644
--- a/src/nav-bar/README.zh-CN.md
+++ b/src/nav-bar/README.zh-CN.md
@@ -45,7 +45,9 @@ export default {
 
 ```html
 <van-nav-bar title="标题" left-text="返回" left-arrow>
-  <van-icon name="search" slot="right" />
+  <template #right>
+    <van-icon name="search"/> 
+  </template>
 </van-nav-bar>
 ```
 
diff --git a/src/panel/README.md b/src/panel/README.md
index 2fb12d190..846c5fe42 100644
--- a/src/panel/README.md
+++ b/src/panel/README.md
@@ -24,10 +24,10 @@ Vue.use(Panel);
 ```html
 <van-panel title="Title" desc="Description" status="Status">
   <div>Content</div>
-  <div slot="footer">
+  <template #footer>
     <van-button size="small">Button</van-button>
     <van-button size="small" type="danger">Button</van-button>
-  </div>
+  </template>
 </van-panel>
 ```
 
diff --git a/src/panel/README.zh-CN.md b/src/panel/README.zh-CN.md
index 6ffa2d525..e29e2579a 100644
--- a/src/panel/README.zh-CN.md
+++ b/src/panel/README.zh-CN.md
@@ -28,10 +28,10 @@ Vue.use(Panel);
 ```html
 <van-panel title="标题" desc="描述信息" status="状态">
   <div>内容</div>
-  <div slot="footer">
+  <template #footer>
     <van-button size="small">按钮</van-button>
     <van-button size="small" type="danger">按钮</van-button>
-  </div>
+  </template>
 </van-panel>
 ```
 
diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md
index a8450be95..e6b5bca9a 100644
--- a/src/pull-refresh/README.md
+++ b/src/pull-refresh/README.md
@@ -63,23 +63,27 @@ Use slots to custom tips
 
 ```html
 <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
-  <img
-    class="doge"
-    slot="pulling"
-    slot-scope="props"
-    src="https://img.yzcdn.cn/vant/doge.png"
-    :style="{ transform: `scale(${props.distance / 80})` }"
-  >
-  <img
-    class="doge"
-    slot="loosing"
-    src="https://img.yzcdn.cn/vant/doge.png"
-  >
-  <img
-    class="doge"
-    slot="loading"
-    src="https://img.yzcdn.cn/vant/doge-fire.jpg"
-  >
+  <template #pulling="props">
+    <img
+      class="doge"
+      src="https://img.yzcdn.cn/vant/doge.png"
+      :style="{ transform: `scale(${props.distance / 80})` }"
+    />
+  </template>
+
+  <template #loosing>
+    <img
+      class="doge"
+      src="https://img.yzcdn.cn/vant/doge.png"
+    />
+  </template>  
+
+  <template #loading>
+    <img
+      class="doge"
+      src="https://img.yzcdn.cn/vant/doge-fire.jpg"
+    />
+  </template>
   <p>Refresh Count: {{ count }}</p>
 </van-pull-refresh>
 
diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md
index 7c8878415..3623f11fd 100644
--- a/src/pull-refresh/README.zh-CN.md
+++ b/src/pull-refresh/README.zh-CN.md
@@ -64,25 +64,29 @@ export default {
 ```html
 <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
   <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
-  <img
-    class="doge"
-    slot="pulling"
-    slot-scope="props"
-    src="https://img.yzcdn.cn/vant/doge.png"
-    :style="{ transform: `scale(${props.distance / 80})` }"
-  >
+  <template #pulling="props">
+    <img
+      class="doge"
+      src="https://img.yzcdn.cn/vant/doge.png"
+      :style="{ transform: `scale(${props.distance / 80})` }"
+    />
+  </template>
+
   <!-- 释放提示 -->
-  <img
-    class="doge"
-    slot="loosing"
-    src="https://img.yzcdn.cn/vant/doge.png"
-  >
+  <template #loosing>
+    <img
+      class="doge"
+      src="https://img.yzcdn.cn/vant/doge.png"
+    />
+  </template>  
+
   <!-- 加载提示 -->
-  <img
-    class="doge"
-    slot="loading"
-    src="https://img.yzcdn.cn/vant/doge-fire.jpg"
-  >
+  <template #loading>
+    <img
+      class="doge"
+      src="https://img.yzcdn.cn/vant/doge-fire.jpg"
+    />
+  </template>
   <p>刷新次数: {{ count }}</p>
 </van-pull-refresh>
 
diff --git a/src/radio/README.md b/src/radio/README.md
index d61ba816e..c69e3ebd2 100644
--- a/src/radio/README.md
+++ b/src/radio/README.md
@@ -86,21 +86,29 @@ Use icon slot to custom icon
 <van-radio-group v-model="radio">
   <van-radio name="1">
     Radio 1
-    <img
-      slot="icon"
-      slot-scope="props"
-      :src="props.checked ? activeIcon : inactiveIcon"
-    >
+    <template #icon="props">
+      <img
+        class="img-icon"
+        :src="props.checked ? activeIcon : inactiveIcon"
+      >
+    </template>
   </van-radio>
   <van-radio name="2">
     Radio 2
-    <img
-      slot="icon"
-      slot-scope="props"
-      :src="props.checked ? activeIcon : inactiveIcon"
-    >
+    <template #icon="props">
+      <img
+        class="img-icon"
+        :src="props.checked ? activeIcon : inactiveIcon"
+      />
+    </template>
   </van-radio>
 </van-radio-group>
+
+<style>
+  .img-icon {
+    height: 20px;  
+}
+</style>>
 ```
 
 ```js
@@ -130,10 +138,14 @@ export default {
 <van-radio-group v-model="radio">
   <van-cell-group>
     <van-cell title="Radio 1" clickable @click="radio = '1'">
-      <van-radio slot="right-icon" name="1" />
+      <template #right-icon>      
+        <van-radio name="1" />
+      </template>
     </van-cell>
     <van-cell title="Radio 2" clickable @click="radio = '2'">
-      <van-radio slot="right-icon" name="2" />
+      <template #right-icon>
+        <van-radio name="2" />
+      </template>
     </van-cell>
   </van-cell-group>
 </van-radio-group>
diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md
index fbc1c6eb6..2bbfacd49 100644
--- a/src/radio/README.zh-CN.md
+++ b/src/radio/README.zh-CN.md
@@ -96,29 +96,39 @@ export default {
 <van-radio-group v-model="radio">
   <van-radio name="1">
     单选框 1
-    <img
-      slot="icon"
-      slot-scope="props"
-      :src="props.checked ? activeIcon : inactiveIcon"
-    >
+    <template #icon="props">
+      <img
+        class="img-icon"
+        :src="props.checked ? activeIcon : inactiveIcon"
+      >
+    </template>
   </van-radio>
   <van-radio name="2">
     单选框 2
-    <img
-      slot="icon"
-      slot-scope="props"
-      :src="props.checked ? activeIcon : inactiveIcon"
-    >
+    <template #icon="props">
+      <img
+        class="img-icon"
+        :src="props.checked ? activeIcon : inactiveIcon"
+      />
+    </template>
   </van-radio>
 </van-radio-group>
+
+<style>
+  .img-icon {
+    height: 20px;  
+}
+</style>
 ```
 
 ```js
 export default {
   data() {
-    radio: '1',
-    activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
-    inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+    return {
+     radio: '1',
+     activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
+     inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png'
+    }
   }
 }
 ```
@@ -142,10 +152,14 @@ export default {
 <van-radio-group v-model="radio">
   <van-cell-group>
     <van-cell title="单选框 1" clickable @click="radio = '1'">
-      <van-radio slot="right-icon" name="1" />
+      <template #right-icon>      
+        <van-radio name="1" />
+      </template>
     </van-cell>
     <van-cell title="单选框 2" clickable @click="radio = '2'">
-      <van-radio slot="right-icon" name="2" />
+      <template #right-icon>
+        <van-radio name="2" />
+      </template>
     </van-cell>
   </van-cell-group>
 </van-radio-group>
diff --git a/src/search/README.md b/src/search/README.md
index 55669ebad..801ffb5c1 100644
--- a/src/search/README.md
+++ b/src/search/README.md
@@ -103,9 +103,12 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
   v-model="value"
   show-action
   shape="round"
+  label="Address"
   @search="onSearch"
 >
-  <div slot="action" @click="onSearch">Search</div>
+  <template #action>
+    <div @click="onSearch">Search</div> 
+  </template>
 </van-search>
 ```
 
diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md
index b33498bc5..507f9e018 100644
--- a/src/search/README.zh-CN.md
+++ b/src/search/README.zh-CN.md
@@ -103,9 +103,12 @@ export default {
   v-model="value"
   show-action
   placeholder="请输入搜索关键词"
+  label="地址"
   @search="onSearch"
 >
-  <div slot="action" @click="onSearch">搜索</div>
+  <template #action>
+    <div @click="onSearch">搜索</div>
+  </template>
 </van-search>
 ```
 
diff --git a/src/sku/README.md b/src/sku/README.md
index 10d960600..5733bfa66 100644
--- a/src/sku/README.md
+++ b/src/sku/README.md
@@ -81,14 +81,14 @@ export default {
   @add-cart="onAddCartClicked"
 >
   <!-- custom sku-header-price -->
-  <template slot="sku-header-price" slot-scope="props">
+  <template #sku-header-price="props">
     <div class="van-sku__goods-price">
       <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
     </div>
   </template>
 
   <!-- custom sku actions -->
-  <template slot="sku-actions" slot-scope="props">
+  <template #sku-actions="props">
     <div class="van-sku-actions">
       <van-button
         square
diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md
index ee9cdbdca..42f789feb 100644
--- a/src/sku/README.zh-CN.md
+++ b/src/sku/README.zh-CN.md
@@ -83,14 +83,14 @@ export default {
   @add-cart="onAddCartClicked"
 >
   <!-- 自定义 sku-header-price -->
-  <template slot="sku-header-price" slot-scope="props">
+  <template #sku-header-price="props">
     <div class="van-sku__goods-price">
       <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
     </div>
   </template>
 
   <!-- 自定义 sku actions -->
-  <template slot="sku-actions" slot-scope="props">
+  <template #sku-actions="props">
     <div class="van-sku-actions">
       <van-button
         square
diff --git a/src/slider/README.md b/src/slider/README.md
index f733c58c0..f0064e98c 100644
--- a/src/slider/README.md
+++ b/src/slider/README.md
@@ -66,9 +66,11 @@ export default {
 
 ```html
 <van-slider v-model="value" active-color="#ee0a24">
-  <div slot="button" class="custom-button">
-    {{ value }}
-  </div>
+  <template #button>
+    <div class="custom-button">
+      {{ value }}
+    </div>
+  </template>
 </van-slider>
 
 <style>
diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md
index 9127b91a2..34f80c4fe 100644
--- a/src/slider/README.zh-CN.md
+++ b/src/slider/README.zh-CN.md
@@ -66,9 +66,11 @@ export default {
 
 ```html
 <van-slider v-model="value" active-color="#ee0a24">
-  <div slot="button" class="custom-button">
-    {{ value }}
-  </div>
+  <template #button>
+    <div class="custom-button">
+      {{ value }}
+    </div>
+  </template>
 </van-slider>
 
 <style>
diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md
index c25eff2a9..bef4ec769 100644
--- a/src/submit-bar/README.md
+++ b/src/submit-bar/README.md
@@ -60,9 +60,9 @@ Use slot to add custom contents.
   @submit="onSubmit"
 >
   <van-checkbox v-model="checked">Check</van-checkbox>
-  <span slot="tip">
-    Some tips, <span @click="onClickEditAddress">Link</span>
-  </span>
+    <template #tip>
+        Some tips, <span @click="onClickEditAddress">Link</span>
+    </template>
 </van-submit-bar>
 ```
 
diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md
index 671f970c0..8bc1ff323 100644
--- a/src/submit-bar/README.zh-CN.md
+++ b/src/submit-bar/README.zh-CN.md
@@ -60,9 +60,9 @@ Vue.use(SubmitBar);
   @submit="onSubmit"
 >
   <van-checkbox v-model="checked">全选</van-checkbox>
-  <span slot="tip">
-    你的收货地址不支持同城送, <span>修改地址</span>
-  </span>
+    <template #tip>
+        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
+    </template>
 </van-submit-bar>
 ```
 
diff --git a/src/swipe/README.md b/src/swipe/README.md
index e737a8c70..2084f2d7a 100644
--- a/src/swipe/README.md
+++ b/src/swipe/README.md
@@ -120,11 +120,29 @@ export default {
   <van-swipe-item>2</van-swipe-item>
   <van-swipe-item>3</van-swipe-item>
   <van-swipe-item>4</van-swipe-item>
-
-  <div class="custom-indicator" slot="indicator">
-    {{ current + 1 }}/4
-  </div>
+  <template #indicator>
+    <div class="custom-indicator">
+      {{ current + 1 }}/4
+    </div>
+  </template>
 </van-swipe>
+
+<style>
+  .van-swipe-item {
+    background-color: #39a9ed;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .custom-indicator {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    padding: 2px 5px;
+    font-size: 12px;
+    background: rgba(0, 0, 0, 0.1);
+  }
+</style>
 ```
 
 ```js
diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
index 6ffc18647..3a7d3d5f0 100644
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@@ -126,11 +126,29 @@ export default {
   <van-swipe-item>2</van-swipe-item>
   <van-swipe-item>3</van-swipe-item>
   <van-swipe-item>4</van-swipe-item>
-
-  <div class="custom-indicator" slot="indicator">
-    {{ current + 1 }}/4
-  </div>
+  <template #indicator>
+    <div class="custom-indicator">
+      {{ current + 1 }}/4
+    </div>
+  </template>
 </van-swipe>
+
+<style>
+  .van-swipe-item {
+    background-color: #39a9ed;
+    font-size: 20px;
+    line-height: 150px;
+    text-align: center;
+  }
+  .custom-indicator {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    padding: 2px 5px;
+    font-size: 12px;
+    background: rgba(0, 0, 0, 0.1);
+  }
+</style>
 ```
 
 ```js
diff --git a/src/switch/README.md b/src/switch/README.md
index 377cbfb96..c78ccdcd9 100644
--- a/src/switch/README.md
+++ b/src/switch/README.md
@@ -81,7 +81,9 @@ export default {
 
 ```html
 <van-cell center title="Title">
-  <van-switch v-model="checked" slot="right-icon" size="24" />
+  <template #right-icon>
+    <van-switch v-model="checked" size="24" />
+  </template>
 </van-cell>
 ```
 
diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md
index 040babd08..10827aa83 100644
--- a/src/switch/README.zh-CN.md
+++ b/src/switch/README.zh-CN.md
@@ -93,7 +93,9 @@ export default {
 
 ```html
 <van-cell center title="标题">
-  <van-switch v-model="checked" slot="right-icon" size="24" />
+  <template #right-icon>
+    <van-switch v-model="checked" size="24" />
+  </template>
 </van-cell>
 ```
 
diff --git a/src/tab/README.md b/src/tab/README.md
index 5078acdbf..b6c730907 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -142,10 +142,10 @@ Use title slot to custom tab title
 
 ```html
 <van-tabs v-model="active">
-  <van-tab v-for="index in 2">
-    <div slot="title">
+  <van-tab v-for="index in 2" :key="index">
+    <template #title>
       <van-icon name="more-o" />tab
-    </div>
+    </template>
     content {{ index }}
   </van-tab>
 </van-tabs>
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 0f7a3c385..ba9458573 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -146,10 +146,10 @@ export default {
 
 ```html
 <van-tabs v-model="active">
-  <van-tab v-for="index in 2">
-    <div slot="title">
+  <van-tab v-for="index in 2" :key="index">
+    <template #title>
       <van-icon name="more-o" />选项
-    </div>
+    </template>
     内容 {{ index }}
   </van-tab>
 </van-tabs>
diff --git a/src/tabbar/README.md b/src/tabbar/README.md
index fd49ea700..90671ea4a 100644
--- a/src/tabbar/README.md
+++ b/src/tabbar/README.md
@@ -73,11 +73,9 @@ Use `icon` slot to custom icon
 <van-tabbar v-model="active">
   <van-tabbar-item badge="3">
     <span>Custom</span>
-    <img
-      slot="icon"
-      slot-scope="props"
-      :src="props.active ? icon.active : icon.inactive"
-    >
+      <template #icon="props">
+        <img :src="props.active ? icon.active : icon.inactive"/>
+      </template>
   </van-tabbar-item>
   <van-tabbar-item icon="search">Tab</van-tabbar-item>
   <van-tabbar-item icon="setting-o">Tab</van-tabbar-item>
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index 92dd8d86e..8dea31eb0 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -79,11 +79,9 @@ export default {
 <van-tabbar v-model="active">
   <van-tabbar-item badge="3">
     <span>自定义</span>
-    <img
-      slot="icon"
-      slot-scope="props"
-      :src="props.active ? icon.active : icon.inactive"
-    >
+      <template #icon="props">
+        <img :src="props.active ? icon.active : icon.inactive"/>
+      </template>
   </van-tabbar-item>
   <van-tabbar-item icon="search">标签</van-tabbar-item>
   <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index d2e182679..4b7354aea 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -63,7 +63,7 @@ export default {
   :items="items"
   :main-active-index.sync="active"
 >
-  <template slot="content">
+  <template #content>
     <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
     <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
   </template>
diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md
index 8fb326bfc..e3a12ed50 100644
--- a/src/tree-select/README.zh-CN.md
+++ b/src/tree-select/README.zh-CN.md
@@ -69,7 +69,7 @@ export default {
   :items="items"
   :main-active-index.sync="active"
 >
-  <template slot="content">
+  <template #content>
     <van-image v-if="active === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
     <van-image v-if="active === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
   </template>