From d9f2ad6759bdc61f24c6975ffc1b72fca83d4e33 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 20 Jun 2019 17:32:00 +0800
Subject: [PATCH] [Doc] use v-slot in demos (#3573)

---
 packages/card/demo/index.vue                  | 83 +++++++++----------
 .../card/test/__snapshots__/demo.spec.js.snap | 20 ++---
 packages/cell/demo/index.vue                  |  4 +-
 .../cell/test/__snapshots__/demo.spec.js.snap |  5 +-
 packages/checkbox/demo/index.vue              |  8 +-
 packages/collapse/demo/index.vue              |  4 +-
 packages/field/demo/index.vue                 | 15 ++--
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/nav-bar/demo/index.vue               |  7 +-
 packages/panel/demo/index.vue                 |  4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/radio/demo/index.vue                 | 16 ++--
 packages/search/demo/index.vue                |  9 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/sku/demo/index.vue                   | 12 +--
 packages/slider/demo/index.vue                |  9 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/submit-bar/demo/index.vue            |  4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  6 +-
 packages/swipe-cell/demo/index.vue            | 52 ++++++------
 packages/swipe/demo/index.vue                 |  9 +-
 .../test/__snapshots__/demo.spec.js.snap      |  4 +-
 packages/tab/demo/index.vue                   |  4 +-
 .../tab/test/__snapshots__/demo.spec.js.snap  | 12 +--
 packages/tabbar/demo/index.vue                |  8 +-
 25 files changed, 141 insertions(+), 170 deletions(-)

diff --git a/packages/card/demo/index.vue b/packages/card/demo/index.vue
index 49c21bf69..978888ee3 100644
--- a/packages/card/demo/index.vue
+++ b/packages/card/demo/index.vue
@@ -20,40 +20,39 @@
         :title="$t('title')"
         :thumb="imageURL"
       >
-        <div
-          slot="tags"
-          class="card__tags"
-        >
-          <van-tag
-            plain
-            type="danger"
-          >
-            标签1
-          </van-tag>
-          <van-tag
-            plain
-            type="danger"
-          >
-            标签2
-          </van-tag>
-        </div>
-        <div
-          slot="footer"
-          class="card__footer"
-        >
-          <van-button
-            round
-            size="mini"
-          >
-            {{ $t('button') }}
-          </van-button>
-          <van-button
-            round
-            size="mini"
-          >
-            {{ $t('button') }}
-          </van-button>
-        </div>
+        <template v-slot:tags>
+          <div class="card__tags">
+            <van-tag
+              plain
+              type="danger"
+            >
+              标签1
+            </van-tag>
+            <van-tag
+              plain
+              type="danger"
+            >
+              标签2
+            </van-tag>
+          </div>
+        </template>
+
+        <template v-slot:footer>
+          <div class="card__footer">
+            <van-button
+              round
+              size="mini"
+            >
+              {{ $t('button') }}
+            </van-button>
+            <van-button
+              round
+              size="mini"
+            >
+              {{ $t('button') }}
+            </van-button>
+          </div>
+        </template>
       </van-card>
     </demo-block>
   </demo-section>
@@ -63,7 +62,7 @@
 export default {
   i18n: {
     'zh-CN': {
-      title: '2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男'
+      title: '商品名称'
     }
   },
 
@@ -76,13 +75,13 @@ export default {
 </script>
 
 <style lang="less">
-  .card__footer {
-    padding-top: 10px;
-  }
+.card__footer {
+  padding-top: 5px;
+}
 
-  .card__tags {
-    .van-tag {
-      margin-right: 5px;
-    }
+.card__tags {
+  .van-tag {
+    margin-right: 5px;
   }
+}
 </style>
diff --git a/packages/card/test/__snapshots__/demo.spec.js.snap b/packages/card/test/__snapshots__/demo.spec.js.snap
index 0639e4172..843001031 100644
--- a/packages/card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/card/test/__snapshots__/demo.spec.js.snap
@@ -11,7 +11,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
+          <div class="van-card__title">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
@@ -31,13 +31,13 @@ exports[`renders demo correctly 1`] = `
           <div class="van-card__tag"><span class="van-tag van-tag--mark" style="background-color: rgb(255, 68, 68);">标签</span></div>
         </a>
         <div class="van-card__content">
-          <div class="van-card__title">2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男</div>
+          <div class="van-card__title">商品名称</div>
           <div class="van-card__desc van-ellipsis">描述信息</div>
           <div class="card__tags"><span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
-          标签1
-        </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
-          标签2
-        </span></div>
+            标签1
+          </span> <span class="van-tag van-tag--plain van-hairline--surround" style="color: rgb(255, 68, 68);">
+            标签2
+          </span></div>
           <div class="van-card__bottom">
             <div class="van-card__price">¥ 2.00</div>
             <div class="van-card__origin-price">¥ 10.00</div>
@@ -47,10 +47,10 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-card__footer">
         <div class="card__footer"><button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
-          按钮
-        </span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
-          按钮
-        </span></button></div>
+            按钮
+          </span></button> <button class="van-button van-button--default van-button--mini van-button--round"><span class="van-button__text">
+            按钮
+          </span></button></div>
       </div>
     </div>
   </div>
diff --git a/packages/cell/demo/index.vue b/packages/cell/demo/index.vue
index 4faf1fa3b..17b4f2f66 100644
--- a/packages/cell/demo/index.vue
+++ b/packages/cell/demo/index.vue
@@ -92,7 +92,7 @@
         icon="shop-o"
         is-link
       >
-        <template slot="title">
+        <template v-slot:title>
           <span class="custom-text">{{ $t('cell') }}</span>
           <van-tag type="danger">{{ $t('tag') }}</van-tag>
         </template>
@@ -104,7 +104,7 @@
       />
       <van-cell :title="$t('cell')">
         <van-icon
-          slot="right-icon"
+          v-slot:right-icon
           name="search"
           class="custom-icon"
         />
diff --git a/packages/cell/test/__snapshots__/demo.spec.js.snap b/packages/cell/test/__snapshots__/demo.spec.js.snap
index 094dffc5c..2981f5895 100644
--- a/packages/cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/cell/test/__snapshots__/demo.spec.js.snap
@@ -99,8 +99,9 @@ exports[`renders demo correctly 1`] = `
         <!----></i>
     </div>
     <div class="van-cell">
-      <div class="van-cell__title"><span>单元格</span></div><i class="custom-icon van-icon van-icon-search">
-        <!----></i>
+      <div class="van-cell__title"><span>单元格</span></div>
+      <div class="van-cell__value"><i class="custom-icon van-icon van-icon-search">
+          <!----></i></div>
     </div>
   </div>
 </div>
diff --git a/packages/checkbox/demo/index.vue b/packages/checkbox/demo/index.vue
index 2e433b9b1..f04c23214 100644
--- a/packages/checkbox/demo/index.vue
+++ b/packages/checkbox/demo/index.vue
@@ -31,11 +31,9 @@
     <demo-block :title="$t('customIcon')">
       <van-checkbox v-model="checkbox3">
         {{ $t('customIcon') }}
-        <img
-          slot="icon"
-          slot-scope="props"
-          :src="props.checked ? icon.active : icon.inactive"
-        >
+        <template v-slot:icon="{ checked }">
+          <img :src="checked ? icon.active : icon.inactive">
+        </template>
       </van-checkbox>
     </demo-block>
 
diff --git a/packages/collapse/demo/index.vue b/packages/collapse/demo/index.vue
index e96a00605..a1213107d 100644
--- a/packages/collapse/demo/index.vue
+++ b/packages/collapse/demo/index.vue
@@ -27,7 +27,9 @@
     <demo-block :title="$t('titleSlot')">
       <van-collapse v-model="active3">
         <van-collapse-item>
-          <div slot="title">{{ $t('title') + 1 }}<van-icon name="question-o" /></div>
+          <template v-slot:title>
+            <div>{{ $t('title') + 1 }}<van-icon name="question-o" /></div>
+          </template>
           {{ $t('text') }}
         </van-collapse-item>
         <van-collapse-item
diff --git a/packages/field/demo/index.vue b/packages/field/demo/index.vue
index 977d021ad..9356e6a1b 100644
--- a/packages/field/demo/index.vue
+++ b/packages/field/demo/index.vue
@@ -81,13 +81,14 @@
           :label="$t('sms')"
           :placeholder="$t('smsPlaceholder')"
         >
-          <van-button
-            slot="button"
-            size="small"
-            type="primary"
-          >
-            {{ $t('sendSMS') }}
-          </van-button>
+          <template v-slot:button>
+            <van-button
+              size="small"
+              type="primary"
+            >
+              {{ $t('sendSMS') }}
+            </van-button>
+          </template>
         </van-field>
       </van-cell-group>
     </demo-block>
diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap
index cede00a13..2e1324ee0 100644
--- a/packages/field/test/__snapshots__/demo.spec.js.snap
+++ b/packages/field/test/__snapshots__/demo.spec.js.snap
@@ -76,8 +76,8 @@ exports[`renders demo correctly 1`] = `
         <div class="van-cell__value">
           <div class="van-field__body"><input type="text" placeholder="请输入短信验证码" class="van-field__control">
             <div class="van-field__button"><button class="van-button van-button--primary van-button--small"><span class="van-button__text">
-          发送验证码
-        </span></button></div>
+            发送验证码
+          </span></button></div>
           </div>
         </div>
       </div>
diff --git a/packages/nav-bar/demo/index.vue b/packages/nav-bar/demo/index.vue
index 2ca682873..3420e0349 100644
--- a/packages/nav-bar/demo/index.vue
+++ b/packages/nav-bar/demo/index.vue
@@ -17,10 +17,9 @@
         :left-text="$t('back')"
         left-arrow
       >
-        <van-icon
-          name="search"
-          slot="right"
-        />
+        <template v-slot:right>
+          <van-icon name="search" />
+        </template>
       </van-nav-bar>
     </demo-block>
   </demo-section>
diff --git a/packages/panel/demo/index.vue b/packages/panel/demo/index.vue
index c362238b1..9beecec60 100644
--- a/packages/panel/demo/index.vue
+++ b/packages/panel/demo/index.vue
@@ -17,7 +17,7 @@
         :status="$t('status')"
       >
         <div>{{ $t('content') }}</div>
-        <div slot="footer">
+        <template v-slot:footer>
           <van-button size="small">{{ $t('button') }}</van-button>
           <van-button
             size="small"
@@ -25,7 +25,7 @@
           >
             {{ $t('button') }}
           </van-button>
-        </div>
+        </template>
       </van-panel>
     </demo-block>
   </demo-section>
diff --git a/packages/panel/test/__snapshots__/demo.spec.js.snap b/packages/panel/test/__snapshots__/demo.spec.js.snap
index bf3fe8e0d..436750026 100644
--- a/packages/panel/test/__snapshots__/demo.spec.js.snap
+++ b/packages/panel/test/__snapshots__/demo.spec.js.snap
@@ -26,11 +26,9 @@ exports[`renders demo correctly 1`] = `
       <div class="van-panel__content">
         <div>内容</div>
       </div>
-      <div class="van-panel__footer van-hairline--top">
-        <div><button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
+      <div class="van-panel__footer van-hairline--top"><button class="van-button van-button--default van-button--small"><span class="van-button__text">按钮</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
           按钮
         </span></button></div>
-      </div>
     </div>
   </div>
 </div>
diff --git a/packages/radio/demo/index.vue b/packages/radio/demo/index.vue
index 3b84c6e50..0b922c6cc 100644
--- a/packages/radio/demo/index.vue
+++ b/packages/radio/demo/index.vue
@@ -48,19 +48,15 @@
       >
         <van-radio name="1">
           {{ $t('radio') }} 1
-          <img
-            slot="icon"
-            slot-scope="props"
-            :src="props.checked ? icon.active : icon.inactive"
-          >
+          <template v-slot:icon="{ checked }">
+            <img :src="checked ? icon.active : icon.inactive">
+          </template>
         </van-radio>
         <van-radio name="2">
           {{ $t('radio') }} 2
-          <img
-            slot="icon"
-            slot-scope="props"
-            :src="props.checked ? icon.active : icon.inactive"
-          >
+          <template v-slot:icon="{ checked }">
+            <img :src="checked ? icon.active : icon.inactive">
+          </template>
         </van-radio>
       </van-radio-group>
     </demo-block>
diff --git a/packages/search/demo/index.vue b/packages/search/demo/index.vue
index 7492dbf2a..d4bc333ce 100644
--- a/packages/search/demo/index.vue
+++ b/packages/search/demo/index.vue
@@ -28,12 +28,9 @@
         :label="$t('label')"
         @search="onSearch"
       >
-        <div
-          slot="action"
-          @click="onSearch"
-        >
-          {{ $t('search') }}
-        </div>
+        <template v-slot:action>
+          <div @click="onSearch">{{ $t('search') }}</div>
+        </template>
       </van-search>
     </demo-block>
   </demo-section>
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index ceeb94f9b..38da8d0b1 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -46,9 +46,7 @@ exports[`renders demo correctly 1`] = `
         </div>
       </div>
       <div class="van-search__action">
-        <div>
-          搜索
-        </div>
+        <div>搜索</div>
       </div>
     </div>
   </div>
diff --git a/packages/sku/demo/index.vue b/packages/sku/demo/index.vue
index ab563d0b7..67474aa49 100644
--- a/packages/sku/demo/index.vue
+++ b/packages/sku/demo/index.vue
@@ -103,18 +103,12 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         >
-          <template
-            slot="sku-header-price"
-            slot-scope="props"
-          >
+          <template v-slot:sku-header-price="{ price }">
             <div class="van-sku__goods-price">
-              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
+              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
             </div>
           </template>
-          <template
-            slot="sku-actions"
-            slot-scope="props"
-          >
+          <template v-slot:sku-actions="{ skuEventBus }">
             <div class="van-sku-actions">
               <van-button
                 square
diff --git a/packages/slider/demo/index.vue b/packages/slider/demo/index.vue
index 626251324..a224c6078 100644
--- a/packages/slider/demo/index.vue
+++ b/packages/slider/demo/index.vue
@@ -45,12 +45,9 @@
         v-model="value6"
         active-color="#f44"
       >
-        <div
-          slot="button"
-          class="custom-button"
-        >
-          {{ value6 }}
-        </div>
+        <template v-slot:button>
+          <div class="custom-button">{{ value6 }}</div>
+        </template>
       </van-slider>
     </demo-block>
 
diff --git a/packages/slider/test/__snapshots__/demo.spec.js.snap b/packages/slider/test/__snapshots__/demo.spec.js.snap
index 78f3bb387..17f212f1f 100644
--- a/packages/slider/test/__snapshots__/demo.spec.js.snap
+++ b/packages/slider/test/__snapshots__/demo.spec.js.snap
@@ -51,9 +51,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-slider">
       <div class="van-slider__bar" style="width: 50%; height: 2px; background: rgb(255, 68, 68);">
         <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
-          <div class="custom-button">
-            50
-          </div>
+          <div class="custom-button">50</div>
         </div>
       </div>
     </div>
diff --git a/packages/submit-bar/demo/index.vue b/packages/submit-bar/demo/index.vue
index 49f1d0f58..7a37dd576 100644
--- a/packages/submit-bar/demo/index.vue
+++ b/packages/submit-bar/demo/index.vue
@@ -35,7 +35,7 @@
         @submit="onClickButton"
       >
         <van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
-        <span slot="tip">
+        <template v-slot:tip>
           {{ $t('tip2') }}
           <span
             class="edit-address"
@@ -43,7 +43,7 @@
           >
             {{ $t('tip3') }}
           </span>
-        </span>
+        </template>
       </van-submit-bar>
     </demo-block>
   </demo-section>
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index 0eb31ad66..a81423038 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -29,11 +29,11 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-submit-bar">
-      <div class="van-submit-bar__tip"><span>
-        你的收货地址不支持同城送, 
+      <div class="van-submit-bar__tip">
+        你的收货地址不支持同城送,
         <span class="edit-address">
           修改地址
-        </span></span></div>
+        </span></div>
       <div class="van-submit-bar__bar">
         <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox">
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success">
diff --git a/packages/swipe-cell/demo/index.vue b/packages/swipe-cell/demo/index.vue
index 27f07c5b0..3e8e8acf0 100644
--- a/packages/swipe-cell/demo/index.vue
+++ b/packages/swipe-cell/demo/index.vue
@@ -4,45 +4,49 @@
       <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
       <demo-block :title="$t('basicUsage')">
         <van-swipe-cell>
-          <van-button
-            square
-            slot="left"
-            type="danger"
-            :text="$t('button1')"
-          />
+          <template v-slot:left>
+            <van-button
+              square
+              type="danger"
+              :text="$t('button1')"
+            />
+          </template>
           <van-cell
             :border="false"
             :title="$t('title')"
             :value="$t('content')"
           />
-          <van-button
-            square
-            slot="right"
-            type="danger"
-            :text="$t('button2')"
-          />
+          <template v-slot:right>
+            <van-button
+              square
+              type="danger"
+              :text="$t('button2')"
+            />
+          </template>
         </van-swipe-cell>
       </demo-block>
 
       <demo-block :title="$t('title2')">
         <van-swipe-cell :on-close="onClose">
-          <van-button
-            square
-            slot="left"
-            type="danger"
-            :text="$t('button1')"
-          />
+          <template v-slot:left>
+            <van-button
+              square
+              type="danger"
+              :text="$t('button1')"
+            />
+          </template>
           <van-cell
             :border="false"
             :title="$t('title')"
             :value="$t('content')"
           />
-          <van-button
-            square
-            slot="right"
-            type="danger"
-            :text="$t('button2')"
-          />
+          <template v-slot:right>
+            <van-button
+              square
+              type="danger"
+              :text="$t('button2')"
+            />
+          </template>
         </van-swipe-cell>
       </demo-block>
     </demo-section>
diff --git a/packages/swipe/demo/index.vue b/packages/swipe/demo/index.vue
index ba9ffcf5b..240e90844 100644
--- a/packages/swipe/demo/index.vue
+++ b/packages/swipe/demo/index.vue
@@ -70,12 +70,9 @@
         <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 v-slot:indicator>
+          <div class="custom-indicator">{{ current + 1 }}/4</div>
+        </template>
       </van-swipe>
     </demo-block>
   </demo-section>
diff --git a/packages/swipe/test/__snapshots__/demo.spec.js.snap b/packages/swipe/test/__snapshots__/demo.spec.js.snap
index 06ad9df91..42c3038f9 100644
--- a/packages/swipe/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe/test/__snapshots__/demo.spec.js.snap
@@ -65,9 +65,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">3</div>
         <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">4</div>
       </div>
-      <div class="custom-indicator">
-        1/4
-      </div>
+      <div class="custom-indicator">1/4</div>
     </div>
   </div>
 </div>
diff --git a/packages/tab/demo/index.vue b/packages/tab/demo/index.vue
index d7dd6f2b8..8c5fff7b4 100644
--- a/packages/tab/demo/index.vue
+++ b/packages/tab/demo/index.vue
@@ -82,9 +82,9 @@
           v-for="index in 2"
           :key="index"
         >
-          <div slot="title">
+          <template v-slot:title>
             <van-icon name="more-o" />{{ $t('tab') }}
-          </div>
+          </template>
           {{ $t('content') }} {{ index }}
         </van-tab>
       </van-tabs>
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index d0fc275e8..9fe4d6382 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -169,17 +169,13 @@ exports[`renders demo correctly 1`] = `
         <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
           <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
           <div role="tab" aria-selected="true" class="van-tab van-tab--active">
-            <div>
-              <div><i class="van-icon van-icon-more-o">
-                  <!----></i>标签
-              </div>
+            <div><i class="van-icon van-icon-more-o">
+                <!----></i>标签
             </div>
           </div>
           <div role="tab" class="van-tab">
-            <div>
-              <div><i class="van-icon van-icon-more-o">
-                  <!----></i>标签
-              </div>
+            <div><i class="van-icon van-icon-more-o">
+                <!----></i>标签
             </div>
           </div>
         </div>
diff --git a/packages/tabbar/demo/index.vue b/packages/tabbar/demo/index.vue
index e6ea163b0..fb3be7dab 100644
--- a/packages/tabbar/demo/index.vue
+++ b/packages/tabbar/demo/index.vue
@@ -66,11 +66,9 @@
       <van-tabbar v-model="active3">
         <van-tabbar-item info="3">
           <span>{{ $t('custom') }}</span>
-          <img
-            slot="icon"
-            slot-scope="props"
-            :src="props.active ? icon.active : icon.normal"
-          >
+          <template v-slot:icon="{ active }">
+            <img :src="active ? icon.active : icon.normal">
+          </template>
         </van-tabbar-item>
         <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>