[Doc] Demo: use v-slot shorthand (#3574)

packages/card/demo/index.vue

@@ -20,7 +20,7 @@
         :title="$t('title')"
         :thumb="imageURL"
       >
-        <template v-slot:tags>
+        <template #tags>
           <div class="card__tags">
             <van-tag
               plain
@@ -37,7 +37,7 @@
           </div>
         </template>
 
-        <template v-slot:footer>
+        <template #footer>
           <div class="card__footer">
             <van-button
               round

packages/cell/demo/index.vue

@@ -92,7 +92,7 @@
         icon="shop-o"
         is-link
       >
-        <template v-slot:title>
+        <template #title>
           <span class="custom-text">{{ $t('cell') }}</span>
           <van-tag type="danger">{{ $t('tag') }}</van-tag>
         </template>
@@ -103,11 +103,12 @@
         is-link
       />
       <van-cell :title="$t('cell')">
-        <van-icon
+        <template #right-icon>
-          v-slot:right-icon
+          <van-icon
-          name="search"
+            name="search"
-          class="custom-icon"
+            class="custom-icon"
-        />
+          />
+        </template>
       </van-cell>
     </demo-block>
   </demo-section>

packages/cell/test/__snapshots__/demo.spec.js.snap

@@ -99,9 +99,8 @@ exports[`renders demo correctly 1`] = `
         <!----></i>
     </div>
     <div class="van-cell">
-      <div class="van-cell__title"><span>单元格</span></div>
+      <div class="van-cell__title"><span>单元格</span></div><i class="custom-icon van-icon van-icon-search">
-      <div class="van-cell__value"><i class="custom-icon van-icon van-icon-search">
+        <!----></i>
-          <!----></i></div>
     </div>
   </div>
 </div>

packages/checkbox/demo/index.vue

@@ -31,7 +31,7 @@
     <demo-block :title="$t('customIcon')">
       <van-checkbox v-model="checkbox3">
         {{ $t('customIcon') }}
-        <template v-slot:icon="{ checked }">
+        <template #icon="{ checked }">
           <img :src="checked ? icon.active : icon.inactive">
         </template>
       </van-checkbox>

packages/collapse/demo/index.vue

@@ -27,8 +27,8 @@
     <demo-block :title="$t('titleSlot')">
       <van-collapse v-model="active3">
         <van-collapse-item>
-          <template v-slot:title>
+          <template #title>
-            <div>{{ $t('title') + 1 }}<van-icon name="question-o" /></div>
+            {{ $t('title') + 1 }}<van-icon name="question-o" />
           </template>
           {{ $t('text') }}
         </van-collapse-item>

packages/collapse/test/__snapshots__/demo.spec.js.snap

@@ -57,9 +57,8 @@ exports[`renders demo correctly 1`] = `
       <div class="van-collapse-item">
         <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
           <div class="van-cell__title">
-            <div>标题1<i class="van-icon van-icon-question-o">
+            标题1<i class="van-icon van-icon-question-o">
-                <!----></i></div>
+              <!----></i></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-          </div><i class="van-icon van-icon-arrow van-cell__right-icon">
             <!----></i>
         </div>
       </div>

packages/field/demo/index.vue

@@ -81,7 +81,7 @@
           :label="$t('sms')"
           :placeholder="$t('smsPlaceholder')"
         >
-          <template v-slot:button>
+          <template #button>
             <van-button
               size="small"
               type="primary"

packages/image-preview/demo/index.vue

@@ -39,7 +39,7 @@
         :images="images"
         @change="onChange"
       >
-        <template v-slot:index>{{ $t('index', index) }}</template>
+        <template #index>{{ $t('index', index) }}</template>
       </van-image-preview>
     </demo-block>
   </demo-section>

packages/image/demo/index.vue

@@ -43,7 +43,7 @@
             width="100%"
             height="27vw"
           >
-            <template v-slot:loading>
+            <template #loading>
               <van-loading
                 type="spinner"
                 size="20"
@@ -72,9 +72,7 @@
             height="27vw"
             src="x"
           >
-            <template v-slot:error>
+            <template #error>{{ $t('loadFail') }}</template>
-              {{ $t('loadFail') }}
-            </template>
           </van-image>
           <div class="text">{{ $t('customTip') }}</div>
         </van-col>

packages/nav-bar/demo/index.vue

@@ -17,7 +17,7 @@
         :left-text="$t('back')"
         left-arrow
       >
-        <template v-slot:right>
+        <template #right>
           <van-icon name="search" />
         </template>
       </van-nav-bar>

packages/panel/demo/index.vue

@@ -17,7 +17,7 @@
         :status="$t('status')"
       >
         <div>{{ $t('content') }}</div>
-        <template v-slot:footer>
+        <template #footer>
           <van-button size="small">{{ $t('button') }}</van-button>
           <van-button
             size="small"

packages/radio/demo/index.vue

@@ -48,13 +48,13 @@
       >
         <van-radio name="1">
           {{ $t('radio') }} 1
-          <template v-slot:icon="{ checked }">
+          <template #icon="{ checked }">
             <img :src="checked ? icon.active : icon.inactive">
           </template>
         </van-radio>
         <van-radio name="2">
           {{ $t('radio') }} 2
-          <template v-slot:icon="{ checked }">
+          <template #icon="{ checked }">
             <img :src="checked ? icon.active : icon.inactive">
           </template>
         </van-radio>

packages/search/demo/index.vue

@@ -28,7 +28,7 @@
         :label="$t('label')"
         @search="onSearch"
       >
-        <template v-slot:action>
+        <template #action>
           <div @click="onSearch">{{ $t('search') }}</div>
         </template>
       </van-search>

packages/sku/demo/index.vue

@@ -103,12 +103,12 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         >
-          <template v-slot:sku-header-price="{ price }">
+          <template #sku-header-price="{ price }">
             <div class="van-sku__goods-price">
               <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ price }}</span>
             </div>
           </template>
