[improvement] update eslint rules (#2089)

.eslintrc

@@ -3,21 +3,19 @@
   "env": {
     "jest": true
   },
-  "extends": ["plugin:vue-libs/recommended", "plugin:vue/strongly-recommended"],
+  "extends": ["plugin:vue-libs/recommended", "plugin:vue/recommended"],
   "rules": {
     "semi": ["error", "always"],
     "space-before-function-paren": ["error", "never"],
+    "vue/attributes-order": 0,
     "vue/require-v-for-key": 0,
     "vue/require-default-prop": 0,
-    "vue/name-property-casing": 0,
+    "vue/name-property-casing": ["error", "kebab-case"],
-    "vue/max-attributes-per-line": [
+    "vue/html-closing-bracket-newline": [
-      2,
+      "error",
       {
-        "singleline": 5,
+        "singleline": "never",
-        "multiline": {
+        "multiline": "always"
-          "max": 5,
-          "allowFirstLine": false
-        }
       }
     ]
   }

package.json

@@ -80,7 +80,7 @@
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.1",
     "dependency-tree": "^6.2.1",
-    "eslint": "^5.8.0",
+    "eslint": "^5.9.0",
     "eslint-plugin-vue-libs": "^3.0.0",
     "fast-glob": "^2.2.3",
     "fast-vue-md-loader": "^1.0.3",

packages/actionsheet/demo/index.vue

@@ -2,7 +2,11 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
-      <van-actionsheet v-model="show1" :actions="actions" @select="onSelect" />
+      <van-actionsheet
+        v-model="show1"
+        :actions="actions"
+        @select="onSelect"
+      />
     </demo-block>
 
     <demo-block :title="$t('title2')">
@@ -18,7 +22,10 @@
 
     <demo-block :title="$t('title3')">
       <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
-      <van-actionsheet v-model="show3" :title="$t('title')">
+      <van-actionsheet
+        v-model="show3"
+        :title="$t('title')"
+      >
         <p>{{ $t('content') }}</p>
       </van-actionsheet>
     </demo-block>

packages/actionsheet/index.vue

@@ -1,11 +1,25 @@
 <template>
   <transition name="van-slide-bottom">
-    <div v-if="shouldRender" v-show="value" :class="b({ 'withtitle': title })">
+    <div
-      <div v-if="title" class="van-hairline--top-bottom" :class="b('header')">
+      v-if="shouldRender"
+      v-show="value"
+      :class="b({ 'withtitle': title })"
+    >
+      <div
+        v-if="title"
+        :class="b('header')"
+        class="van-hairline--top-bottom"
+      >
         <div v-text="title" />
-        <icon name="close" @click="onCancel" />
+        <icon
+          name="close"
+          @click="onCancel"
+        />
       </div>
-      <ul v-else class="van-hairline--bottom">
+      <ul
+        v-else
+        class="van-hairline--bottom"
+      >
         <li
           v-for="item in actions"
           :class="[b('item', { disabled: item.disabled || item.loading }), item.className, 'van-hairline--top']"
@@ -13,9 +27,18 @@
         >
           <template v-if="!item.loading">
             <span :class="b('name')">{{ item.name }}</span>
-            <span :class="b('subname')" v-if="item.subname">{{ item.subname }}</span>
+            <span
+              v-if="item.subname"
+              :class="b('subname')"
+            >
+              {{ item.subname }}
+            </span>
           </template>
-          <loading v-else :class="b('loading')" size="20px" />
+          <loading
+            v-else
+            :class="b('loading')"
+            size="20px"
+          />
         </li>
       </ul>
       <div
@@ -24,7 +47,10 @@
         :class="[b('cancel'), 'van-hairline--top']"
         @click="onCancel"
       />
-      <div v-else :class="b('content')">
+      <div
+        v-else
+        :class="b('content')"
+      >
         <slot />
       </div>
     </div>

packages/address-edit/Detail.vue

@@ -23,8 +23,7 @@
       </span>
     </field>
     <cell
-      v-if="showSearchList"
+      v-for="express in searchList"
-      v-for="express in searchResult"
       :key="express.name + express.address"
       :title="express.name"
       :label="express.address"
@@ -61,8 +60,11 @@ export default create({
   },
 
   computed: {
-    showSearchList() {
+    searchList() {
-      return this.showSearchResult && this.focused && this.searchResult.length;
+      if (this.showSearchResult && this.focused) {
+        return this.searchResult || [];
+      };
+      return [];
     },
 
     showIcon() {

packages/address-edit/index.vue

@@ -58,16 +58,34 @@
       @change="$emit('change-default', $event)"
     />
 
-    <div v-show="!hideBottomFields" :class="b('buttons')">
+    <div
-      <van-button block :loading="isSaving" @click="onSave" type="danger">
+      v-show="!hideBottomFields"
+      :class="b('buttons')"
+    >
+      <van-button
+        block
+        :loading="isSaving"
+        type="danger"
+        @click="onSave"
+      >
         {{ saveButtonText || $t('save') }}
       </van-button>
-      <van-button block :loading="isDeleting" @click="onDelete" v-if="showDelete">
+      <van-button
+        v-if="showDelete"
+        block
+        :loading="isDeleting"
+        @click="onDelete"
+      >
         {{ deleteButtonText || $t('delete') }}
       </van-button>
     </div>
 
-    <popup v-model="showAreaPopup" position="bottom" :lazy-render="false" get-container="body">
+    <popup
+      v-model="showAreaPopup"
+      position="bottom"
+      :lazy-render="false"
+      get-container="body"
+    >
       <van-area
         ref="area"
         :loading="!areaListLoaded"

packages/address-edit/test/__snapshots__/demo.spec.js.snap

@@ -116,9 +116,13 @@ exports[`renders demo correctly 1`] = `
       <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
         <div class="van-picker van-area">
           <div class="van-hairline--top-bottom van-picker__toolbar">
-            <div class="van-picker__cancel">取消</div>
+            <div class="van-picker__cancel">
+              取消
+            </div>
             <!---->
-            <div class="van-picker__confirm">确认</div>
+            <div class="van-picker__confirm">
+              确认
+            </div>
           </div>
           <!---->
           <div class="van-picker__columns" style="height:220px;">

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -84,9 +84,13 @@ exports[`create a AddressEdit 1`] = `
   <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <div class="van-picker__loading">
         <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;width:undefined;height:undefined;"><span class="van-loading__spinner van-loading__spinner--circular"> <svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
@@ -220,9 +224,13 @@ exports[`create a AddressEdit with props 1`] = `
   <div name="popup-slide-bottom" class="van-popup van-popup--bottom" style="display:none;">
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">

packages/address-list/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div :class="b()">
     <slot name="top" />
-    <radio-group :value="value" @input="$emit('input', $event)">
+    <radio-group
+      :value="value"
+      @input="$emit('input', $event)"
+    >
       <cell-group>
         <address-item
           v-for="(item, index) in list"
@@ -13,7 +16,12 @@
         />
       </cell-group>
     </radio-group>
-    <div v-if="disabledText" :class="b('disabled-text')">{{ disabledText }}</div>
+    <div
+      v-if="disabledText"
+      :class="b('disabled-text')"
+    >
+      {{ disabledText }}
+    </div>
     <cell-group v-if="disabledList.length">
       <address-item
         v-for="(item, index) in disabledList"

packages/address-list/test/__snapshots__/demo.spec.js.snap

@@ -28,7 +28,9 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
+      <div class="van-address-list__disabled-text">
+        以下地址超出配送范围
+      </div>
       <div class="van-cell-group van-hairline--top-bottom">
         <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
           <!---->

packages/area/demo/index.vue

@@ -1,15 +1,25 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-area ref="area" :area-list="$t('areaList')" />
+      <van-area
+        ref="area"
+        :area-list="$t('areaList')"
+      />
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-area :area-list="$t('areaList')" :value="value" />
+      <van-area
+        :area-list="$t('areaList')"
+        :value="value"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-area :area-list="$t('areaList')" :columns-num="2" :title="$t('title')" />
+      <van-area
+        :area-list="$t('areaList')"
+        :columns-num="2"
+        :title="$t('title')"
+      />
     </demo-block>
   </demo-section>
 </template>

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

@@ -5,9 +5,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -27,9 +31,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -49,9 +57,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker van-area">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <div class="van-ellipsis van-picker__title">标题</div>
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">

packages/area/test/__snapshots__/index.spec.js.snap

@@ -3,9 +3,13 @@
 exports[`change option 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -26,9 +30,13 @@ exports[`change option 1`] = `
 exports[`change option 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -58,9 +66,13 @@ exports[`change option 2`] = `
 exports[`change option 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -90,9 +102,13 @@ exports[`change option 3`] = `
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -121,9 +137,13 @@ exports[`reset method 1`] = `
 exports[`reset method 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -153,9 +173,13 @@ exports[`reset method 2`] = `
 exports[`watch areaList & code 1`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -176,9 +200,13 @@ exports[`watch areaList & code 1`] = `
 exports[`watch areaList & code 2`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
@@ -208,9 +236,13 @@ exports[`watch areaList & code 2`] = `
 exports[`watch areaList & code 3`] = `
 <div class="van-picker van-area">
   <div class="van-hairline--top-bottom van-picker__toolbar">
-    <div class="van-picker__cancel">取消</div>
+    <div class="van-picker__cancel">
+      取消
+    </div>
     <!---->
-    <div class="van-picker__confirm">确认</div>
+    <div class="van-picker__confirm">
+      确认
+    </div>
   </div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">

packages/badge-group/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="b()" class="van-hairline--top-bottom">
+  <div
+    :class="b()"
+    class="van-hairline--top-bottom"
+  >
     <slot />
   </div>
 </template>

packages/badge/demo/index.vue

@@ -1,11 +1,23 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-badge-group :active-key="activeKey" @change="onChange">
+      <van-badge-group
+        :active-key="activeKey"
+        @change="onChange"
+      >
         <van-badge :title="$t('title')" />
-        <van-badge :title="$t('title')" info="8" />
+        <van-badge
-        <van-badge :title="$t('title')" info="99" />
+          :title="$t('title')"
-        <van-badge :title="$t('title')" info="199" />
+          info="8"
+        />
+        <van-badge
+          :title="$t('title')"
+          info="99"
+        />
+        <van-badge
+          :title="$t('title')"
+          info="199"
+        />
       </van-badge-group>
     </demo-block>
   </demo-section>

packages/badge/index.vue

@@ -4,7 +4,10 @@
     :href="url"
     @click="onClick"
   >
-    <van-info :info="info" :class="b('info')" />
+    <van-info
+      :info="info"
+      :class="b('info')"
+    />
     {{ title }}
   </a>
 </template>

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

@@ -9,15 +9,21 @@ exports[`renders demo correctly 1`] = `
         标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">8</div>
+        <div class="van-info van-badge__info">
+          8
+        </div>
         标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">99</div>
+        <div class="van-info van-badge__info">
+          99
+        </div>
         标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-info van-badge__info">199</div>
+        <div class="van-info van-badge__info">
+          199
+        </div>
         标签名称
       </a>
     </div>

packages/button/demo/index.vue

@@ -10,23 +10,59 @@
     </demo-block>
 
     <demo-block :title="$t('plain')">
-      <van-button plain type="primary">{{ $t('plain') }}</van-button>
+      <van-button
-      <van-button plain type="danger">{{ $t('plain') }}</van-button>
+        plain
+        type="primary"
+      >
+        {{ $t('plain') }}
+      </van-button>
+      <van-button
+        plain
+        type="danger"
+      >
+        {{ $t('plain') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-button disabled type="primary">{{ $t('disabled') }}</van-button>
+      <van-button
-      <van-button disabled type="danger">{{ $t('disabled') }}</van-button>
+        disabled
+        type="primary"
+      >
+        {{ $t('disabled') }}
+      </van-button>
+      <van-button
+        disabled
+        type="danger"
+      >
+        {{ $t('disabled') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('loading')">
-      <van-button loading type="primary" />
+      <van-button
-      <van-button loading type="danger" />
+        loading
+        type="primary"
+      />
+      <van-button
+        loading
+        type="danger"
+      />
     </demo-block>
 
     <demo-block :title="$t('shape')">
-      <van-button type="primary" square>{{ $t('square') }}</van-button>
+      <van-button
-      <van-button type="danger" round>{{ $t('round') }}</van-button>
+        type="primary"
+        square
+      >
+        {{ $t('square') }}
+      </van-button>
+      <van-button
+        type="danger"
+        round
+      >
+        {{ $t('round') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('size')">

packages/button/index.vue

@@ -19,8 +19,15 @@
     ])"
     @click="onClick"
   >
-    <loading v-if="loading" size="20px" :color="type === 'default' ? void 0 : ''" />
+    <loading
-    <span v-else :class="b('text')">
+      v-if="loading"
+      size="20px"
+      :color="type === 'default' ? void 0 : ''"
+    />
+    <span
+      v-else
+      :class="b('text')"
+    >
       <slot>{{ text }}</slot>
     </span>
   </component>

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

@@ -11,12 +11,20 @@ exports[`renders demo correctly 1`] = `
     <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
   </div>
   <div>
-    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
-    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button>
+      朴素按钮
+    </span></button>
+    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
+      朴素按钮
+    </span></button>
   </div>
   <div>
-    <button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
+    <button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
-    <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">禁用状态</span></button>
+      禁用状态
+    </span></button>
+    <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--unclickable"><span class="van-button__text">
+      禁用状态
+    </span></button>
   </div>
   <div>
     <button class="van-button van-button--primary van-button--normal van-button--loading van-button--unclickable">
@@ -27,8 +35,12 @@ exports[`renders demo correctly 1`] = `
     </button>
   </div>
   <div>
-    <button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">
-    <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button>
+      方形按钮
+    </span></button>
+    <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">
+      圆形按钮
+    </span></button>
   </div>
   <div>
     <button class="van-button van-button--default van-button--large"><span class="van-button__text">大号按钮</span></button>

packages/card/index.vue

@@ -1,8 +1,14 @@
 <template>
   <div :class="b({ center: centered })">
-    <a :href="thumbLink" :class="b('thumb')">
+    <a
+      :href="thumbLink"
+      :class="b('thumb')"
+    >
       <slot name="thumb">
-        <img :src="thumb" :class="b('img')">
+        <img
+          :src="thumb"
+          :class="b('img')"
+        >
       </slot>
       <van-tag
         v-if="tag"
@@ -16,20 +22,43 @@
     <div :class="b('content')">
       <div :class="b('left')">
         <slot name="title">
-          <div v-if="title" :class="b('title')">{{ title }}</div>
+          <div
+            v-if="title"
+            :class="b('title')"
+          >
+            {{ title }}
+          </div>
         </slot>
         <slot name="desc">
-          <div v-if="desc" :class="[b('desc'), 'van-ellipsis']">{{ desc }}</div>
+          <div
+            v-if="desc"
+            :class="[b('desc'), 'van-ellipsis']"
+          >
+            {{ desc }}
+          </div>
         </slot>
         <slot name="tags" />
       </div>
       <div :class="b('right')">
         <div v-if="isDef(price)">{{ currency }} {{ price }}</div>
-        <div v-if="isDef(originPrice)" :class="b('origin-price')">{{ currency }} {{ originPrice }}</div>
+        <div
-        <div v-if="isDef(num)" :class="b('num')">x {{ num }}</div>
+          v-if="isDef(originPrice)"
+          :class="b('origin-price')"
+        >
+          {{ currency }} {{ originPrice }}
+        </div>
+        <div
+          v-if="isDef(num)"
+          :class="b('num')"
+        >
+          x {{ num }}
+        </div>
       </div>
     </div>
-    <div :class="b('footer')" v-if="$slots.footer">
+    <div
+      :class="b('footer')"
+      v-if="$slots.footer"
+    >
       <slot name="footer" />
     </div>
   </div>

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

@@ -10,13 +10,19 @@ exports[`renders demo correctly 1`] = `
       </a>
       <div class="van-card__content">
         <div class="van-card__left">
-          <div class="van-card__title">商品标题</div>
+          <div class="van-card__title">
-          <div class="van-card__desc van-ellipsis">描述信息</div>
+            商品标题
+          </div>
+          <div class="van-card__desc van-ellipsis">
+            描述信息
+          </div>
         </div>
         <div class="van-card__right">
           <div>¥ 2.00</div>
           <!---->
-          <div class="van-card__num">x 2</div>
+          <div class="van-card__num">
+            x 2
+          </div>
         </div>
       </div>
       <!---->
@@ -30,13 +36,21 @@ exports[`renders demo correctly 1`] = `
     </span></a>
       <div class="van-card__content">
         <div class="van-card__left">
-          <div class="van-card__title">商品标题</div>
+          <div class="van-card__title">
-          <div class="van-card__desc van-ellipsis">描述信息</div>
+            商品标题
+          </div>
+          <div class="van-card__desc van-ellipsis">
+            描述信息
+          </div>
         </div>
         <div class="van-card__right">
           <div>¥ 2.00</div>
-          <div class="van-card__origin-price">¥ 10.00</div>
+          <div class="van-card__origin-price">
-          <div class="van-card__num">x 2</div>
+            ¥ 10.00
+          </div>
+          <div class="van-card__num">
+            x 2
+          </div>
         </div>
       </div>
       <div class="van-card__footer">

packages/cell/demo/index.vue

@@ -2,18 +2,38 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell-group>
-        <van-cell :title="$t('cell')" :value="$t('content')" />
+        <van-cell
-        <van-cell :title="$t('cell')" :value="$t('content')" :label="$t('desc')" />
+          :title="$t('cell')"
+          :value="$t('content')"
+        />
+        <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
-      <van-cell :title="$t('cell')" :value="$t('content')" size="large" :label="$t('desc')" />
+        :title="$t('cell')"
+        :value="$t('content')"
+        size="large"
+      />
+      <van-cell
+        :title="$t('cell')"
+        :value="$t('content')"
+        size="large"
+        :label="$t('desc')"
+      />
     </demo-block>
 
     <demo-block :title="$t('showIcon')">
-      <van-cell :title="$t('cell')" :value="$t('content')" icon="location" />
+      <van-cell
+        :title="$t('cell')"
+        :value="$t('content')"
+        icon="location"
+      />
     </demo-block>
 
     <demo-block :title="$t('valueOnly')">
@@ -21,26 +41,58 @@
     </demo-block>
 
     <demo-block :title="$t('showArrow')">
-      <van-cell :title="$t('cell')" is-link />
+      <van-cell
-      <van-cell :title="$t('cell')" is-link :value="$t('content')" />
+        :title="$t('cell')"
-      <van-cell :title="$t('cell')" is-link arrow-direction="down" :value="$t('content')" />
+        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')"
+      />
     </demo-block>
 
     <demo-block :title="$t('router')">
-      <van-cell :title="$t('cell')" is-link url="//youzan.github.io/vant/mobile.html" />
+      <van-cell
-      <van-cell :title="$t('cell')" is-link to="index" />
+        :title="$t('cell')"
+        is-link
+        url="//youzan.github.io/vant/mobile.html"
+      />
+      <van-cell
+        :title="$t('cell')"
+        is-link
+        to="index"
+      />
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-cell :value="$t('content')" icon="shop" is-link>
+      <van-cell
+        :value="$t('content')"
+        icon="shop"
+        is-link
+      >
         <template slot="title">
           <span class="custom-text">{{ $t('cell') }}</span>
           <van-tag type="danger">{{ $t('tag') }}</van-tag>
         </template>
       </van-cell>
-      <van-cell :title="$t('cell')" icon="location" is-link />
+      <van-cell
+        :title="$t('cell')"
+        icon="location"
+        is-link
+      />
       <van-cell :title="$t('cell')">
-        <van-icon slot="right-icon" name="search" class="custom-icon" />
+        <van-icon
+          slot="right-icon"
+          name="search"
+          class="custom-icon"
+        />
       </van-cell>
     </demo-block>
   </demo-section>

packages/cell/index.vue

@@ -12,12 +12,23 @@
     @click="onClick"
   >
     <slot name="icon">
-      <icon v-if="icon" :class="b('left-icon')" :name="icon" />
+      <icon
+        v-if="icon"
+        :class="b('left-icon')"
+        :name="icon"
+      />
     </slot>
-    <div v-if="isDef(title) || $slots.title" :class="b('title')">
+    <div
+      v-if="isDef(title) || $slots.title"
+      :class="b('title')"
+    >
       <slot name="title">
         <span v-text="title" />
-        <div v-if="label" v-text="label" :class="b('label')" />
+        <div
+          v-if="label"
+          v-text="label"
+          :class="b('label')"
+        />
       </slot>
     </div>
     <div
@@ -29,7 +40,11 @@
       </slot>
     </div>
     <slot name="right-icon">
-      <icon v-if="isLink" :class="b('right-icon', arrowDirection)" name="arrow" />
+      <icon
+        v-if="isLink"
+        :class="b('right-icon', arrowDirection)"
+        name="arrow"
+      />
     </slot>
     <slot name="extra" />
   </div>

packages/checkbox/demo/index.vue

@@ -5,12 +5,25 @@
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
+      <van-checkbox
-      <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
+        :value="false"
+        disabled
+      >
+        {{ $t('checkbox') }}
+      </van-checkbox>
+      <van-checkbox
+        :value="true"
+        disabled
+      >
+        {{ $t('checkbox') }}
+      </van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-checkbox v-model="checkbox2" checked-color="#4b0">
+      <van-checkbox
+        v-model="checkbox2"
+        checked-color="#4b0"
+      >
         {{ $t('customColor') }}
       </van-checkbox>
     </demo-block>
@@ -39,7 +52,10 @@
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-checkbox-group v-model="result2" :max="2">
+      <van-checkbox-group
+        v-model="result2"
+        :max="2"
+      >
         <van-checkbox
           v-for="(item, index) in list"
           :key="index"
@@ -60,7 +76,10 @@
             :title="$t('checkbox') + item"
             @click="toggle(index)"
           >
-            <van-checkbox ref="checkboxes" :name="item" />
+            <van-checkbox
+              ref="checkboxes"
+              :name="item"
+            />
           </van-cell>
         </van-cell-group>
       </van-checkbox-group>

packages/checkbox/index.vue

@@ -1,11 +1,24 @@
 <template>
   <div :class="b()">
-    <div :class="[b('icon', [shape, { disabled: isDisabled, checked }])]" @click="toggle">
+    <div
-      <slot name="icon" :checked="checked">
+      :class="[b('icon', [shape, { disabled: isDisabled, checked }])]"
-        <icon name="success" :style="iconStyle" />
+      @click="toggle"
+    >
+      <slot
+        name="icon"
+        :checked="checked"
+      >
+        <icon
+          name="success"
+          :style="iconStyle"
+        />
       </slot>
     </div>
-    <span v-if="$slots.default" :class="b('label', labelPosition)" @click="toggle('label')">
+    <span
+      v-if="$slots.default"
+      :class="b('label', labelPosition)"
+      @click="toggle('label')"
+    >
       <slot />
     </span>
   </div>

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

@@ -16,13 +16,17 @@ exports[`renders demo correctly 1`] = `
         <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
-      </div> <span class="van-checkbox__label">复选框</span></div>
+      </div> <span class="van-checkbox__label">
+      复选框
+    </span></div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
         <i class="van-icon van-icon-success" style="color:undefined;font-size:undefined;">
           <!---->
         </i>
-      </div> <span class="van-checkbox__label">复选框</span></div>
+      </div> <span class="van-checkbox__label">
+      复选框
+    </span></div>
   </div>
   <div>
     <div class="van-checkbox">

packages/circle/demo/index.vue

@@ -21,8 +21,18 @@
         :text="currentRate2.toFixed(0) + '%'"
       />
       <div>
-        <van-button :text="$t('add')" type="primary" size="small" @click="add" />
+        <van-button
-        <van-button :text="$t('decrease')" type="danger" size="small" @click="reduce" />
+          :text="$t('add')"
+          type="primary"
+          size="small"
+          @click="add"
+        />
+        <van-button
+          :text="$t('decrease')"
+          type="danger"
+          size="small"
+          @click="reduce"
+        />
       </div>
     </demo-block>
   </demo-section>

packages/circle/index.vue

@@ -1,8 +1,19 @@
 <template>
-  <div :class="b()" :style="style">
+  <div
+    :class="b()"
+    :style="style"
+  >
     <svg viewBox="0 0 1060 1060">
-      <path :class="b('hover')" :style="hoverStyle" :d="path" />
+      <path
-      <path :class="b('layer')" :style="layerStyle" :d="path" />
+        :class="b('hover')"
+        :style="hoverStyle"
+        :d="path"
+      />
+      <path
+        :class="b('layer')"
+        :style="layerStyle"
+        :d="path"
+      />
     </svg>
     <slot>
       <div :class="b('text')">{{ text }}</div>

packages/col/demo/index.vue

@@ -9,11 +9,21 @@
 
       <van-row>
         <van-col span="4">span: 4</van-col>
-        <van-col span="10" offset="4">offset: 4, span: 10</van-col>
+        <van-col
+          span="10"
+          offset="4"
+        >
+          offset: 4, span: 10
+        </van-col>
       </van-row>
 
       <van-row>
-        <van-col offset="12" span="12">offset: 12, span: 12</van-col>
+        <van-col
+          offset="12"
+          span="12"
+        >
+          offset: 12, span: 12
+        </van-col>
       </van-row>
     </demo-block>
 
@@ -32,25 +42,37 @@
         <van-col span="6">span: 6</van-col>
       </van-row>
 
-      <van-row type="flex" justify="center">
+      <van-row
+        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 type="flex" justify="end">
+      <van-row
+        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 type="flex" justify="space-between">
+      <van-row
+        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 type="flex" justify="space-around">
+      <van-row
+        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>

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

@@ -10,10 +10,14 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-row">
       <div class="van-col van-col--4">span: 4</div>
-      <div class="van-col van-col--10 van-col--offset-4">offset: 4, span: 10</div>
+      <div class="van-col van-col--10 van-col--offset-4">
+        offset: 4, span: 10
+      </div>
     </div>
     <div class="van-row">
-      <div class="van-col van-col--12 van-col--offset-12">offset: 12, span: 12</div>
+      <div class="van-col van-col--12 van-col--offset-12">
+        offset: 12, span: 12
+      </div>
     </div>
   </div>
   <div>

packages/collapse-item/index.vue

@@ -5,13 +5,31 @@
       :class="b('title', { disabled, expanded })"
       @click="onClick"
     >
-      <slot name="title" slot="title" />
+      <slot
-      <slot name="icon" slot="icon" />
+        name="title"
+        slot="title"
+      />
+      <slot
+        name="icon"
+        slot="icon"
+      />
       <slot name="value" />
-      <slot name="right-icon" slot="right-icon" />
+      <slot
+        name="right-icon"
+        slot="right-icon"
+      />
     </cell>
-    <div v-if="inited" v-show="show" ref="wrapper" :class="b('wrapper')" @transitionend="onTransitionEnd">
+    <div
-      <div ref="content" :class="b('content')">
+      v-if="inited"
+      v-show="show"
+      ref="wrapper"
+      :class="b('wrapper')"
+      @transitionend="onTransitionEnd"
+    >
+      <div
+        ref="content"
+        :class="b('content')"
+      >
         <slot />
       </div>
     </div>

packages/collapse/demo/index.vue

@@ -4,12 +4,20 @@
       <van-collapse v-model="active1">
         <van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
         <van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
-        <van-collapse-item :title="$t('title3')" disabled>{{ $t('content3') }}</van-collapse-item>
+        <van-collapse-item
+          :title="$t('title3')"
+          disabled
+        >
+          {{ $t('content3') }}
+        </van-collapse-item>
       </van-collapse>
     </demo-block>
 
     <demo-block :title="$t('accordion')">
-      <van-collapse v-model="active2" accordion>
+      <van-collapse
+        v-model="active2"
+        accordion
+      >
         <van-collapse-item :title="$t('title1')">{{ $t('content1') }}</van-collapse-item>
         <van-collapse-item :title="$t('title2')">{{ $t('content2') }}</van-collapse-item>
         <van-collapse-item :title="$t('title3')">{{ $t('content3') }}</van-collapse-item>
@@ -22,7 +30,11 @@
           <div slot="title">{{ $t('title1') }}<van-icon name="question" /></div>
           {{ $t('content1') }}
         </van-collapse-item>
-        <van-collapse-item :title="$t('title2')" :value="$t('content')" icon="shop">
+        <van-collapse-item
+          :title="$t('title2')"
+          :value="$t('content')"
+          icon="shop"
+        >
           {{ $t('content2') }}
         </van-collapse-item>
       </van-collapse>

packages/collapse/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="b()" class="van-hairline--top-bottom">
+  <div
+    :class="b()"
+    class="van-hairline--top-bottom"
+  >
     <slot />
   </div>
 </template>

packages/contact-card/demo/index.vue

@@ -8,7 +8,11 @@
         @click="showList = true"
       />
 
-      <van-popup v-model="showList" position="bottom" :lazy-render="false">
+      <van-popup
+        v-model="showList"
+        position="bottom"
+        :lazy-render="false"
+      >
         <van-contact-list
           v-model="chosenContactId"
           :list="list"
@@ -18,7 +22,11 @@
         />
       </van-popup>
 
-      <van-popup v-model="showEdit" position="bottom" :lazy-render="false">
+      <van-popup
+        v-model="showEdit"
+        position="bottom"
+        :lazy-render="false"
+      >
         <van-contact-edit
           :contact-info="editingContact"
           :is-edit="isEdit"
@@ -61,10 +69,6 @@ export default {
     };
   },
 
-  created() {
-    this.list.push(this.mockContact);
-  },
-
   computed: {
     mockContact() {
       return {
@@ -84,6 +88,10 @@ export default {
     }
   },
 
+  created() {
+    this.list.push(this.mockContact);
+  },
+
   methods: {
     onAdd() {
       this.editingContact = { id: this.list.length };

packages/contact-card/test/__snapshots__/demo.spec.js.snap

@@ -69,7 +69,9 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
         <div class="van-contact-edit__buttons">
-          <button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">保存</span></button>
+          <button class="van-button van-button--danger van-button--normal van-button--block"><span class="van-button__text">
+      保存
+    </span></button>
           <!---->
         </div>
       </div>

packages/contact-edit/index.vue

@@ -19,8 +19,22 @@
       />
     </cell-group>
     <div :class="b('buttons')">
-      <van-button block :loading="isSaving" @click="onSave" type="danger">{{ $t('save') }}</van-button>
+      <van-button
-      <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
+        block
+        :loading="isSaving"
+        @click="onSave"
+        type="danger"
+      >
+        {{ $t('save') }}
+      </van-button>
+      <van-button
+        block
+        :loading="isDeleting"
+        @click="onDelete"
+        v-if="isEdit"
+      >
+        {{ $t('delete') }}
+      </van-button>
     </div>
   </div>
 </template>

packages/contact-list/index.vue

@@ -1,9 +1,19 @@
 <template>
   <div :class="b()">
-    <radio-group :value="value" @input="$emit('input', $event)">
+    <radio-group
+      :value="value"
+      @input="$emit('input', $event)"
+    >
       <cell-group>
-        <cell v-for="(item, index) in list" :key="item.id" is-link>
+        <cell
-          <radio :name="item.id" @click="$emit('select', item, index)">
+          v-for="(item, index) in list"
+          :key="item.id"
+          is-link
+        >
+          <radio
+            :name="item.id"
+            @click="$emit('select', item, index)"
+          >
             <div :class="b('name')">{{ item.name }}，{{ item.tel }}</div>
           </radio>
           <icon

packages/coupon-cell/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <cell-group :class="b()" :border="border">
+  <cell-group
+    :class="b()"
+    :border="border"
+  >
     <cell
       :title="title || $t('title')"
       :value="value"

packages/coupon-list/Item.vue

@@ -8,10 +8,19 @@
       <div :class="b('body')">
         <h2>{{ data.name }}</h2>
         <p>{{ validPeriod }}</p>
-        <checkbox v-if="chosen" :class="b('corner')" :value="true" />
+        <checkbox
+          v-if="chosen"
+          :class="b('corner')"
+          value
+        />
       </div>
     </div>
-    <p v-if="disabled && data.reason" :class="b('reason')">{{ data.reason }}</p>
+    <p
+      v-if="disabled && data.reason"
+      :class="b('reason')"
+    >
+      {{ data.reason }}
+    </p>
   </div>
 </template>
 

packages/coupon-list/demo/index.vue

@@ -7,7 +7,10 @@
         @click="showList = true"
       />
 
-      <van-popup v-model="showList" position="bottom">
+      <van-popup
+        v-model="showList"
+        position="bottom"
+      >
         <van-coupon-list
           :coupons="coupons"
           :chosen-coupon="chosenCoupon"

packages/coupon-list/index.vue

@@ -20,9 +20,16 @@
         @click="onClickExchangeButton"
       />
     </field>
-    <tabs v-model="tab" :class="b('tab')" :line-width="120">
+    <tabs
+      v-model="tab"
+      :class="b('tab')"
+      :line-width="120"
+    >
       <tab :title="title">
-        <div :class="b('list')" :style="listStyle">
+        <div
+          :class="b('list')"
+          :style="listStyle"
+        >
           <coupon-item
             ref="card"
             v-for="(item, index) in coupons"
@@ -31,21 +38,30 @@
             :chosen="index === chosenCoupon"
             @click.native="$emit('change', index)"
           />
-          <div v-if="!coupons.length" :class="b('empty')">
+          <div
+            v-if="!coupons.length"
+            :class="b('empty')"
+          >
             <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
             <p>{{ $t('empty') }}</p>
           </div>
         </div>
       </tab>
       <tab :title="disabledTitle">
-        <div :class="b('list')" :style="listStyle">
+        <div
+          :class="b('list')"
+          :style="listStyle"
+        >
           <coupon-item
             disabled
             v-for="item in disabledCoupons"
             :key="item.id || item.name"
             :data="item"
           />
-          <div v-if="!disabledCoupons.length" :class="b('empty')">
+          <div
+            v-if="!disabledCoupons.length"
+            :class="b('empty')"
+          >
             <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
             <p>{{ $t('empty') }}</p>
           </div>

packages/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -5,9 +5,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -167,9 +171,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -246,9 +254,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">
@@ -290,9 +302,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <!---->
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">

packages/dialog/Dialog.vue

@@ -1,13 +1,30 @@
 <template>
   <transition name="van-dialog-bounce">
-    <div v-show="value" :class="[b(), className]">
+    <div
-      <div v-if="title" v-text="title" :class="b('header', { isolated: !message && !$slots.default })" />
+      v-show="value"
-      <div :class="b('content')" v-if="message || $slots.default">
+      :class="[b(), className]"
+    >
+      <div
+        v-if="title"
+        v-text="title"
+        :class="b('header', { isolated: !message && !$slots.default })"
+      />
+      <div
+        :class="b('content')"
+        v-if="message || $slots.default"
+      >
         <slot>
-          <div v-if="message" v-html="message" :class="b('message', { 'has-title': title })" />
+          <div
+            v-if="message"
+            v-html="message"
+            :class="b('message', { 'has-title': title })"
+          />
         </slot>
       </div>
-      <div class="van-hairline--top" :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })">
+      <div
+        class="van-hairline--top"
+        :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })"
+      >
         <van-button
           v-show="showCancelButton"
           :loading="loading.cancel"

packages/dialog/demo/index.vue

@@ -1,16 +1,40 @@
 <template>
   <demo-section>
     <demo-block :title="$t('alert1')">
-      <van-button type="primary" plain @click="onClickAlert">{{ $t('alert1') }}</van-button>
+      <van-button
-      <van-button type="primary" plain @click="onClickAlert2">{{ $t('alert2') }}</van-button>
+        type="primary"
+        plain
+        @click="onClickAlert"
+      >
+        {{ $t('alert1') }}
+      </van-button>
+      <van-button
+        type="primary"
+        plain
+        @click="onClickAlert2"
+      >
+        {{ $t('alert2') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('confirm')">
-      <van-button type="primary" plain @click="onClickConfirm">{{ $t('confirm') }}</van-button>
+      <van-button
+        type="primary"
+        plain
+        @click="onClickConfirm"
+      >
+        {{ $t('confirm') }}
+      </van-button>
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-button type="danger" plain @click="show = true">{{ $t('advancedUsage') }}</van-button>
+      <van-button
+        type="danger"
+        plain
+        @click="show = true"
+      >
+        {{ $t('advancedUsage') }}
+      </van-button>
       <van-dialog
         v-model="show"
         show-cancel-button

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

@@ -3,14 +3,22 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">消息提示</span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
-    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">无标题提示</span></button>
+      消息提示
+    </span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+      无标题提示
+    </span></button>
   </div>
   <div>
-    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">消息确认</span></button>
+    <button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
+      消息确认
+    </span></button>
   </div>
   <div>
-    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">高级用法</span></button>
+    <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">
+      高级用法
+    </span></button>
     <div name="van-dialog-bounce" class="van-dialog" style="display:none;">
       <!---->
       <div class="van-dialog__content">

packages/field/demo/index.vue

@@ -2,7 +2,10 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-cell-group>
-        <van-field v-model="value" :placeholder="$t('usernamePlaceholder')" />
+        <van-field
+          v-model="value"
+          :placeholder="$t('usernamePlaceholder')"
+        />
       </van-cell-group>
     </demo-block>
 
@@ -78,7 +81,13 @@
           :label="$t('sms')"
           :placeholder="$t('smsPlaceholder')"
         >
-          <van-button slot="button" size="small" type="primary">{{ $t('sendSMS') }}</van-button>
+          <van-button
+            slot="button"
+            size="small"
+            type="primary"
+          >
+            {{ $t('sendSMS') }}
+          </van-button>
         </van-field>
       </van-cell-group>
     </demo-block>

packages/field/index.vue

@@ -13,8 +13,14 @@
       'min-height': type === 'textarea' && !autosize
     })"
   >
-    <slot name="left-icon" slot="icon" />
+    <slot
-    <slot name="label" slot="title" />
+      name="left-icon"
+      slot="icon"
+    />
+    <slot
+      name="label"
+      slot="title"
+    />
     <div :class="b('body')">
       <textarea
         v-if="type === 'textarea'"
@@ -41,12 +47,19 @@
         :class="b('clear')"
         @touchstart.prevent="onClear"
       />
-      <div v-if="$slots.icon || icon" :class="b('icon')" @click="onClickIcon">
+      <div
+        v-if="$slots.icon || icon"
+        :class="b('icon')"
+        @click="onClickIcon"
+      >
         <slot name="icon">
           <icon :name="icon" />
         </slot>
       </div>
-      <div v-if="$slots.button" :class="b('button')">
+      <div
+        v-if="$slots.button"
+        :class="b('button')"
+      >
         <slot name="button" />
       </div>
     </div>

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

@@ -151,7 +151,9 @@ exports[`renders demo correctly 1`] = `
             <!---->
             <!---->
             <div class="van-field__button">
-              <button class="van-button van-button--primary van-button--small"><span class="van-button__text">发送验证码</span></button>
+              <button class="van-button van-button--primary van-button--small"><span class="van-button__text">
+          发送验证码
+        </span></button>
             </div>
           </div>
           <!---->

packages/goods-action-mini-btn/index.vue

@@ -1,6 +1,14 @@
 <template>
-  <div :class="b()" class="van-hairline" @click="onClick">
+  <div
-    <icon :class="[b('icon'), iconClass]" :info="info" :name="icon" />
+    :class="b()"
+    class="van-hairline"
+    @click="onClick"
+  >
+    <icon
+      :class="[b('icon'), iconClass]"
+      :info="info"
+      :name="icon"
+    />
     <slot>{{ text }}</slot>
   </div>
 </template>

packages/goods-action/demo/index.vue

@@ -2,20 +2,55 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-goods-action>
-        <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn
-        <van-goods-action-mini-btn icon="cart" :text="$t('icon2')" @click="onClickMiniBtn" />
+          icon="chat"
-        <van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
+          :text="$t('icon1')"
-        <van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
+          @click="onClickMiniBtn"
+        />
+        <van-goods-action-mini-btn
+          icon="cart"
+          :text="$t('icon2')"
+          @click="onClickMiniBtn"
+        />
+        <van-goods-action-big-btn
+          :text="$t('button1')"
+          @click="onClickBigBtn"
+        />
+        <van-goods-action-big-btn
+          primary
+          :text="$t('button2')"
+          @click="onClickBigBtn"
+        />
       </van-goods-action>
     </demo-block>
 
     <demo-block :title="$t('title2')">
       <van-goods-action>
-        <van-goods-action-mini-btn icon="chat" :text="$t('icon1')" @click="onClickMiniBtn" />
+        <van-goods-action-mini-btn
-        <van-goods-action-mini-btn icon="cart" info="5" :text="$t('icon2')" @click="onClickMiniBtn" />
+          icon="chat"
-        <van-goods-action-mini-btn icon="shop" :text="$t('icon3')" @click="onClickMiniBtn" />
+          :text="$t('icon1')"
-        <van-goods-action-big-btn :text="$t('button1')" @click="onClickBigBtn" />
+          @click="onClickMiniBtn"
-        <van-goods-action-big-btn :text="$t('button2')" @click="onClickBigBtn" primary />
+        />
+        <van-goods-action-mini-btn
+          icon="cart"
+          info="5"
+          :text="$t('icon2')"
+          @click="onClickMiniBtn"
+        />
+        <van-goods-action-mini-btn
+          icon="shop"
+          :text="$t('icon3')"
+          @click="onClickMiniBtn"
+        />
+        <van-goods-action-big-btn
+          :text="$t('button1')"
+          @click="onClickBigBtn"
+        />
+        <van-goods-action-big-btn
+          primary
+          :text="$t('button2')"
+          @click="onClickBigBtn"
+        />
       </van-goods-action>
     </demo-block>
   </demo-section>

packages/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -24,7 +24,9 @@ exports[`renders demo correctly 1`] = `
         </i> 客服</div>
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
-          <div class="van-info">5</div>
+          <div class="van-info">
+            5
+          </div>
         </i> 购物车</div>
       <div class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">

packages/icon/demo/index.vue

@@ -1,7 +1,11 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title')">
-      <van-col span="8" v-for="icon in icons" :key="icon">
+      <van-col
+        v-for="icon in icons"
+        :key="icon"
+        span="8"
+      >
         <van-icon :name="icon" />
         <span>{{ icon }}</span>
       </van-col>

packages/icon/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <i :class="[classPrefix, `${classPrefix}-${name}`]" :style="style" v-on="$listeners">
+  <i
+    v-on="$listeners"
+    :class="[classPrefix, `${classPrefix}-${name}`]"
+    :style="style"
+  >
     <slot />
     <van-info :info="info" />
   </i>

packages/image-preview/ImagePreview.vue

@@ -6,14 +6,22 @@
     @touchend="onWrapperTouchEnd"
     @touchcancel="onWrapperTouchEnd"
   >
-    <div v-if="showIndex" :class="b('index')">{{ active + 1 }}/{{ count }}</div>
+    <div
+      v-if="showIndex"
+      :class="b('index')"
+    >
+      {{ active + 1 }}/{{ count }}
+    </div>
     <swipe
       ref="swipe"
       :initial-swipe="startPosition"
       :show-indicators="showIndicators"
       @change="onChange"
     >
-      <swipe-item v-for="(item, index) in images" :key="index">
+      <swipe-item
+        v-for="(item, index) in images"
+        :key="index"
+      >
         <img
           :class="b('image')"
           :src="item"

packages/image-preview/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,9 @@
 
 exports[`render image 1`] = `
 <div class="van-image-preview">
-  <div class="van-image-preview__index">1/3</div>
+  <div class="van-image-preview__index">
+    1/3
+  </div>
   <div class="van-swipe">
     <div class="van-swipe__track" style="width: 0px;">
       <div class="van-swipe-item" style="width: 0px; height: 100%;">
@@ -22,7 +24,9 @@ exports[`render image 1`] = `
 
 exports[`zoom 1`] = `
 <div class="van-image-preview">
-  <div class="van-image-preview__index">1/3</div>
+  <div class="van-image-preview__index">
+    1/3
+  </div>
   <div class="van-swipe">
     <div class="van-swipe__track" style="width: 300px;">
       <div class="van-swipe-item" style="width: 100px; height: 100%;">

packages/info/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <div v-if="isDef(info)" :class="b()">{{ info }}</div>
+  <div
+    v-if="isDef(info)"
+    :class="b()"
+  >
+    {{ info }}
+  </div>
 </template>
 
 <script>

packages/lazyload/demo/index.vue

@@ -1,16 +1,25 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <img v-for="img in imageList" v-lazy="img" >
+      <img
+        v-for="img in imageList"
+        v-lazy="img"
+      >
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <div v-for="img in backgroundImageList" v-lazy:background-image="img" />
+      <div
+        v-for="img in backgroundImageList"
+        v-lazy:background-image="img"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
       <lazy-component>
-        <img v-for="img in componentImageList" v-lazy="img" >
+        <img
+          v-for="img in componentImageList"
+          v-lazy="img"
+        >
       </lazy-component>
     </demo-block>
   </demo-section>

packages/list/demo/index.vue

@@ -2,13 +2,20 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <p class="page-desc">{{ $t('text') }}</p>
-      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+      <van-pull-refresh
+        v-model="refreshing"
+        @refresh="onRefresh"
+      >
         <van-list
           v-model="loading"
           :finished="finished"
           @load="onLoad"
         >
-          <van-cell v-for="item in list" :key="item" :title="item + ''" />
+          <van-cell
+            v-for="item in list"
+            :key="item"
+            :title="item + ''"
+          />
         </van-list>
       </van-pull-refresh>
     </demo-block>

packages/list/index.vue

@@ -1,7 +1,10 @@
 <template>
   <div :class="b()">
     <slot />
-    <div v-show="loading" :class="b('loading')">
+    <div
+      v-show="loading"
+      :class="b('loading')"
+    >
       <slot name="loading">
         <loading />
         <span :class="b('loading-text')">{{ loadingText || $t('loadingTip') }}</span>

packages/loading/demo/index.vue

@@ -7,7 +7,10 @@
 
     <demo-block :title="$t('title2')">
       <van-loading type="spinner" />
-      <van-loading type="spinner" color="white" />
+      <van-loading
+        type="spinner"
+        color="white"
+      />
     </demo-block>
   </demo-section>
 </template>

packages/loading/index.vue

@@ -1,9 +1,24 @@
 <template>
-  <div :class="b([type, colorType])" :style="style">
+  <div
+    :class="b([type, colorType])"
+    :style="style"
+  >
     <span :class="b('spinner', type)">
-      <i v-for="(item, index) in (type === 'spinner' ? 12 : 0)" :key="index" />
+      <i
-      <svg v-if="type === 'circular'" :class="b('circular')" viewBox="25 25 50 50">
+        v-for="(item, index) in (type === 'spinner' ? 12 : 0)"
-        <circle cx="50" cy="50" r="20" fill="none"/>
+        :key="index"
+      />
+      <svg
+        v-if="type === 'circular'"
+        :class="b('circular')"
+        viewBox="25 25 50 50"
+      >
+        <circle
+          cx="50"
+          cy="50"
+          r="20"
+          fill="none"
+        />
       </svg>
     </span>
   </div>

packages/nav-bar/demo/index.vue

@@ -12,8 +12,15 @@
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-nav-bar :title="$t('title')" :left-text="$t('back')" left-arrow>
+      <van-nav-bar
-        <van-icon name="search" slot="right" />
+        :title="$t('title')"
+        :left-text="$t('back')"
+        left-arrow
+      >
+        <van-icon
+          name="search"
+          slot="right"
+        />
       </van-nav-bar>
     </demo-block>
   </demo-section>

packages/nav-bar/index.vue

@@ -4,18 +4,39 @@
     :class="b({ fixed })"
     :style="style"
   >
-    <div :class="b('left')" @click="$emit('click-left')">
+    <div
+      :class="b('left')"
+      @click="$emit('click-left')"
+    >
       <slot name="left">
-        <icon v-if="leftArrow" :class="b('arrow')" name="arrow" />
+        <icon
-        <span v-if="leftText" v-text="leftText" :class="b('text')" />
+          v-if="leftArrow"
+          :class="b('arrow')"
+          name="arrow"
+        />
+        <span
+          v-if="leftText"
+          v-text="leftText"
+          :class="b('text')"
+        />
       </slot>
     </div>
-    <div :class="b('title')" class="van-ellipsis">
+    <div
+      :class="b('title')"
+      class="van-ellipsis"
+    >
       <slot name="title">{{ title }}</slot>
     </div>
-    <div :class="b('right')" @click="$emit('click-right')">
+    <div
+      :class="b('right')"
+      @click="$emit('click-right')"
+    >
       <slot name="right">
-        <span v-if="rightText" v-text="rightText" :class="b('text')" />
+        <span
+          v-if="rightText"
+          v-text="rightText"
+          :class="b('text')"
+        />
       </slot>
     </div>
   </div>

packages/notice-bar/demo/index.vue

@@ -8,12 +8,21 @@
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-notice-bar :scrollable="false" :text="$t('text')" />
+      <van-notice-bar
+        :scrollable="false"
+        :text="$t('text')"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-notice-bar mode="closeable" :text="$t('text')" />
+      <van-notice-bar
-      <van-notice-bar mode="link" :text="$t('text')" />
+        mode="closeable"
+        :text="$t('text')"
+      />
+      <van-notice-bar
+        mode="link"
+        :text="$t('text')"
+      />
     </demo-block>
   </demo-section>
 </template>

packages/notice-bar/index.vue

@@ -5,10 +5,16 @@
     :style="barStyle"
     @click="$emit('click')"
   >
-    <div v-if="leftIcon" :class="b('left-icon')">
+    <div
+      v-if="leftIcon"
+      :class="b('left-icon')"
+    >
       <img :src="leftIcon" >
     </div>
-    <div :class="b('wrap')" ref="wrap">
+    <div
+      ref="wrap"
+      :class="b('wrap')"
+    >
       <div
         ref="content"
         :class="[b('content'), animationClass, { 'van-ellipsis': !scrollable }]"

packages/number-keyboard/index.vue

@@ -8,7 +8,11 @@
       @animationend="onAnimationEnd"
       @webkitAnimationEnd="onAnimationEnd"
     >
-      <div :class="b('title')" class="van-hairline--top" v-if="title || showTitleClose">
+      <div
+        v-if="title || showTitleClose"
+        :class="b('title')"
+        class="van-hairline--top"
+      >
         <span v-text="title" />
         <span
           :class="b('close')"
@@ -26,9 +30,20 @@
           @press="onPressKey"
         />
       </div>
-      <div v-if="theme === 'custom'" :class="b('sidebar')">
+      <div
-        <key :text="deleteText" :type="['delete', 'big', 'gray']" @press="onPressKey" />
+        v-if="theme === 'custom'"
-        <key :text="closeButtonText" :type="['blue', 'big']" @press="onPressKey" />
+        :class="b('sidebar')"
+      >
+        <key
+          :text="deleteText"
+          :type="['delete', 'big', 'gray']"
+          @press="onPressKey"
+        />
+        <key
+          :text="closeButtonText"
+          :type="['blue', 'big']"
+          @press="onPressKey"
+        />
       </div>
     </div>
   </transition>

packages/pagination/index.vue

@@ -8,7 +8,6 @@
       {{ prevText || $t('prev') }}
     </li>
     <li
-      v-if="isMultiMode"
       v-for="page in pages"
       class="van-hairline"
       :class="[b('item', { active: page.active }), b('page')]"
@@ -16,7 +15,10 @@
     >
       {{ page.text }}
     </li>
-    <li v-if="!isMultiMode" :class="b('page-desc')">
+    <li
+      v-if="!isMultiMode"
+      :class="b('page-desc')"
+    >
       <slot name="pageDesc">{{ pageDesc }}</slot>
     </li>
     <li
@@ -77,6 +79,10 @@ export default create({
       const pages = [];
       const pageCount = this.computedPageCount;
 
+      if (!this.isMultiMode) {
+        return pages;
+      }
+
       // Default page limits
       let startPage = 1;
       let endPage = pageCount;

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

@@ -33,11 +33,6 @@ exports[`renders demo correctly 1`] = `
       <li class="van-hairline van-pagination__item van-pagination__item--disabled van-pagination__prev">
         上一页
       </li>
-      <!---->
-      <!---->
-      <!---->
-      <!---->
-      <!---->
       <li class="van-pagination__page-desc">1/12</li>
       <li class="van-hairline van-pagination__item van-pagination__next">
         下一页

packages/panel/demo/index.vue

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

packages/panel/index.vue

@@ -12,7 +12,11 @@
     <div :class="b('content')">
       <slot />
     </div>
-    <div v-if="$slots.footer" :class="b('footer')" class="van-hairline--top">
+    <div
+      v-if="$slots.footer"
+      :class="b('footer')"
+      class="van-hairline--top"
+    >
       <slot name="footer" />
     </div>
   </cell-group>

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

@@ -34,7 +34,9 @@ exports[`renders demo correctly 1`] = `
       <div class="van-hairline--top van-panel__footer">
         <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">按钮</span></button>
+          <button class="van-button van-button--danger van-button--small"><span class="van-button__text">
+          按钮
+        </span></button>
         </div>
       </div>
     </div>

packages/password-input/index.vue

@@ -1,7 +1,14 @@
 <template>
   <div :class="b()">
-    <ul :class="b('security')" class="van-hairline--surround" @touchstart.stop="$emit('focus')">
+    <ul
-      <li v-for="visibility in points" class="van-hairline">
+      :class="b('security')"
+      class="van-hairline--surround"
+      @touchstart.stop="$emit('focus')"
+    >
+      <li
+        v-for="visibility in points"
+        class="van-hairline"
+      >
         <i :style="`visibility: ${visibility}`" />
       </li>
     </ul>

packages/picker/demo/index.vue

@@ -1,7 +1,10 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-picker :columns="$t('column1')" @change="onChange1" />
+      <van-picker
+        :columns="$t('column1')"
+        @change="onChange1"
+      />
     </demo-block>
 
     <demo-block :title="$t('title2')">
@@ -19,11 +22,17 @@
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-picker :columns="columns" @change="onChange2" />
+      <van-picker
+        :columns="columns"
+        @change="onChange2"
+      />
     </demo-block>
 
     <demo-block :title="$t('loading')">
-      <van-picker :columns="columns" loading />
+      <van-picker
+        loading
+        :columns="columns"
+      />
     </demo-block>
   </demo-section>
 </template>

packages/picker/index.vue

@@ -1,16 +1,42 @@
 <template>
   <div :class="b()">
-    <div :class="b('toolbar')" class="van-hairline--top-bottom" v-if="showToolbar">
+    <div
+      v-if="showToolbar"
+      :class="b('toolbar')"
+      class="van-hairline--top-bottom"
+    >
       <slot>
-        <div :class="b('cancel')" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
+        <div
-        <div :class="b('title')" class="van-ellipsis" v-if="title" v-text="title" />
+          :class="b('cancel')"
-        <div :class="b('confirm')" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
+          @click="emit('cancel')"
+        >
+          {{ cancelButtonText || $t('cancel') }}
+        </div>
+        <div
+          v-if="title"
+          v-text="title"
+          :class="b('title')"
+          class="van-ellipsis"
+        />
+        <div
+          :class="b('confirm')"
+          @click="emit('confirm')"
+        >
+          {{ confirmButtonText || $t('confirm') }}
+        </div>
       </slot>
     </div>
-    <div v-if="loading" :class="b('loading')">
+    <div
+      v-if="loading"
+      :class="b('loading')"
+    >
       <loading />
     </div>
-    <div :class="b('columns')" :style="columnsStyle" @touchmove.prevent>
+    <div
+      :class="b('columns')"
+      :style="columnsStyle"
+      @touchmove.prevent
+    >
       <picker-column
         v-for="(item, index) in (simple ? [columns] : columns)"
         :key="index"
@@ -22,7 +48,11 @@
         :visible-item-count="visibleItemCount"
         @change="onChange(index)"
       />
-      <div :class="b('frame')" class="van-hairline--top-bottom" :style="frameStyle" />
+      <div
+        :class="b('frame')"
+        class="van-hairline--top-bottom"
+        :style="frameStyle"
+      />
     </div>
   </div>
 </template>

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

@@ -39,9 +39,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-picker">
       <div class="van-hairline--top-bottom van-picker__toolbar">
-        <div class="van-picker__cancel">取消</div>
+        <div class="van-picker__cancel">
+          取消
+        </div>
         <div class="van-ellipsis van-picker__title">标题</div>
-        <div class="van-picker__confirm">确认</div>
+        <div class="van-picker__confirm">
+          确认
+        </div>
       </div>
       <!---->
       <div class="van-picker__columns" style="height:220px;">

packages/popup/demo/index.vue

@@ -8,7 +8,10 @@
     <demo-block :title="$t('position')">
       <van-button @click="show2 = true;">{{ $t('button2') }}</van-button>
 
-      <van-popup v-model="show2" position="bottom">
+      <van-popup
+        v-model="show2"
+        position="bottom"
+      >
         <van-picker
           show-toolbar
           :columns="$t('columns')"
@@ -18,15 +21,25 @@
       </van-popup>
 
       <van-button @click="show3 = true">{{ $t('button4') }}</van-button>
-      <van-popup v-model="show3" position="top" :overlay="false">
+      <van-popup
+        v-model="show3"
+        position="top"
+        :overlay="false"
+      >
         {{ $t('content') }}
       </van-popup>
 
       <van-button @click="show4 = true">{{ $t('button5') }}</van-button>
-      <van-popup v-model="show4" position="right">
+      <van-popup
+        v-model="show4"
+        position="right"
+      >
         <van-button @click="show4 = false">{{ $t('button6') }}</van-button>
         <van-button @click="show5 = true">{{ $t('button5') }}</van-button>
-        <van-popup v-model="show5" position="right">
+        <van-popup
+          v-model="show5"
+          position="right"
+        >
           <van-button @click="show5 = false">{{ $t('button6') }}</van-button>
         </van-popup>
       </van-popup>

packages/popup/index.vue

@@ -1,6 +1,10 @@
 <template>
   <transition :name="currentTransition">
-    <div v-if="shouldRender" v-show="value" :class="b({ [position]: position })">
+    <div
+      v-if="shouldRender"
+      v-show="value"
+      :class="b({ [position]: position })"
+    >
       <slot />
     </div>
   </transition>

packages/progress/demo/index.vue

@@ -5,12 +5,23 @@
     </demo-block>
 
     <demo-block :title="$t('title2')">
-      <van-progress inactive :percentage="50" />
+      <van-progress
+        inactive
+        :percentage="50"
+      />
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-progress :pivot-text="$t('orange')" color="#f2826a" :percentage="25" />
+      <van-progress
-      <van-progress :pivot-text="$t('red')" color="#f44" :percentage="50" />
+        color="#f2826a"
+        :percentage="25"
+        :pivot-text="$t('orange')"
+      />
+      <van-progress
+        color="#f44"
+        :percentage="50"
+        :pivot-text="$t('red')"
+      />
       <van-progress
         :percentage="75"
         :pivot-text="$t('purple')"

packages/progress/index.vue

@@ -1,7 +1,17 @@
 <template>
   <div :class="b()">
-    <span :class="b('portion', { 'with-pivot': showPivot && text })" :style="portionStyle">
+    <span
-      <span v-if="showPivot && text" ref="pivot" :style="pivotStyle" :class="b('pivot')">{{ text }}</span>
+      :class="b('portion', { 'with-pivot': showPivot && text })"
+      :style="portionStyle"
+    >
+      <span
+        v-if="showPivot && text"
+        ref="pivot"
+        :style="pivotStyle"
+        :class="b('pivot')"
+      >
+        {{ text }}
+      </span>
     </span>
   </div>
 </template>

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

@@ -3,19 +3,29 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">50%</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#1989fa;"><span class="van-progress__pivot" style="color:#fff;background:#1989fa;">
+      50%
+    </span></span>
     </div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">
+      50%
+    </span></span>
     </div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">
+      橙色
+    </span></span>
     </div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f44;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">红色</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f44;"><span class="van-progress__pivot" style="color:#fff;background:#f44;">
+      红色
+    </span></span>
     </div>
-    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">
+      紫色
+    </span></span>
     </div>
   </div>
 </div>

packages/progress/test/__snapshots__/index.spec.js.snap

@@ -3,6 +3,8 @@
 exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(25, 137, 250);"><!----></span></div>`;
 
 exports[`calc width 2`] = `
-<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">test</span></span>
+<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(25, 137, 250);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(25, 137, 250);">
+      test
+    </span></span>
 </div>
 `;

packages/pull-refresh/demo/index.vue

@@ -1,6 +1,9 @@
 <template>
   <demo-section name="pull-refresh">
-    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+    <van-pull-refresh
+      v-model="isLoading"
+      @refresh="onRefresh"
+    >
       <demo-block :title="$t('basicUsage')">
         <p>{{ $t('text') }}: {{ count }}</p>
       </demo-block>

packages/pull-refresh/index.vue

@@ -9,14 +9,26 @@
       @touchcancel="onTouchEnd"
     >
       <div :class="b('head')">
-        <slot v-if="status === 'normal'" name="normal" />
+        <slot
-        <slot v-if="status === 'pulling'" name="pulling">
+          v-if="status === 'normal'"
+          name="normal"
+        />
+        <slot
+          v-if="status === 'pulling'"
+          name="pulling"
+        >
           <span :class="b('text')">{{ pullingText || $t('pulling') }}</span>
         </slot>
-        <slot v-if="status === 'loosing'" name="loosing">
+        <slot
+          v-if="status === 'loosing'"
+          name="loosing"
+        >
           <span :class="b('text')">{{ loosingText || $t('loosing') }}</span>
         </slot>
-        <slot v-if="status === 'loading'" name="loading">
+        <slot
+          v-if="status === 'loading'"
+          name="loading"
+        >
           <div :class="b('loading')">
             <loading />
             <span>{{ loadingText || $t('loadingTip') }}</span>

packages/radio/demo/index.vue

@@ -1,14 +1,21 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-radio-group v-model="radio1" class="demo-radio-group">
+      <van-radio-group
+        v-model="radio1"
+        class="demo-radio-group"
+      >
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
         <van-radio name="2">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-radio-group v-model="radio2" class="demo-radio-group" disabled>
+      <van-radio-group
+        v-model="radio2"
+        class="demo-radio-group"
+        disabled
+      >
         <van-radio name="1">{{ $t('radio') }} 1</van-radio>
         <van-radio name="2">{{ $t('radio') }} 2</van-radio>
       </van-radio-group>
@@ -17,10 +24,18 @@
     <demo-block :title="$t('title3')">
       <van-radio-group v-model="radio3">
         <van-cell-group>
-          <van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
+          <van-cell
+            :title="$t('radio') + 1"
+            clickable
+            @click="radio3 = '1'"
+          >
             <van-radio name="1" />
           </van-cell>
-          <van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
+          <van-cell
+            :title="$t('radio') + 2"
+            clickable
+            @click="radio3 = '2'"
+          >
             <van-radio name="2" />
           </van-cell>
         </van-cell-group>

packages/radio/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="b({ disabled: isDisabled })" @click="$emit('click')">
+  <div
+    :class="b({ disabled: isDisabled })"
+    @click="$emit('click')"
+  >
     <span :class="b('input')">
       <input
         :value="name"
@@ -10,7 +13,11 @@
       >
       <icon :name="currentValue === name ? 'checked' : 'check'" />
     </span>
-    <span v-if="$slots.default" :class="b('label', labelPosition)" @click="onClickLabel">
+    <span
+      v-if="$slots.default"
+      :class="b('label', labelPosition)"
+      @click="onClickLabel"
+    >
       <slot />
     </span>
   </div>

packages/rate/demo/index.vue

@@ -15,7 +15,10 @@
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-rate disabled v-model="value3" />
+      <van-rate
+        v-model="value3"
+        disabled
+      />
     </demo-block>
   </demo-section>
 </template>

packages/rate/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="b()" @touchmove="onTouchMove">
+  <div
+    :class="b()"
+    @touchmove="onTouchMove"
+  >
     <svg
       v-for="(isFull, index) in list"
       :fill="disabled ? disabledColor : isFull ? color : voidColor"

packages/search/demo/index.vue

@@ -26,7 +26,12 @@
         show-action
         @search="onSearch"
       >
-        <div slot="action" @click="onSearch">{{ $t('search') }}</div>
+        <div
+          slot="action"
+          @click="onSearch"
+        >
+          {{ $t('search') }}
+        </div>
       </van-search>
     </demo-block>
   </demo-section>

packages/search/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div :class="b({ 'show-action': showAction })" :style="{ background }">
+  <div
+    :class="b({ 'show-action': showAction })"
+    :style="{ background }"
+  >
     <field
       v-bind="$attrs"
       v-on="listeners"
@@ -9,9 +12,15 @@
       :border="false"
       left-icon="search"
     >
-      <slot name="left-icon" slot="left-icon" />
+      <slot
+        name="left-icon"
+        slot="left-icon"
+      />
     </field>
-    <div v-if="showAction" :class="b('action')">
+    <div
+      v-if="showAction"
+      :class="b('action')"
+    >
       <slot name="action">
         <div @click="onBack">{{ $t('cancel') }}</div>
       </slot>

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

@@ -67,7 +67,9 @@ exports[`renders demo correctly 1`] = `
         <!---->
       </div>
       <div class="van-search__action">
-        <div>搜索</div>
+        <div>
+          搜索
+        </div>
       </div>
     </div>
   </div>

packages/sku/Sku.vue

@@ -31,12 +31,26 @@
         </slot>
       </sku-header>
     </slot>
-    <div class="van-sku-body" :style="bodyStyle">
+    <div
+      class="van-sku-body"
+      :style="bodyStyle"
+    >
       <!-- sku-body-top -->
-      <slot name="sku-body-top" :selected-sku="selectedSku" :sku-event-bus="skuEventBus" />
+      <slot
+        name="sku-body-top"
+        :selected-sku="selectedSku"
+        :sku-event-bus="skuEventBus"
+      />
       <!-- sku-group -->
-      <slot name="sku-group" :selected-sku="selectedSku" :sku-event-bus="skuEventBus">
+      <slot
-        <div v-if="hasSku" class="van-sku-group-container van-hairline--bottom">
+        name="sku-group"
+        :selected-sku="selectedSku"
+        :sku-event-bus="skuEventBus"
+      >
+        <div
+          v-if="hasSku"
+          class="van-sku-group-container van-hairline--bottom"
+        >
           <sku-row
             v-for="(skuTreeItem, index) in skuTree"
             :key="index"
@@ -55,7 +69,10 @@
         </div>
       </slot>
       <!-- extra-sku-group -->
-      <slot name="extra-sku-group" :sku-event-bus="skuEventBus"/>
+      <slot
+        name="extra-sku-group"
+        :sku-event-bus="skuEventBus"
+      />
       <!-- sku-stepper -->
       <slot
         name="sku-stepper"
@@ -91,7 +108,10 @@
       </slot>
     </div>
     <!-- sku-actions -->
-    <slot name="sku-actions" :sku-event-bus="skuEventBus">
+    <slot
+      name="sku-actions"
+      :sku-event-bus="skuEventBus"
+    >
       <sku-actions
         :sku-event-bus="skuEventBus"
         :buy-text="buyText"

packages/sku/components/SkuHeader.vue

@@ -1,13 +1,23 @@
 <template>
-  <div :class="b()" class="van-hairline--bottom">
+  <div
-    <div :class="b('img-wrap')" @click="previewImage">
+    :class="b()"
+    class="van-hairline--bottom"
+  >
+    <div
+      :class="b('img-wrap')"
+      @click="previewImage"
+    >
       <img :src="goodsImg" >
     </div>
     <div :class="b('goods-info')">
       <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
       <!-- price display area -->
       <slot />
-      <icon name="close" class="van-sku__close-icon" @click="skuEventBus.$emit('sku:close')" />
+      <icon
+        name="close"
+        class="van-sku__close-icon"
+        @click="skuEventBus.$emit('sku:close')"
+      />
     </div>
   </div>
 </template>

packages/sku/components/SkuImgUploader.vue

@@ -18,19 +18,32 @@
       </div>
     </van-uploader>
     <!-- 图片列表区域 -->
-    <div class="van-clearfix" v-if="paddingImg || imgList.length > 0">
+    <div
+      v-if="paddingImg || imgList.length > 0"
+      class="van-clearfix"
+    >
       <!-- 已有的图片,图片右上角显示删除按钮 -->
       <div
         v-for="img in imgList"
         :class="b('img')"
       >
         <img :src="img">
-        <icon name="clear" :class="b('delete')" @click="$emit('input', '')" />
+        <icon
+          name="clear"
+          :class="b('delete')"
+          @click="$emit('input', '')"
+        />
       </div>
       <!-- 正在上传的图片,有上传等待提示 -->
-      <div v-if="paddingImg" :class="b('img')">
+      <div
+        v-if="paddingImg"
+        :class="b('img')"
+      >
         <img :src="paddingImg">
-        <loading :class="b('uploading')" type="spinner" />
+        <loading
+          type="spinner"
+          :class="b('uploading')"
+        />
       </div>
     </div>
   </div>

packages/sku/components/SkuStepper.vue

@@ -12,8 +12,18 @@
         @change="onChange"
       />
     </div>
-    <div v-if="!hideStock" class="van-sku__stock">{{ stockText }}</div>
+    <div
-    <div v-if="quotaText" class="van-sku__quota">{{ quotaText }}</div>
+      v-if="!hideStock"
+      class="van-sku__stock"
+    >
+      {{ stockText }}
+    </div>
+    <div
+      v-if="quotaText"
+      class="van-sku__quota"
+    >
+      {{ quotaText }}
+    </div>
   </div>
 </template>
 

packages/sku/demo/index.vue

@@ -19,7 +19,13 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button type="primary" @click="showBase = true" block>{{ $t('basicUsage') }}</van-button>
+        <van-button
+          block
+          type="primary"
+          @click="showBase = true"
+        >
+          {{ $t('basicUsage') }}
+        </van-button>
       </div>
     </demo-block>
 
@@ -38,7 +44,13 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
-        <van-button type="primary" @click="showStepper = true" block>{{ $t('title2') }}</van-button>
+        <van-button
+          block
+          type="primary"
+          @click="showStepper = true"
+        >
+          {{ $t('title2') }}
+        </van-button>
       </div>
     </demo-block>
 
@@ -60,19 +72,42 @@
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         >
-          <template slot="sku-header-price" slot-scope="props">
+          <template
+            slot="sku-header-price"
+            slot-scope="props"
+          >
             <div class="van-sku__goods-price">
               <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
             </div>
           </template>
-          <template slot="sku-actions" slot-scope="props">
+          <template
+            slot="sku-actions"
+            slot-scope="props"
+          >
             <div class="van-sku-actions">
-              <van-button bottom-action @click="onPointClicked">{{ $t('button1') }}</van-button>
+              <van-button
-              <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">{{ $t('button2') }}</van-button>
+                bottom-action
+                @click="onPointClicked"
+              >
+                {{ $t('button1') }}
+              </van-button>
+              <van-button
+                type="primary"
+                bottom-action
+                @click="props.skuEventBus.$emit('sku:buy')"
+              >
+                {{ $t('button2') }}
+              </van-button>
             </div>
           </template>
         </van-sku>
-        <van-button type="primary" @click="showCustom = true" block>{{ $t('advancedUsage') }}</van-button>
+        <van-button
+          block
+          type="primary"
+          @click="showCustom = true"
+        >
+          {{ $t('advancedUsage') }}
+        </van-button>
       </div>
     </demo-block>
   </demo-section>

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

@@ -5,19 +5,25 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="sku-container">
       <!---->
-      <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">基础用法</span></button>
+      <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+        基础用法
+      </span></button>
     </div>
   </div>
   <div>
     <div class="sku-container">
       <!---->
-      <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">自定义步进器相关配置</span></button>
+      <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+        自定义步进器相关配置
+      </span></button>
     </div>
   </div>
   <div>
     <div class="sku-container">
       <!---->
-      <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">高级用法</span></button>
+      <button class="van-button van-button--primary van-button--normal van-button--block"><span class="van-button__text">
+        高级用法
+      </span></button>
     </div>
   </div>
 </div>

packages/slider/demo/index.vue

@@ -1,7 +1,10 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-slider v-model="value1" @change="onChange" />
+      <van-slider
+        v-model="value1"
+        @change="onChange"
+      />
     </demo-block>
 
     <demo-block :title="$t('title2')">
@@ -14,7 +17,10 @@
     </demo-block>
 
     <demo-block :title="$t('title3')">
-      <van-slider v-model="value3" disabled />
+      <van-slider
+        v-model="value3"
+        disabled
+      />
     </demo-block>
 
     <demo-block :title="$t('title4')">

packages/slider/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <div :class="b({ disabled })" @click.stop="onClick">
+  <div
-    <div :class="b('bar')" :style="barStyle">
+    :class="b({ disabled })"
+    @click.stop="onClick"
+  >
+    <div
+      :class="b('bar')"
+      :style="barStyle"
+    >
       <span
         :class="b('button')"
         @touchstart="onTouchStart"

packages/step/index.vue

@@ -1,11 +1,24 @@
 <template>
-  <div class="van-hairline" :class="b([$parent.direction, { [status]: status }])">
+  <div
-    <div :class="b('title')" :style="titleStyle">
+    class="van-hairline"
+    :class="b([$parent.direction, { [status]: status }])"
+  >
+    <div
+      :class="b('title')"
+      :style="titleStyle"
+    >
       <slot />
     </div>
     <div :class="b('circle-container')">
-      <i :class="b('circle')" v-if="status !== 'process'" />
+      <i
-      <icon v-else name="checked" :style="{ color: $parent.activeColor }" />
+        v-if="status !== 'process'"
+        :class="b('circle')"
+      />
+      <icon
+        v-else
+        name="checked"
+        :style="{ color: $parent.activeColor }"
+      />
     </div>
     <div :class="b('line')" />
   </div>