chore: prettier all demos

src/action-sheet/demo/index.vue

@@ -1,17 +1,31 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button type="primary" @click="show1 = true">{{ $t('buttonText') }}</van-button>
+      <van-button type="primary" @click="show1 = true">
-      <van-action-sheet v-model="show1" :actions="simpleActions" @select="onSelect" />
+        {{ $t('buttonText') }}
+      </van-button>
+      <van-action-sheet
+        v-model="show1"
+        :actions="simpleActions"
+        @select="onSelect"
+      />
     </demo-block>
 
     <demo-block :title="$t('status')">
-      <van-button type="primary" @click="show2 = true">{{ $t('buttonText') }}</van-button>
+      <van-button type="primary" @click="show2 = true">
-      <van-action-sheet v-model="show2" close-on-click-action :actions="statusActions" />
+        {{ $t('buttonText') }}
+      </van-button>
+      <van-action-sheet
+        v-model="show2"
+        close-on-click-action
+        :actions="statusActions"
+      />
     </demo-block>
 
     <demo-block :title="$t('showCancel')">
-      <van-button type="primary" @click="show3 = true">{{ $t('buttonText') }}</van-button>
+      <van-button type="primary" @click="show3 = true">
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet
         v-model="show3"
         :actions="simpleActions"
@@ -22,7 +36,9 @@
     </demo-block>
 
     <demo-block :title="$t('showDescription')">
-      <van-button type="primary" @click="show4 = true">{{ $t('buttonText') }}</van-button>
+      <van-button type="primary" @click="show4 = true">
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet
         v-model="show4"
         :actions="simpleActions"
@@ -32,7 +48,9 @@
     </demo-block>
 
     <demo-block :title="$t('showTitle')">
-      <van-button type="primary" @click="show5 = true">{{ $t('buttonText') }}</van-button>
+      <van-button type="primary" @click="show5 = true">
+        {{ $t('buttonText') }}
+      </van-button>
       <van-action-sheet v-model="show5" :title="$t('title')">
         <p>{{ $t('content') }}</p>
       </van-action-sheet>

src/action-sheet/test/__snapshots__/demo.spec.js.snap

@@ -2,19 +2,29 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出菜单</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出菜单
+    </span></button>
     <!---->
   </div>
 </div>

src/address-edit/demo/index.vue