-          <template v-slot:sku-actions="{ skuEventBus }">
+          <template #sku-actions="{ skuEventBus }">
             <div class="van-sku-actions">
               <van-button
                 square

packages/slider/demo/index.vue

@@ -45,7 +45,7 @@
         v-model="value6"
         active-color="#f44"
       >
-        <template v-slot:button>
+        <template #button>
           <div class="custom-button">{{ value6 }}</div>
         </template>
       </van-slider>

packages/submit-bar/demo/index.vue

@@ -35,7 +35,7 @@
         @submit="onClickButton"
       >
         <van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
-        <template v-slot:tip>
+        <template #tip>
           {{ $t('tip2') }}
           <span
             class="edit-address"

packages/swipe-cell/demo/index.vue

@@ -4,7 +4,7 @@
       <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
       <demo-block :title="$t('basicUsage')">
         <van-swipe-cell>
-          <template v-slot:left>
+          <template #left>
             <van-button
               square
               type="danger"
@@ -16,7 +16,7 @@
             :title="$t('title')"
             :value="$t('content')"
           />
-          <template v-slot:right>
+          <template #right>
             <van-button
               square
               type="danger"
@@ -28,7 +28,7 @@
 
       <demo-block :title="$t('title2')">
         <van-swipe-cell :on-close="onClose">
-          <template v-slot:left>
+          <template #left>
             <van-button
               square
               type="danger"
@@ -40,7 +40,7 @@
             :title="$t('title')"
             :value="$t('content')"
           />
-          <template v-slot:right>
+          <template #right>
             <van-button
               square
               type="danger"

packages/swipe/demo/index.vue

@@ -70,7 +70,7 @@
         <van-swipe-item>3</van-swipe-item>
         <van-swipe-item>4</van-swipe-item>
 
-        <template v-slot:indicator>
+        <template #indicator>
           <div class="custom-indicator">{{ current + 1 }}/4</div>
         </template>
       </van-swipe>

packages/tab/demo/index.vue

@@ -82,7 +82,7 @@
           v-for="index in 2"
           :key="index"
         >
-          <template v-slot:title>
+          <template #title>
             <van-icon name="more-o" />{{ $t('tab') }}
           </template>
           {{ $t('content') }} {{ index }}

packages/tabbar/demo/index.vue

@@ -66,7 +66,7 @@
       <van-tabbar v-model="active3">
         <van-tabbar-item info="3">
           <span>{{ $t('custom') }}</span>
-          <template v-slot:icon="{ active }">
+          <template #icon="{ active }">
             <img :src="active ? icon.active : icon.normal">
           </template>
         </van-tabbar-item>