@@ -24,27 +24,35 @@ export default {
   i18n: {
     'zh-CN': {
       areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
-      searchResult: [{
+      searchResult: [
-        name: '黄龙万科中心',
+        {
-        address: '杭州市西湖区',
+          name: '黄龙万科中心',
-      }, {
+          address: '杭州市西湖区',
-        name: '黄龙万科中心G座',
+        },
-      }, {
+        {
-        name: '黄龙万科中心H座',
+          name: '黄龙万科中心G座',
-        address: '杭州市西湖区',
+        },
-      }],
+        {
+          name: '黄龙万科中心H座',
+          address: '杭州市西湖区',
+        },
+      ],
     },
     'en-US': {
       areaColumnsPlaceholder: ['Choose', 'Choose', 'Choose'],
-      searchResult: [{
+      searchResult: [
-        name: 'Name1',
+        {
-        address: 'Address',
+          name: 'Name1',
-      }, {
+          address: 'Address',
-        name: 'Name2',
+        },
-      }, {
+        {
-        name: 'Name3',
+          name: 'Name2',
-        address: 'Address',
+        },
-      }],
+        {
+          name: 'Name3',
+          address: 'Address',
+        },
+      ],
     },
   },
 

src/area/demo/index.vue

@@ -5,10 +5,7 @@
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-area
+      <van-area :area-list="$t('areaList')" :value="value" />
-        :area-list="$t('areaList')"
-        :value="value"
-      />
     </demo-block>
 
     <demo-block :title="$t('title3')">

src/button/demo/index.vue

@@ -59,14 +59,21 @@
     </demo-block>
 
     <demo-block :title="$t('router')">
-      <van-button :text="$t('urlRoute')" type="primary" url="/vant/mobile.html" />
+      <van-button
+        :text="$t('urlRoute')"
+        type="primary"
+        url="/vant/mobile.html"
+      />
       <van-button :text="$t('vueRoute')" type="primary" to="index" />
     </demo-block>
 
     <demo-block :title="$t('customColor')">
       <van-button color="#7232dd" :text="$t('pure')" />
       <van-button plain color="#7232dd" :text="$t('pure')" />
-      <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
+      <van-button
+        color="linear-gradient(to right, #4bb0ff, #6149f6)"
+        :text="$t('gradient')"
+      />
     </demo-block>
   </demo-section>
 </template>

src/card/demo/index.vue

@@ -32,17 +32,10 @@
       >
         <template #tags>
           <div>
-            <van-tag
+            <van-tag plain type="danger" style="margin-right: 5px;">
-              plain
-              type="danger"
-              style="margin-right: 5px;"
-            >
               标签
             </van-tag>
-            <van-tag
+            <van-tag plain type="danger">
-              plain
-              type="danger"
-            >
               标签
             </van-tag>
           </div>
@@ -50,16 +43,10 @@
 
         <template #footer>
           <div>
-            <van-button
+            <van-button round size="mini">
-              round
-              size="mini"
-            >
               {{ $t('button') }}
             </van-button>
-            <van-button
+            <van-button round size="mini">
-              round
-              size="mini"
-            >
               {{ $t('button') }}
             </van-button>
           </div>

src/cell/demo/index.vue

@@ -3,13 +3,22 @@
     <demo-block :title="$t('basicUsage')">
       <van-cell-group>
         <van-cell :title="$t('cell')" :value="$t('content')" />
-        <van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
+        <van-cell
+          :title="$t('cell')"
+          :value="$t('content')"
+          :label="$t('desc')"
+        />
       </van-cell-group>
     </demo-block>
 
     <demo-block :title="$t('largeSize')">
       <van-cell :title="$t('cell')" :value="$t('content')" size="large" />
-      <van-cell :title="$t('cell')" :value="$t('content')" size="large" :label="$t('desc')" />
+      <van-cell
+        :title="$t('cell')"
+        :value="$t('content')"
+        size="large"
+        :label="$t('desc')"
+      />
     </demo-block>
 
     <demo-block :title="$t('showIcon')">
@@ -23,7 +32,12 @@
     <demo-block :title="$t('showArrow')">
       <van-cell :title="$t('cell')" is-link />
       <van-cell :title="$t('cell')" is-link :value="$t('content')" />
-      <van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
+      <van-cell
+        :title="$t('cell')"
+        is-link
+        arrow-direction="down"
+        :value="$t('content')"
+      />
     </demo-block>
 
     <demo-block :title="$t('router')">
@@ -56,7 +70,12 @@
     </demo-block>
 
     <demo-block :title="$t('verticalCenter')">
-      <van-cell center :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
+      <van-cell
+        center
+        :title="$t('cell')"
+        :value="$t('content')"
+        :label="$t('desc')"
+      />
     </demo-block>
   </demo-section>
 </template>

src/checkbox/demo/index.vue

@@ -70,8 +70,12 @@
       </van-checkbox-group>
 
       <div class="demo-checkbox-buttons">
-        <van-button type="primary" @click="checkAll">{{ $t('checkAll') }}</van-button>
+        <van-button type="primary" @click="checkAll">
-        <van-button type="info" @click="toggleAll">{{ $t('inverse') }}</van-button>
+          {{ $t('checkAll') }}
+        </van-button>
+        <van-button type="info" @click="toggleAll">
+          {{ $t('inverse') }}
+        </van-button>
       </div>
     </demo-block>
 
@@ -136,11 +140,7 @@ export default {
       checkboxShape: true,
       checkboxLabel: true,
       checboxIcon: true,
-      list: [
+      list: ['a', 'b', 'c'],
-        'a',
-        'b',
-        'c',
-      ],
       result: ['a', 'b'],
       result2: [],
       result3: [],
@@ -167,7 +167,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-checkbox {
   background: @white;

src/checkbox/test/__snapshots__/demo.spec.js.snap

@@ -108,7 +108,11 @@ exports[`renders demo correctly 1`] = `
             <!----></i></div><span class="van-checkbox__label">复选框 c</span>
       </div>
     </div>
-    <div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">全选</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">反选</span></button></div>
+    <div class="demo-checkbox-buttons"><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+        全选
+      </span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">
+        反选
+      </span></button></div>
   </div>
   <div>
     <div class="van-checkbox-group">

src/circle/demo/index.vue

@@ -58,12 +58,7 @@
     </demo-block>
 
     <div style="margin-top: 15px;">
-      <van-button
+      <van-button :text="$t('add')" type="primary" size="small" @click="add" />
-        :text="$t('add')"
-        type="primary"
-        size="small"
-        @click="add"
-      />
       <van-button
         :text="$t('decrease')"
         type="danger"
@@ -124,7 +119,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-circle {
   .van-circle {

src/col/demo/index.vue

@@ -9,19 +9,13 @@
 
       <van-row>
         <van-col span="4">span: 4</van-col>
-        <van-col
+        <van-col span="10" offset="4">
-          span="10"
-          offset="4"
-        >
           offset: 4, span: 10
         </van-col>
       </van-row>
 
       <van-row>
-        <van-col
+        <van-col offset="12" span="12">
-          offset="12"
-          span="12"
-        >
           offset: 12, span: 12
         </van-col>
       </van-row>
@@ -35,47 +29,32 @@
       </van-row>
     </demo-block>
 
-    <demo-block
+    <demo-block v-if="!isWeapp" :title="$t('title3')">
-      v-if="!isWeapp"
-      :title="$t('title3')"
-    >
       <van-row type="flex">
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row
+      <van-row type="flex" justify="center">
-        type="flex"
-        justify="center"
-      >
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row
+      <van-row type="flex" justify="end">
-        type="flex"
-        justify="end"
-      >
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row
+      <van-row type="flex" justify="space-between">
-        type="flex"
-        justify="space-between"
-      >
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row
+      <van-row type="flex" justify="space-around">
-        type="flex"
-        justify="space-around"
-      >
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>
         <van-col span="6">span: 6</van-col>

src/collapse/demo/index.vue

@@ -2,25 +2,29 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-collapse v-model="active1">
-        <van-collapse-item :title="$t('title') + 1">{{ $t('text') }}</van-collapse-item>
+        <van-collapse-item :title="$t('title') + 1">
-        <van-collapse-item :title="$t('title') + 2">{{ $t('text') }}</van-collapse-item>
+          {{ $t('text') }}
-        <van-collapse-item
+        </van-collapse-item>
-          :title="$t('title') + 3"
+        <van-collapse-item :title="$t('title') + 2">
-          disabled
+          {{ $t('text') }}
-        >
+        </van-collapse-item>
+        <van-collapse-item :title="$t('title') + 3" disabled>
           {{ $t('text') }}
         </van-collapse-item>
       </van-collapse>
     </demo-block>
 
     <demo-block :title="$t('accordion')">
-      <van-collapse
+      <van-collapse v-model="active2" accordion>
-        v-model="active2"
+        <van-collapse-item :title="$t('title') + 1">
-        accordion
+          {{ $t('text') }}
-      >
+        </van-collapse-item>
-        <van-collapse-item :title="$t('title') + 1">{{ $t('text') }}</van-collapse-item>
+        <van-collapse-item :title="$t('title') + 2">
-        <van-collapse-item :title="$t('title') + 2">{{ $t('text') }}</van-collapse-item>
+          {{ $t('text') }}
-        <van-collapse-item :title="$t('title') + 3">{{ $t('text') }}</van-collapse-item>
+        </van-collapse-item>
+        <van-collapse-item :title="$t('title') + 3">
+          {{ $t('text') }}
+        </van-collapse-item>
       </van-collapse>
     </demo-block>
 

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

@@ -10,7 +10,9 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
         </div>
         <div class="van-collapse-item__wrapper">
-          <div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
+          <div class="van-collapse-item__content">
+            代码是写出来给人看的，附带能在机器上运行
+          </div>
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">
@@ -35,7 +37,9 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
         </div>
         <div class="van-collapse-item__wrapper">
-          <div class="van-collapse-item__content">代码是写出来给人看的，附带能在机器上运行</div>
+          <div class="van-collapse-item__content">
+            代码是写出来给人看的，附带能在机器上运行
+          </div>
         </div>
       </div>
       <div class="van-collapse-item van-hairline--top">

src/contact-card/demo/index.vue

@@ -8,11 +8,7 @@
         @click="showList = true"
       />
 
-      <van-popup
+      <van-popup v-model="showList" position="bottom" :lazy-render="false">
-        v-model="showList"
-        position="bottom"
-        :lazy-render="false"
-      >
         <van-contact-list
           v-model="chosenContactId"
           :list="list"
@@ -23,11 +19,7 @@
         />
       </van-popup>
 
-      <van-popup
+      <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
-        v-model="showEdit"
-        position="bottom"
-        :lazy-render="false"
-      >
         <van-contact-edit
           show-set-default
           :set-default-label="$t('defaultLabel')"

src/dialog/demo/index.vue

@@ -1,21 +1,36 @@
 <template>
   <demo-section>
     <demo-block :title="$t('alert1')">
-      <van-button type="primary" @click="onClickAlert">{{ $t('alert1') }}</van-button>
+      <van-button type="primary" @click="onClickAlert">
-      <van-button type="primary" @click="onClickAlert2">{{ $t('alert2') }}</van-button>
+        {{ $t('alert1') }}
+      </van-button>
+      <van-button type="primary" @click="onClickAlert2">
+        {{ $t('alert2') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('confirm')">
-      <van-button type="primary" @click="onClickConfirm">{{ $t('confirm') }}</van-button>
+      <van-button type="primary" @click="onClickConfirm">
+        {{ $t('confirm') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('asyncClose')">
-      <van-button type="primary" @click="onClickAsyncClose">{{ $t('asyncClose') }}</van-button>
+      <van-button type="primary" @click="onClickAsyncClose">
+        {{ $t('asyncClose') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('componentCall')">
-      <van-button type="primary" @click="show = true">{{ $t('componentCall') }}</van-button>
+      <van-button type="primary" @click="show = true">
-      <van-dialog v-model="show" :title="$t('title')" show-cancel-button :lazy-render="false">
+        {{ $t('componentCall') }}
+      </van-button>
+      <van-dialog
+        v-model="show"
+        :title="$t('title')"
+        show-cancel-button
+        :lazy-render="false"
+      >
         <img :src="image" />
       </van-dialog>
     </demo-block>

src/dialog/test/__snapshots__/demo.spec.js.snap

@@ -2,10 +2,20 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">提示弹窗</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">提示弹窗（无标题）</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">确认弹窗</span></button></div>
+      提示弹窗
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">异步关闭</span></button></div>
+    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">组件调用</span></button>
+      提示弹窗（无标题）
+    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      确认弹窗
+    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      异步关闭
+    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      组件调用
+    </span></button>
     <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
       <div class="van-dialog__header">标题</div>
       <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>

src/divider/demo/index.vue

@@ -21,16 +21,15 @@
     </demo-block>
 
     <demo-block :title="$t('dashed')">
-      <van-divider
+      <van-divider dashed :hairline="false">
-        dashed
-        :hairline="false"
-      >
         {{ $t('text') }}
       </van-divider>
     </demo-block>
 
     <demo-block :title="$t('customStyle')">
-      <van-divider :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }">
+      <van-divider
+        :style="{ borderColor: BLUE, color: BLUE, padding: '0 16px' }"
+      >
         {{ $t('text') }}
       </van-divider>
     </demo-block>
@@ -67,7 +66,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-divider {
   background-color: @white;

src/dropdown-menu/demo/index.vue

@@ -13,7 +13,9 @@
         <van-dropdown-item :title="$t('itemTitle')" ref="item">
           <van-switch-cell v-model="switch1" :title="$t('switchTitle1')" />
           <van-switch-cell v-model="switch2" :title="$t('switchTitle2')" />
-          <van-button type="info" block @click="onConfirm">{{ $t('confirm') }}</van-button>
+          <van-button type="info" block @click="onConfirm">
+            {{ $t('confirm') }}
+          </van-button>
         </van-dropdown-item>
       </van-dropdown-menu>
     </demo-block>

src/goods-action/demo/index.vue

@@ -1,12 +1,27 @@
-
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-goods-action>
-        <van-goods-action-icon icon="chat-o" :text="$t('icon1')" @click="onClickIcon" />
+        <van-goods-action-icon
-        <van-goods-action-icon icon="cart-o" :text="$t('icon2')" @click="onClickIcon" />
+          icon="chat-o"
-        <van-goods-action-button type="warning" :text="$t('button1')" @click="onClickButton" />
+          :text="$t('icon1')"
-        <van-goods-action-button type="danger" :text="$t('button2')" @click="onClickButton" />
+          @click="onClickIcon"
+        />
+        <van-goods-action-icon
+          icon="cart-o"
+          :text="$t('icon2')"
+          @click="onClickIcon"
+        />
+        <van-goods-action-button
+          type="warning"
+          :text="$t('button1')"
+          @click="onClickButton"
+        />
+        <van-goods-action-button
+          type="danger"
+          :text="$t('button2')"
+          @click="onClickButton"
+        />
       </van-goods-action>
     </demo-block>
 
@@ -22,9 +37,17 @@
 
     <demo-block v-if="!isWeapp" :title="$t('customIconColor')">
       <van-goods-action>
-        <van-goods-action-icon icon="chat-o" :text="$t('icon1')" color="#07c160" />
+        <van-goods-action-icon
+          icon="chat-o"
+          :text="$t('icon1')"
+          color="#07c160"
+        />
         <van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
-        <van-goods-action-icon icon="star" :text="$t('collected')" color="#ff5000" />
+        <van-goods-action-icon
+          icon="star"
+          :text="$t('collected')"
+          color="#ff5000"
+        />
         <van-goods-action-button type="warning" :text="$t('button1')" />
         <van-goods-action-button type="danger" :text="$t('button2')" />
       </van-goods-action>
@@ -34,8 +57,16 @@
       <van-goods-action>
         <van-goods-action-icon icon="chat-o" :text="$t('icon1')" />
         <van-goods-action-icon icon="cart-o" :text="$t('icon2')" />
-        <van-goods-action-button color="#be99ff" type="warning" :text="$t('button1')" />
+        <van-goods-action-button
-        <van-goods-action-button color="#7232dd" type="danger" :text="$t('button2')" />
+          color="#be99ff"
+          type="warning"
+          :text="$t('button1')"
+        />
+        <van-goods-action-button
+          color="#7232dd"
+          type="danger"
+          :text="$t('button2')"
+        />
       </van-goods-action>
     </demo-block>
   </demo-section>

src/grid/demo/index.vue

@@ -2,46 +2,79 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-grid>
-        <van-grid-item v-for="i in 4" :key="i" icon="photo-o" :text="$t('text')" />
+        <van-grid-item
+          v-for="i in 4"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('columnNum')">
       <van-grid :column-num="3">
-        <van-grid-item v-for="i in 6" :key="i" icon="photo-o" :text="$t('text')" />
+        <van-grid-item
+          v-for="i in 6"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('customContent')">
       <van-grid :border="false" :column-num="3">
         <van-grid-item>
-          <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-1.jpg"
+          />
         </van-grid-item>
         <van-grid-item>
-          <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-2.jpg"
+          />
         </van-grid-item>
         <van-grid-item>
-          <van-image fit="contain" src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-3.jpg"
+          />
         </van-grid-item>
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('square')">
       <van-grid square>
-        <van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="$t('text')" />
+        <van-grid-item
+          v-for="i in 8"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('gutter')">
       <van-grid :gutter="10">
-        <van-grid-item v-for="i in 8" :key="i" icon="photo-o" :text="$t('text')" />
+        <van-grid-item
+          v-for="i in 8"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
       </van-grid>
     </demo-block>
 
     <demo-block :title="$t('route')">
       <van-grid clickable :column-num="2">
         <van-grid-item icon="home-o" :text="$t('vueRoute')" to="/" />
-        <van-grid-item icon="search" :text="$t('urlRoute')" url="/vant/mobile.html" />
+        <van-grid-item
+          icon="search"
+          :text="$t('urlRoute')"
+          url="/vant/mobile.html"
+        />
       </van-grid>
     </demo-block>
 

src/index-bar/demo/index.vue

@@ -3,10 +3,7 @@
     <van-tabs v-model="activeTab" :color="BLUE">
       <van-tab :title="$t('basicUsage')">
         <van-index-bar>
-          <div
+          <div v-for="index in indexList" :key="index">
-            v-for="index in indexList"
-            :key="index"
-          >
             <van-index-anchor :index="index" />
             <van-cell :title="$t('text')" />
             <van-cell :title="$t('text')" />
@@ -17,10 +14,7 @@
 
       <van-tab :title="$t('customIndexList')">
         <van-index-bar :index-list="customIndexList">
-          <div
+          <div v-for="index in customIndexList" :key="index">
-            v-for="index in customIndexList"
-            :key="index"
-          >
             <van-index-anchor :index="index">
               {{ $t('title') + index }}
             </van-index-anchor>

src/lazyload/demo/index.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-lazyload {
   padding-right: @padding-md;

src/list/demo/index.vue

@@ -2,30 +2,20 @@
   <demo-section>
     <van-tabs>
       <van-tab :title="$t('basicUsage')">
-        <van-pull-refresh
+        <van-pull-refresh v-model="list[0].refreshing" @refresh="onRefresh(0)">
-          v-model="list[0].refreshing"
-          @refresh="onRefresh(0)"
-        >
           <van-list
             v-model="list[0].loading"
             :finished="list[0].finished"
             :finished-text="$t('finishedText')"
             @load="onLoad(0)"
           >
-            <van-cell
+            <van-cell v-for="item in list[0].items" :key="item" :title="item" />
-              v-for="item in list[0].items"
-              :key="item"
-              :title="item"
-            />
           </van-list>
         </van-pull-refresh>
       </van-tab>
 
       <van-tab :title="$t('errorInfo')">
-        <van-pull-refresh
+        <van-pull-refresh v-model="list[1].refreshing" @refresh="onRefresh(1)">
-          v-model="list[1].refreshing"
-          @refresh="onRefresh(1)"
-        >
           <van-list
             v-model="list[1].loading"
             :finished="list[1].finished"
@@ -33,11 +23,7 @@
             :error-text="$t('errorText')"
             @load="onLoad(1)"
           >
-            <van-cell
+            <van-cell v-for="item in list[1].items" :key="item" :title="item" />
-              v-for="item in list[1].items"
-              :key="item"
-              :title="item"
-            />
           </van-list>
         </van-pull-refresh>
       </van-tab>
@@ -62,19 +48,22 @@ export default {
 
   data() {
     return {
-      list: [{
+      list: [
-        items: [],
+        {
-        refreshing: false,
+          items: [],
-        loading: false,
+          refreshing: false,
-        error: false,
+          loading: false,
-        finished: false,
+          error: false,
-      }, {
+          finished: false,
-        items: [],
+        },
-        refreshing: false,
+        {
-        loading: false,
+          items: [],
-        error: false,
+          refreshing: false,
-        finished: false,
+          loading: false,
-      }],
+          error: false,
+          finished: false,
+        },
+      ],
     };
   },
 

src/loading/demo/index.vue

@@ -7,10 +7,7 @@
 
     <demo-block :title="$t('color')">
       <van-loading color="#1989fa" />
-      <van-loading
+      <van-loading type="spinner" color="#1989fa" />
-        type="spinner"
-        color="#1989fa"
-      />
     </demo-block>
 
     <demo-block :title="$t('text')">
@@ -20,10 +17,7 @@
     </demo-block>
 
     <demo-block :title="$t('vertical')">
-      <van-loading
+      <van-loading size="24px" vertical>
-        size="24px"
-        vertical
-      >
         {{ $t('loading') }}
       </van-loading>
     </demo-block>
@@ -50,7 +44,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-loading {
   background: @white;

src/nav-bar/demo/index.vue

@@ -12,11 +12,7 @@
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-nav-bar
+      <van-nav-bar :title="$t('title')" :left-text="$t('back')" left-arrow>
-        :title="$t('title')"
-        :left-text="$t('back')"
-        left-arrow
-      >
         <template #right>
           <van-icon name="search" />
         </template>

src/notice-bar/demo/index.vue

@@ -1,36 +1,20 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-notice-bar
+      <van-notice-bar :text="$t('text')" left-icon="volume-o" />
-        :text="$t('text')"
-        left-icon="volume-o"
-      />
     </demo-block>
 
     <demo-block :title="$t('unscrollable')">
-      <van-notice-bar
+      <van-notice-bar :scrollable="false" :text="$t('text')" />
-        :scrollable="false"
-        :text="$t('text')"
-      />
     </demo-block>
 
     <demo-block :title="$t('wrapable')">
-      <van-notice-bar
+      <van-notice-bar wrapable :scrollable="false" :text="$t('text')" />
-        wrapable
-        :scrollable="false"
-        :text="$t('text')"
-      />
     </demo-block>
 
     <demo-block :title="$t('mode')">
-      <van-notice-bar
+      <van-notice-bar mode="closeable" :text="$t('text')" />
-        mode="closeable"
+      <van-notice-bar mode="link" :text="$t('text')" />
-        :text="$t('text')"
-      />
-      <van-notice-bar
-        mode="link"
-        :text="$t('text')"
-      />
     </demo-block>
 
     <demo-block :title="$t('customStyle')">
@@ -51,14 +35,16 @@ export default {
       unscrollable: '禁用滚动',
       mode: '通知栏模式',
       wrapable: '多行展示',
-      text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
+      text:
+        '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
       customStyle: '自定义样式',
     },
     'en-US': {
       mode: 'Mode',
       wrapable: 'Wrapable',
       unscrollable: 'Disable scroll',
-      text: 'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
+      text:
+        'Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.',
       customStyle: 'Custom Style',
     },
   },

src/notify/demo/index.vue

@@ -6,17 +6,41 @@
 
     <demo-block :title="$t('notifyType')">
       <div style="margin-bottom: 15px;">
-        <van-button type="info" :text="$t('primary')" @click="showType('primary')" />
+        <van-button
-        <van-button type="primary" :text="$t('success')" @click="showType('success')" />
+          type="info"
+          :text="$t('primary')"
+          @click="showType('primary')"
+        />
+        <van-button
+          type="primary"
+          :text="$t('success')"
+          @click="showType('success')"
+        />
       </div>
 
-      <van-button type="danger" :text="$t('danger')" @click="showType('danger')" />
+      <van-button
-      <van-button type="warning" :text="$t('warning')" @click="showType('warning')" />
+        type="danger"
+        :text="$t('danger')"
+        @click="showType('danger')"
+      />
+      <van-button
+        type="warning"
+        :text="$t('warning')"
+        @click="showType('warning')"
+      />
     </demo-block>
 
     <demo-block :title="$t('customNotify')">
-      <van-button type="primary" :text="$t('customColor')" @click="showCustomColor" />
+      <van-button
-      <van-button type="primary" :text="$t('customDuration')" @click="showCustomDuration" />
+        type="primary"
+        :text="$t('customColor')"
+        @click="showCustomColor"
+      />
+      <van-button
+        type="primary"
+        :text="$t('customDuration')"
+        @click="showCustomDuration"
+      />
     </demo-block>
   </demo-section>
 </template>

src/number-keyboard/demo/index.vue

@@ -1,7 +1,9 @@
 <template>
   <demo-section>
     <demo-block :title="$t('default')">
-      <van-button type="primary" @touchstart.stop="keyboard = 'default'">{{ $t('button1') }}</van-button>
+      <van-button type="primary" @touchstart.stop="keyboard = 'default'">
+        {{ $t('button1') }}
+      </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'default'"
@@ -14,7 +16,9 @@
     </demo-block>
 
     <demo-block :title="$t('custom')">
-      <van-button type="info" @touchstart.stop="keyboard = 'custom'">{{ $t('button2') }}</van-button>
+      <van-button type="info" @touchstart.stop="keyboard = 'custom'">
+        {{ $t('button2') }}
+      </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'custom'"
@@ -45,7 +49,9 @@
     </demo-block>
 
     <demo-block :title="$t('extraKey')">
-      <van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">{{ $t('button3') }}</van-button>
+      <van-button plain type="primary" @touchstart.stop="keyboard = 'extraKey'">
+        {{ $t('button3') }}
+      </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'extraKey'"
@@ -58,7 +64,9 @@
     </demo-block>
 
     <demo-block :title="$t('title')">
-      <van-button plain type="info" @touchstart.stop="keyboard = 'title'">{{ $t('button4') }}</van-button>
+      <van-button plain type="info" @touchstart.stop="keyboard = 'title'">
+        {{ $t('button4') }}
+      </van-button>
 
       <van-number-keyboard
         :show="keyboard === 'title'"

src/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -2,13 +2,17 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">弹出默认键盘</span></button>
+  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      弹出默认键盘
+    </span></button>
     <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
-  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">弹出自定义键盘</span></button>
+  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
+      弹出自定义键盘
+    </span></button>
     <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--extra">.</i>
         <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
@@ -25,13 +29,17 @@ exports[`renders demo correctly 1`] = `
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">弹出身份证号码键盘</span></button>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+      弹出身份证号码键盘
+    </span></button>
     <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
-  <div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">弹出自定义标题键盘</span></button>
+  <div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
+      弹出自定义标题键盘
+    </span></button>
     <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>

src/overlay/demo/index.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-overlay {
   background: @white;

src/pagination/demo/index.vue

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-pagination {
   .van-pagination {

src/panel/demo/index.vue

@@ -1,28 +1,17 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-panel
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
-        :title="$t('title')"
-        :desc="$t('desc')"
-        :status="$t('status')"
-      >
         <div>{{ $t('content') }}</div>
       </van-panel>
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-panel
+      <van-panel :title="$t('title')" :desc="$t('desc')" :status="$t('status')">
-        :title="$t('title')"
-        :desc="$t('desc')"
-        :status="$t('status')"
-      >
         <div>{{ $t('content') }}</div>
         <template #footer>
           <van-button size="small">{{ $t('button') }}</van-button>
-          <van-button
+          <van-button size="small" type="danger">
-            size="small"
-            type="danger"
-          >
             {{ $t('button') }}
           </van-button>
         </template>

src/picker/demo/index.vue

@@ -5,7 +5,11 @@
     </demo-block>
 
     <demo-block :title="$t('defaultIndex')">
-      <van-picker :columns="$t('column1')" :default-index="2" @change="onChange1" />
+      <van-picker
+        :columns="$t('column1')"
+        :default-index="2"
+        @change="onChange1"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -63,7 +67,11 @@ export default {
       withPopup: '搭配弹出层使用',
       chooseCity: '选择城市',
       column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
-      column2: [{ text: '杭州', disabled: true }, { text: '宁波' }, { text: '温州' }],
+      column2: [
+        { text: '杭州', disabled: true },
+        { text: '宁波' },
+        { text: '温州' },
+      ],
       column3: {
         浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
         福建: ['福州', '厦门', '莆田', '三明', '泉州'],

src/popup/demo/index.vue

@@ -2,27 +2,62 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell :title="$t('buttonBasic')" is-link @click="showBasic = true" />
-      <van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">{{ $t('content') }}</van-popup>
+      <van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
+        {{ $t('content') }}
+      </van-popup>
     </demo-block>
 
     <demo-block :title="$t('position')">
       <van-cell :title="$t('buttonTop')" is-link @click="showTop = true" />
-      <van-cell :title="$t('buttonBottom')" is-link @click="showBottom = true" />
+      <van-cell
+        :title="$t('buttonBottom')"
+        is-link
+        @click="showBottom = true"
+      />
       <van-cell :title="$t('buttonLeft')" is-link @click="showLeft = true" />
       <van-cell :title="$t('buttonRight')" is-link @click="showRight = true" />
 
       <van-popup v-model="showTop" position="top" :style="{ height: '20%' }" />
-      <van-popup v-model="showBottom" position="bottom" :style="{ height: '20%' }" />
+      <van-popup
-      <van-popup v-model="showLeft" position="left" :style="{ width: '20%', height: '100%' }" />
+        v-model="showBottom"
-      <van-popup v-model="showRight" position="right" :style="{ width: '20%', height: '100%' }" />
+        position="bottom"
+        :style="{ height: '20%' }"
+      />
+      <van-popup
+        v-model="showLeft"
+        position="left"
+        :style="{ width: '20%', height: '100%' }"
+      />
+      <van-popup
+        v-model="showRight"
+        position="right"
+        :style="{ width: '20%', height: '100%' }"
+      />
     </demo-block>
 
     <demo-block :title="$t('closeIcon')">
-      <van-cell :title="$t('closeIcon')" is-link @click="showCloseIcon = true" />
+      <van-cell
-      <van-cell :title="$t('customCloseIcon')" is-link @click="showCustomCloseIcon = true" />
+        :title="$t('closeIcon')"
-      <van-cell :title="$t('customIconPosition')" is-link @click="showCustomIconPosition = true" />
+        is-link
+        @click="showCloseIcon = true"
+      />
+      <van-cell
+        :title="$t('customCloseIcon')"
+        is-link
+        @click="showCustomCloseIcon = true"
+      />
+      <van-cell
+        :title="$t('customIconPosition')"
+        is-link
+        @click="showCustomIconPosition = true"
+      />
 
-      <van-popup v-model="showCloseIcon" closeable position="bottom" :style="{ height: '20%' }" />
+      <van-popup
+        v-model="showCloseIcon"
+        closeable
+        position="bottom"
+        :style="{ height: '20%' }"
+      />
       <van-popup
         v-model="showCustomCloseIcon"
         closeable
@@ -40,13 +75,30 @@
     </demo-block>
 
     <demo-block :title="$t('roundCorner')">
-      <van-cell :title="$t('roundCorner')" is-link @click="showRoundCorner = true" />
+      <van-cell
-      <van-popup v-model="showRoundCorner" round position="bottom" :style="{ height: '20%' }" />
+        :title="$t('roundCorner')"
+        is-link
+        @click="showRoundCorner = true"
+      />
+      <van-popup
+        v-model="showRoundCorner"
+        round
+        position="bottom"
+        :style="{ height: '20%' }"
+      />
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="$t('getContainer')">
-      <van-cell :title="$t('getContainer')" is-link @click="showGetContainer = true" />
+      <van-cell
-      <van-popup v-model="showGetContainer" get-container="body" :style="{ padding: '30px 50px' }" />
+        :title="$t('getContainer')"
+        is-link
+        @click="showGetContainer = true"
+      />
+      <van-popup
+        v-model="showGetContainer"
+        get-container="body"
+        :style="{ padding: '30px 50px' }"
+      />
     </demo-block>
   </demo-section>
 </template>

src/progress/demo/index.vue

@@ -13,7 +13,11 @@
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-progress color="#f2826a" :percentage="25" :pivot-text="$t('orange')" />
+      <van-progress
+        color="#f2826a"
+        :percentage="25"
+        :pivot-text="$t('orange')"
+      />
       <van-progress color="#ee0a24" :percentage="50" :pivot-text="$t('red')" />
       <van-progress
         :percentage="75"

src/pull-refresh/demo/index.vue

@@ -27,9 +27,7 @@
             <img
               class="doge"
               src="https://b.yzcdn.cn/vant/doge.png"
-              :style="{
+              :style="{ transform: `scale(${distance / 80})` }"
-                transform: `scale(${distance / 80})`
-              }"
             />
           </template>
           <template #loosing>

src/radio/demo/index.vue

@@ -30,8 +30,12 @@
 
     <demo-block :title="$t('customColor')">
       <van-radio-group v-model="radio3" class="demo-radio-group">
-        <van-radio name="1" checked-color="#07c160">{{ $t('radio') }} 1</van-radio>
+        <van-radio name="1" checked-color="#07c160">
-        <van-radio name="2" checked-color="#07c160">{{ $t('radio') }} 2</van-radio>
+          {{ $t('radio') }} 1
+        </van-radio>
+        <van-radio name="2" checked-color="#07c160">
+          {{ $t('radio') }} 2
+        </van-radio>
       </van-radio-group>
     </demo-block>
 
@@ -125,7 +129,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-radio {
   background: @white;

src/radio/test/__snapshots__/demo.spec.js.snap

@@ -54,11 +54,15 @@ exports[`renders demo correctly 1`] = `
     <div role="radiogroup" class="demo-radio-group van-radio-group">
       <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"><i class="van-icon van-icon-success" style="border-color: #07c160; background-color: rgb(7, 193, 96);">
-            <!----></i></div><span class="van-radio__label">单选框 1</span>
+            <!----></i></div><span class="van-radio__label">
+        单选框 1
+      </span>
       </div>
       <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
         <div class="van-radio__icon van-radio__icon--round"><i class="van-icon van-icon-success">
-            <!----></i></div><span class="van-radio__label">单选框 2</span>
+            <!----></i></div><span class="van-radio__label">
+        单选框 2
+      </span>
       </div>
     </div>
   </div>

src/rate/demo/index.vue

@@ -5,11 +5,7 @@
     </demo-block>
 
     <demo-block :title="$t('customIcon')">
-      <van-rate
+      <van-rate v-model="value2" icon="like" void-icon="like-o" />
-        v-model="value2"
-        icon="like"
-        void-icon="like-o"
-      />
     </demo-block>
 
     <demo-block :title="$t('customStyle')">
@@ -33,24 +29,15 @@
     </demo-block>
 
     <demo-block :title="$t('customCount')">
-      <van-rate
+      <van-rate v-model="value5" :count="6" />
-        v-model="value5"
-        :count="6"
-      />
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-rate
+      <van-rate v-model="value6" disabled />
-        v-model="value6"
-        disabled
-      />
     </demo-block>
 
     <demo-block :title="$t('readonly')">
-      <van-rate
+      <van-rate v-model="value6" readonly />
-        v-model="value6"
-        readonly
-      />
     </demo-block>
   </demo-section>
 </template>
@@ -90,7 +77,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-rate {
   padding-bottom: 20px;

src/skeleton/demo/index.vue

@@ -1,31 +1,16 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-skeleton
+      <van-skeleton title :row="3" />
-        title
-        :row="3"
-      />
     </demo-block>
 
     <demo-block :title="$t('showAvatar')">
-      <van-skeleton
+      <van-skeleton title avatar :row="3" />
-        title
-        avatar
-        :row="3"
-      />
     </demo-block>
 
     <demo-block :title="$t('showChildren')">
-      <van-switch
+      <van-switch v-model="show" size="24px" />
-        v-model="show"
+      <van-skeleton title avatar :row="3" :loading="!show">
-        size="24px"
-      />
-      <van-skeleton
-        title
-        avatar
-        :row="3"
-        :loading="!show"
-      >
         <div class="demo-preview">
           <img src="https://img.yzcdn.cn/vant/logo.png" />
           <div class="demo-content">
@@ -45,7 +30,8 @@ export default {
       showAvatar: '显示头像',
       showChildren: '显示子组件',
       title: '关于 Vant',
-      desc: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
+      desc:
+        'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
     },
     'en-US': {
       showAvatar: 'Show Avatar',
@@ -64,7 +50,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-skeleton {
   background-color: @white;

src/sku/demo/index.vue

@@ -23,11 +23,7 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button
+        <van-button block type="primary" @click="showBase = true">
-          block
-          type="primary"
-          @click="showBase = true"
-        >
           {{ $t('basicUsage') }}
         </van-button>
       </div>
@@ -53,11 +49,7 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button
+        <van-button block type="primary" @click="showStepper = true">
-          block
-          type="primary"
-          @click="showStepper = true"
-        >
           {{ $t('title2') }}
         </van-button>
       </div>
@@ -84,11 +76,7 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button
+        <van-button block type="primary" @click="showSoldout = true">
-          block
-          type="primary"
-          @click="showSoldout = true"
-        >
           {{ $t('hideSoldoutSku') }}
         </van-button>
       </div>
@@ -117,7 +105,8 @@
         >
           <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>
+              <span class="van-sku__price-symbol">￥</span>
+              <span class="van-sku__price-num">{{ price }}</span>
             </div>
           </template>
           <template #sku-actions="{ skuEventBus }">
@@ -141,11 +130,7 @@
             </div>
           </template>
         </van-sku>
-        <van-button
+        <van-button block type="primary" @click="showCustom = true">
-          block
-          type="primary"
-          @click="showCustom = true"
-        >
           {{ $t('advancedUsage') }}
         </van-button>
       </div>
@@ -188,12 +173,14 @@ export default {
       customSkuValidator: () => '请选择xxx',
       customStepperConfig: {
         quotaText: '单次限购100件',
-        stockFormatter: (stock) => `剩余${stock}件`,
+        stockFormatter: stock => `剩余${stock}件`,
-        handleOverLimit: (data) => {
+        handleOverLimit: data => {
           const { action, limitType, quota, startSaleNum = 1 } = data;
 
           if (action === 'minus') {
-            this.$toast(startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品');
+            this.$toast(
+              startSaleNum > 1 ? `${startSaleNum}件起售` : '至少选择一件商品'
+            );
           } else if (action === 'plus') {
             if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
               this.$toast(`限购${quota}件`);
@@ -204,9 +191,10 @@ export default {
         },
       },
       messageConfig: {
-        uploadImg: (file, img) => new Promise(resolve => {
+        uploadImg: (file, img) =>
-          setTimeout(() => resolve(img), 1000);
+          new Promise(resolve => {
-        }),
+            setTimeout(() => resolve(img), 1000);
+          }),
         uploadMaxSize: 3,
       },
     };
@@ -229,7 +217,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-sku {
   background-color: @white;

src/slider/demo/index.vue

@@ -1,34 +1,19 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-slider
+      <van-slider v-model="value1" @change="onChange" />
-        v-model="value1"
-        @change="onChange"
-      />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-slider
+      <van-slider v-model="value2" :min="-50" :max="50" @change="onChange" />
-        v-model="value2"
-        :min="-50"
-        :max="50"
-        @change="onChange"
-      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-slider
+      <van-slider v-model="value3" disabled />
-        v-model="value3"
-        disabled
-      />
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-slider
+      <van-slider v-model="value4" :step="10" @change="onChange" />
-        v-model="value4"
-        :step="10"
-        @change="onChange"
-      />
     </demo-block>
 
     <demo-block :title="$t('customStyle')">
@@ -41,10 +26,7 @@
     </demo-block>
 
     <demo-block :title="$t('customButton')">
-      <van-slider
+      <van-slider v-model="value6" active-color="#ee0a24">
-        v-model="value6"
-        active-color="#ee0a24"
-      >
         <template #button>
           <div class="custom-button">{{ value6 }}</div>
         </template>
@@ -53,11 +35,7 @@
 
     <demo-block v-if="!isWeapp" :title="$t('vertical')">
       <div :style="{ height: '120px', paddingLeft: '30px' }">
-        <van-slider
+        <van-slider v-model="value7" vertical @change="onChange" />
-          v-model="value7"
-          vertical
-          @change="onChange"
-        />
       </div>
     </demo-block>
   </demo-section>

src/steps/demo/index.vue

@@ -26,10 +26,7 @@
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-steps
+      <van-steps :active="0" direction="vertical">
-        :active="0"
-        direction="vertical"
-      >
         <van-step>
           <h3>{{ $t('status1') }}</h3>
           <p>2016-07-12 12:40</p>

src/sticky/demo/index.vue

@@ -2,20 +2,26 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-sticky>
-        <van-button type="primary" style="margin-left: 15px;">{{ $t('basicUsage') }}</van-button>
+        <van-button type="primary" style="margin-left: 15px;">
+          {{ $t('basicUsage') }}
+        </van-button>
       </van-sticky>
     </demo-block>
 
     <demo-block :title="$t('offsetTop')">
       <van-sticky :offset-top="50">
-        <van-button type="info" style="margin-left: 115px;">{{ $t('offsetTop') }}</van-button>
+        <van-button type="info" style="margin-left: 115px;">
+          {{ $t('offsetTop') }}
+        </van-button>
       </van-sticky>
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="$t('setContainer')">
       <div ref="container" style="height: 150px; background-color: #fff;">
         <van-sticky :container="container">
-          <van-button type="warning" style="margin-left: 215px;">{{ $t('setContainer') }}</van-button>
+          <van-button type="warning" style="margin-left: 215px;">
+            {{ $t('setContainer') }}
+          </van-button>
         </van-sticky>
       </div>
     </demo-block>

src/sticky/test/__snapshots__/demo.spec.js.snap

@@ -4,18 +4,24 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div>
-      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">基础用法</span></button></div>
+      <div class="van-sticky"><button class="van-button van-button--primary van-button--normal" style="margin-left: 15px;"><span class="van-button__text">
+        基础用法
+      </span></button></div>
     </div>
   </div>
   <div>
     <div style="height: 0px;">
-      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">吸顶距离</span></button></div>
+      <div class="van-sticky van-sticky--fixed" style="top: 50px;"><button class="van-button van-button--info van-button--normal" style="margin-left: 115px;"><span class="van-button__text">
+        吸顶距离
+      </span></button></div>
     </div>
   </div>
   <div>
     <div style="height: 150px; background-color: rgb(255, 255, 255);">
       <div>
-        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">指定容器</span></button></div>
+        <div class="van-sticky"><button class="van-button van-button--warning van-button--normal" style="margin-left: 215px;"><span class="van-button__text">
+          指定容器
+        </span></button></div>
       </div>
     </div>
   </div>

src/style/demo/index.vue

@@ -10,26 +10,10 @@
     </demo-block>
 
     <demo-block :title="$t('animation')">
-      <van-cell
+      <van-cell is-link title="Fade" @click="animate('van-fade')" />
-        is-link
+      <van-cell is-link title="Slide Up" @click="animate('van-slide-up')" />
-        title="Fade"
+      <van-cell is-link title="Slide Down" @click="animate('van-slide-down')" />
-        @click="animate('van-fade')"
+      <van-cell is-link title="Slide Left" @click="animate('van-slide-left')" />
-      />
-      <van-cell
-        is-link
-        title="Slide Up"
-        @click="animate('van-slide-up')"
-      />
-      <van-cell
-        is-link
-        title="Slide Down"
-        @click="animate('van-slide-down')"
-      />
-      <van-cell
-        is-link
-        title="Slide Left"
-        @click="animate('van-slide-left')"
-      />
       <van-cell
         is-link
         title="Slide Right"
@@ -38,10 +22,7 @@
     </demo-block>
 
     <transition :name="transitionName">
-      <div
+      <div v-show="show" class="demo-animate-block" />
-        v-show="show"
-        class="demo-animate-block"
-      />
     </transition>
   </demo-section>
 </template>
@@ -55,15 +36,18 @@ export default {
       animation: '动画',
       toggle: '切换动画',
       text1: '这是一段最多显示一行的文字，后面的内容会省略',
-      text2: '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
+      text2:
+        '这是一段最多显示两行的文字，后面的内容会省略。这是一段最多显示两行的文字，后面的内容会省略',
     },
     'en-US': {
       hairline: 'Hairline',
       ellipsis: 'Text Ellipsis',
       animation: 'Animation',
       toggle: 'Switch animation',
-      text1: 'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
+      text1:
-      text2: 'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
+        'This is a paragraph that displays up to one line of text, and the rest of the text will be omitted.',
+      text2:
+        'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
     },
   },
 

src/submit-bar/demo/index.vue

@@ -37,10 +37,7 @@
         <van-checkbox v-model="checked">{{ $t('check') }}</van-checkbox>
         <template #tip>
           {{ $t('tip2') }}
-          <span
+          <span class="edit-address" @click="onClickLink">
-            class="edit-address"
-            @click="onClickLink"
-          >
             {{ $t('tip3') }}
           </span>
         </template>

src/swipe-cell/demo/index.vue

@@ -4,11 +4,7 @@
       <demo-block :title="$t('basicUsage')">
         <van-swipe-cell>
           <template #left>
-            <van-button
+            <van-button square type="primary" :text="$t('select')" />
-              square
-              type="primary"
-              :text="$t('select')"
-            />
           </template>
           <van-cell
             :border="false"
@@ -16,16 +12,8 @@
             :value="$t('content')"
           />
           <template #right>
-            <van-button
+            <van-button square type="danger" :text="$t('delete')" />
-              square
+            <van-button square type="primary" :text="$t('collect')" />
-              type="danger"
-              :text="$t('delete')"
-            />
-            <van-button
-              square
-              type="primary"
-              :text="$t('collect')"
-            />
           </template>
         </van-swipe-cell>
       </demo-block>
@@ -33,11 +21,7 @@
       <demo-block :title="$t('title2')">
         <van-swipe-cell :before-close="beforeClose">
           <template #left>
-            <van-button
+            <van-button square type="primary" :text="$t('select')" />
-              square
-              type="primary"
-              :text="$t('select')"
-            />
           </template>
           <van-cell
             :border="false"
@@ -45,11 +29,7 @@
             :value="$t('content')"
           />
           <template #right>
-            <van-button
+            <van-button square type="danger" :text="$t('delete')" />
-              square
-              type="danger"
-              :text="$t('delete')"
-            />
           </template>
         </van-swipe-cell>
       </demo-block>
@@ -87,11 +67,13 @@ export default {
           instance.close();
           break;
         case 'right':
-          this.$dialog.confirm({
+          this.$dialog
-            message: this.$t('confirm'),
+            .confirm({
-          }).then(() => {
+              message: this.$t('confirm'),
-            instance.close();
+            })
-          });
+            .then(() => {
+              instance.close();
+            });
           break;
       }
     },

src/switch-cell/demo/index.vue

@@ -2,30 +2,19 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell-group>
-        <van-switch-cell
+        <van-switch-cell v-model="checked" :title="$t('title')" />
-          v-model="checked"
-          :title="$t('title')"
-        />
       </van-cell-group>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
       <van-cell-group>
-        <van-switch-cell
+        <van-switch-cell v-model="checked" disabled :title="$t('title')" />
-          v-model="checked"
-          disabled
-          :title="$t('title')"
-        />
       </van-cell-group>
     </demo-block>
 
     <demo-block :title="$t('loadingStatus')">
       <van-cell-group>
-        <van-switch-cell
+        <van-switch-cell v-model="checked" loading :title="$t('title')" />
-          v-model="checked"
-          loading
-          :title="$t('title')"
-        />
       </van-cell-group>
     </demo-block>
   </demo-section>

src/tabbar/demo/index.vue

@@ -11,10 +11,18 @@
 
     <demo-block :title="$t('matchByName')">
       <van-tabbar v-model="activeName">
-        <van-tabbar-item name="home" icon="home-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item name="home" icon="home-o">
-        <van-tabbar-item name="search" icon="search">{{ $t('tab') }}</van-tabbar-item>
+          {{ $t('tab') }}
-        <van-tabbar-item name="friends" icon="friends-o">{{ $t('tab') }}</van-tabbar-item>
+        </van-tabbar-item>
-        <van-tabbar-item name="setting" icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item name="search" icon="search">
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item name="friends" icon="friends-o">
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item name="setting" icon="setting-o">
+          {{ $t('tab') }}
+        </van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
@@ -22,8 +30,12 @@
       <van-tabbar v-model="active2">
         <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="search" dot>{{ $t('tab') }}</van-tabbar-item>
-        <van-tabbar-item icon="friends-o" info="5">{{ $t('tab') }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o" info="5">
-        <van-tabbar-item icon="setting-o" info="20">{{ $t('tab') }}</van-tabbar-item>
+          {{ $t('tab') }}
+        </van-tabbar-item>
+        <van-tabbar-item icon="setting-o" info="20">
+          {{ $t('tab') }}
+        </van-tabbar-item>
       </van-tabbar>
     </demo-block>
 
@@ -41,7 +53,11 @@
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-tabbar v-model="active4" active-color="#07c160" inactive-color="#000">
+      <van-tabbar
+        v-model="active4"
+        active-color="#07c160"
+        inactive-color="#000"
+      >
         <van-tabbar-item icon="home-o">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="search">{{ $t('tab') }}</van-tabbar-item>
         <van-tabbar-item icon="friends-o">{{ $t('tab') }}</van-tabbar-item>

src/tabbar/test/__snapshots__/demo.spec.js.snap

@@ -41,28 +41,36 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
           <!---->
         </div>
-        <div class="van-tabbar-item__text">标签</div>
+        <div class="van-tabbar-item__text">
+          标签
+        </div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
             <!----></i>
           <!---->
         </div>
-        <div class="van-tabbar-item__text">标签</div>
+        <div class="van-tabbar-item__text">
+          标签
+        </div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
             <!----></i>
           <!---->
         </div>
-        <div class="van-tabbar-item__text">标签</div>
+        <div class="van-tabbar-item__text">
+          标签
+        </div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
             <!----></i>
           <!---->
         </div>
-        <div class="van-tabbar-item__text">标签</div>
+        <div class="van-tabbar-item__text">
+          标签
+        </div>
       </div>
     </div>
   </div>
@@ -87,14 +95,18 @@ exports[`renders demo correctly 1`] = `
             <!----></i>
           <div class="van-info">5</div>
         </div>
-        <div class="van-tabbar-item__text">标签</div>
+        <div class="van-tabbar-item__text">
+          标签
+        </div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
             <!----></i>
           <div class="van-info">20</div>
         </div>
-        <div class="van-tabbar-item__text">标签</div>
+        <div class="van-tabbar-item__text">
+          标签
+        </div>
       </div>
     </div>
   </div>

src/toast/demo/index.vue

@@ -1,13 +1,29 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-button type="primary" :text="$t('title1')" @click="$toast($t('text'))" />
+      <van-button
-      <van-button type="primary" :text="$t('longTextButton')" @click="$toast($t('longText'))" />
+        type="primary"
+        :text="$t('title1')"
+        @click="$toast($t('text'))"
+      />
+      <van-button
+        type="primary"
+        :text="$t('longTextButton')"
+        @click="$toast($t('longText'))"
+      />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-button type="primary" :text="$t('title2')" @click="showLoadingToast()" />
+      <van-button
-      <van-button type="primary" :text="$t('loadingType')" @click="showLoadingToast('spinner')" />
+        type="primary"
+        :text="$t('title2')"
+        @click="showLoadingToast()"
+      />
+      <van-button
+        type="primary"
+        :text="$t('loadingType')"
+        @click="showLoadingToast('spinner')"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -16,12 +32,24 @@
     </demo-block>
 
     <demo-block v-if="!isWeapp" :title="$t('customIcon')">
-      <van-button type="primary" :text="$t('customIcon')" @click="showIconToast" />
+      <van-button
-      <van-button type="primary" :text="$t('customImage')" @click="showImageToast" />
+        type="primary"
+        :text="$t('customIcon')"
+        @click="showIconToast"
+      />
+      <van-button
+        type="primary"
+        :text="$t('customImage')"
+        @click="showImageToast"
+      />
     </demo-block>
 
     <demo-block :title="$t('updateMessage')">
-      <van-button type="primary" :text="$t('updateMessage')" @click="showCustomizedToast" />
+      <van-button
+        type="primary"
+        :text="$t('updateMessage')"
+        @click="showCustomizedToast"
+      />
     </demo-block>
   </demo-section>
 </template>
@@ -53,7 +81,8 @@ export default {
       success: 'Success',
       fail: 'Fail',
       text: 'Some messages',
-      longText: 'This is a long message, text will wrap when over a certain length',
+      longText:
+        'This is a long message, text will wrap when over a certain length',
       text2: 'Success',
       text3: 'Fail',
       customIcon: 'Custom Icon',

src/tree-select/demo/index.vue

@@ -17,16 +17,31 @@
     </demo-block>
 
     <demo-block :title="$t('customContent')">
-      <van-tree-select height="55vw" :items="simpleItems" :main-active-index.sync="activeIndex3">
+      <van-tree-select
+        height="55vw"
+        :items="simpleItems"
+        :main-active-index.sync="activeIndex3"
+      >
         <template slot="content">
-          <van-image v-if="activeIndex3 === 0" src="https://img.yzcdn.cn/vant/apple-1.jpg" />
+          <van-image
-          <van-image v-if="activeIndex3 === 1" src="https://img.yzcdn.cn/vant/apple-2.jpg" />
+            v-if="activeIndex3 === 0"
+            src="https://img.yzcdn.cn/vant/apple-1.jpg"
+          />
+          <van-image
+            v-if="activeIndex3 === 1"
+            src="https://img.yzcdn.cn/vant/apple-2.jpg"
+          />
         </template>
       </van-tree-select>
     </demo-block>
 
     <demo-block :title="$t('showInfo')">
-      <van-tree-select height="55vw" :items="infoItems" :active-id.sync="activeId2" :main-active-index.sync="activeIndex4" />
+      <van-tree-select
+        height="55vw"
+        :items="infoItems"
+        :active-id.sync="activeId2"
+        :main-active-index.sync="activeIndex4"
+      />
     </demo-block>
   </demo-section>
 </template>

src/uploader/demo/index.vue

@@ -14,7 +14,9 @@
 
     <demo-block :title="$t('uploadStyle')">
       <van-uploader>
-        <van-button type="primary" icon="photo">{{ this.$t('upload') }}</van-button>
+        <van-button type="primary" icon="photo">
+          {{ this.$t('upload') }}
+        </van-button>
       </van-uploader>
     </demo-block>
 

src/uploader/test/__snapshots__/demo.spec.js.snap

@@ -51,7 +51,9 @@ exports[`renders demo correctly 1`] = `
     <div class="van-uploader">
       <div class="van-uploader__wrapper">
         <div class="van-uploader__input-wrapper"><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-photo van-button__icon">
-              <!----></i><span class="van-button__text">上传文件</span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
+              <!----></i><span class="van-button__text">
+        上传文件
+      </span></button><input type="file" accept="image/*" class="van-uploader__input"></div>
       </div>
     </div>
   </div>