[Doc] update code style (#484)

docs/demos/views/address-edit.vue

@@ -3,9 +3,9 @@
     <demo-block :title="$t('basicUsage')">
       <van-address-edit
         :area-list="areaList"
-        :show-postal="true"
+        show-postal
-        :show-set-default="true"
+        show-set-default
-        :show-search-result="true"
+        show-search-result
         :search-result="searchResult"
         @save="onSave"
         @delete="onDelete"

docs/demos/views/cell.vue

@@ -36,9 +36,7 @@
         </van-cell>
         <van-cell :title="$t('cell')" icon="location" is-link />
         <van-cell :title="$t('cell')">
-          <template slot="right-icon">
+          <van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
-            <van-icon name="search" class="van-cell__right-icon" />
-          </template>
         </van-cell>
       </van-cell-group>
     </demo-block>

docs/demos/views/search.vue

@@ -9,7 +9,7 @@
         <van-search
           v-model="value"
           :placeholder="$t('placeholder')"
-          :show-action="true"
+          show-action
           @search="onSearch"
           @cancel="onCancel"
         />
@@ -19,7 +19,7 @@
     <demo-block :title="$t('title3')">
       <van-search
         v-model="value"
-        :show-action="true"
+        show-action
         @search="onSearch"
       >
         <div slot="action" @click="onSearch">{{ $t('search') }}</div>

docs/demos/views/stepper.vue

@@ -9,7 +9,7 @@
     </demo-block>
 
     <demo-block :title="$t('advancedUsage')">
-      <van-stepper v-model="stepper2" min="5" max="40" step="2" default-value="9" />
+      <van-stepper v-model="stepper2" :min="5" :max="40" :step="2" :default-value="9" />
     </demo-block>
   </demo-section>
 </template>

docs/markdown/en-US/actionsheet.md

@@ -40,7 +40,7 @@ export default {
 #### Actionsheet with cancel button
 
 ```html
-<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
+<van-actionsheet v-model="show" :actions="actions" cancel-text="Cancel" />
 ```
 
 #### Actionsheet with title
@@ -58,9 +58,9 @@ Actionsheet will get another style if there is a `title` prop.
 |-----------|-----------|-----------|-------------|-------------|
 | actions | Options | `Array` | `[]` | - |
 | title | Title | `String` | - | - |
-| cancelText | Text of cancel button | `String` | - | - |
+| cancel-text | Text of cancel button | `String` | - | - |
 | overlay | Whether to show overlay | `Boolean` | - | - |
-| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | - | - |
+| close-on-click-overlay | Whether to close when click overlay | `Boolean` | - | - |
 
 ### Data struct of actions
 

docs/markdown/en-US/address-edit.md

@@ -14,11 +14,11 @@ Vue.use(AddressEdit);
 
 ```html
 <van-address-edit
-  :areaList="areaList"
+  :area-list="areaList"
-  :showPostal="true"
+  show-postal
-  :showSetDefault="true"
+  show-set-default
-  :showSearchResult="true"
+  show-search-result
-  :searchResult="searchResult"
+  :search-result="searchResult"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"
@@ -60,14 +60,14 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| areaList | Area List | `Object` | - | - |
+| area-list | Area List | `Object` | - | - |
-| addressInfo | Address Info | `Object` | `{}` | - |
+| address-info | Address Info | `Object` | `{}` | - |
-| searchResult | Address search result | `Array` | `[]` | - |
+| search-result | Address search result | `Array` | `[]` | - |
-| showPostal | Whether to show postal field | `Boolean` | `false` | - |
+| show-postal | Whether to show postal field | `Boolean` | `false` | - |
-| showSetDefault | Whether to show default address switch | `Boolean` | `false` | - |
+| show-set-default | Whether to show default address switch | `Boolean` | `false` | - |
-| showSearchResult | Whether to show address search result | `Boolean` | `false` | - |
+| show-search-result | Whether to show address search result | `Boolean` | `false` | - |
-| isSaving | Whether to show save button loading status | `Boolean` | `false` | - |
+| is-saving | Whether to show save button loading status | `Boolean` | `false` | - |
-| isDeleting | Whether to show delete button loading status | `Boolean` | `false` | - |
+| is-deleting | Whether to show delete button loading status | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/en-US/address-list.md

@@ -59,7 +59,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Id of chosen address | String | - | - |
 | list | Address list | Array | `[]` | - |
-| addButtonText | Add button text | String | `Add new address` | - |
+| add-button-text | Add button text | String | `Add new address` | - |
 
 ### Event
 

docs/markdown/en-US/area.md

@@ -12,10 +12,10 @@ Vue.use(Area);
 
 #### Basic Usage
 
-To initailize `Area` component, `areaList` property is required. Data structure of `areaList` will be introduced later. 
+To initailize `Area` component, `area-list` property is required. Data structure will be introduced later. 
 
 ```html
-<van-area :areaList="areaList" />
+<van-area :area-list="areaList" />
 ```
 
 #### Initial Value
@@ -23,16 +23,16 @@ To initailize `Area` component, `areaList` property is required. Data structure
 To have a selected value，simply pass the `code` of target area to `value` property.
 
 ```html
-<van-area :areaList="areaList" value="110101" />
+<van-area :area-list="areaList" value="110101" />
 ```
 
 #### Columns Number
 
-`columnsNum` property is able to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
+`columns-num` property is used to config number of columns to be displayed. This component has 3 columns corresponding to a 3 level picker by default.
-Set `columnsNum` with 2, you'll have a 2 level picker.
+Set `columns-num` with 2, you'll have a 2 level picker.
 
 ```html
-<van-area :areaList="areaList" :columnsNum="2" title="Title" />
+<van-area :area-list="areaList" :columns-num="2" title="Title" />
 ```
 
 
@@ -42,8 +42,8 @@ Set `columnsNum` with 2, you'll have a 2 level picker.
 |-----------|-----------|-----------|-------------|-------------|
 | value | the `code` of selected area | `String` | - | - |
 | title | Toolbar title | `String` | `''` | - |
-| areaList | an object contains these properties: `province_list`, `city_list` and `county_list`  | `Object` | - | - |
+| area-list | an object contains these properties: `province_list`, `city_list` and `county_list`  | `Object` | - | - |
-| columnsNum | level of picker | `String`,`Number` | 3 | - |
+| columns-num | level of picker | `String`,`Number` | 3 | - |
 
 ### Event
 

docs/markdown/en-US/badge.md

@@ -10,14 +10,14 @@ Vue.use(Badge);
 ### Usage
 
 #### Basic Usage
-Use `activeKey` prop to set index of chosen 'badge'
+Use `active-key` prop to set index of chosen 'badge'
 
 ```html
-<van-badge-group :activeKey="activeKey">
+<van-badge-group :active-key="activeKey">
-  <van-badge title="Title" @click="onClick"></van-badge>
+  <van-badge title="Title" @click="onClick" />
-  <van-badge title="Title" @click="onClick" info="8"></van-badge>
+  <van-badge title="Title" @click="onClick" info="8" />
-  <van-badge title="Title" @click="onClick" info="99"></van-badge>
+  <van-badge title="Title" @click="onClick" info="99" />
-  <van-badge title="Title" @click="onClick" info="199"></van-badge>
+  <van-badge title="Title" @click="onClick" info="199" />
 </van-badge-group>
 ```
 
@@ -40,7 +40,7 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| activeKey | Index of chosen badge | `String | Number` | `0` | - |
+| active-key | Index of chosen badge | `String | Number` | `0` | - |
 
 ### Badge API
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/en-US/button.md

@@ -51,14 +51,14 @@ Use `tag` prop to custom button tag
 #### Action Button
 
 ```html 
-<van-button type="primary" bottomAction>Button</van-button>
+<van-button type="primary" bottom-action>Button</van-button>
 
 <van-row>
   <van-col span="12">
-    <van-button bottomAction>Button</van-button>
+    <van-button bottom-action>Button</van-button>
   </van-col>
   <van-col span="12">
-    <van-button type="primary" bottomAction>Button</van-button>
+    <van-button type="primary" bottom-action>Button</van-button>
   </van-col>
 </van-row>
 ```
@@ -70,8 +70,8 @@ Use `tag` prop to custom button tag
 | type | Type | `String` | `default` | `primary` `danger` |
 | size | Size | `String` | `normal` | `large` `small` `mini` |
 | tag | Tag | `String` | `button` | - |
-| nativeType | Native Type Attribute | `String` | `''` | - |
+| native-type | Native Type Attribute | `String` | `''` | - |
 | diabled | Whether disable button | `Boolean` | `false` | - |
 | loading | Whether show loading status | `Boolean` | `false` | - |
 | block | Whether to set display block | `Boolean` | `false` | - |
-| bottomAction | Whether to be action button | `Boolean` | `false` | - |
+| bottom-action | Whether to be action button | `Boolean` | `false` | - |

docs/markdown/en-US/cell.md

@@ -39,8 +39,8 @@ Vue.use(CellGroup);
 
 ```html
 <van-cell-group>
-  <van-cell title="Cell title" isLink />
+  <van-cell title="Cell title" is-link />
-  <van-cell title="Cell title" isLink value="Content" />
+  <van-cell title="Cell title" is-link value="Content" />
 </van-cell-group>
 ```
 
@@ -48,17 +48,15 @@ Vue.use(CellGroup);
 
 ```html
 <van-cell-group>
-  <van-cell value="Content" icon="shop" isLink>
+  <van-cell value="Content" icon="shop" is-link>
     <template slot="title">
       <span class="van-cell-text">Cell title</span>
       <van-tag type="danger">Tag</van-tag>
     </template>
   </van-cell>
-  <van-cell title="Cell title" icon="location" isLink />
+  <van-cell title="Cell title" icon="location" is-link />
   <van-cell title="Cell title">
-    <template slot="right-icon">
+    <van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
-      <van-icon name="search" class="van-cell__right-icon" />
-    </template>
   </van-cell>
 </van-cell-group>
 ```
@@ -80,7 +78,7 @@ Vue.use(CellGroup);
 | url | Link | `String` | - | - |
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |
 | replace | If true, the navigation will not leave a history record | `String` | `false` | - |
-| isLink | Whether to show link icon | `Boolean` | `false` | - |
+| is-link | Whether to show link icon | `Boolean` | `false` | - |
 | required | Whether to show required mark | `Boolean` | `false` | - |
 
 ### Slot

docs/markdown/en-US/contact.md

@@ -37,8 +37,8 @@ Vue.use(ContactEdit);
 <!-- Contact Edit -->
 <van-popup v-model="showEdit" position="bottom">
   <van-contact-edit
-    :contactInfo="editingContact"
+    :contact-info="editingContact"
-    :isEdit="isEdit"
+    :is-edit="isEdit"
     @save="onSave"
     @delete="onDelete"
   />
@@ -134,16 +134,16 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | type | Type | `String` | `add` | `edit` |
-| addText | Add card text | `String` | `Add contact info` | - |
 | name | Name | `String` | - | - |
 | tel | Phone | `String` | - | - |
+| add-text | Add card text | `String` | `Add contact info` | - |
 
 ### ContactList API
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Id of chosen contact | `String | Number` | - | - |
-| addText | Add button text | `String` | `Add new contact` | - |
 | list | Contact list | `Array` | `[]` | - |
+| add-text | Add button text | `String` | `Add new contact` | - |
 
 ### ContactList Event
 
@@ -156,10 +156,10 @@ export default {
 ### ContactEdit API
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| contactInfo | Contact Info | `Object` | `[]` | - |
+| contact-info | Contact Info | `Object` | `[]` | - |
-| isEdit | Whether is editing | `Boolean` | `false` | - |
+| is-edit | Whether is editing | `Boolean` | `false` | - |
-| isSaving | Whether to show save button loading status | `Boolean` | `false` | - |
+| is-saving | Whether to show save button loading status | `Boolean` | `false` | - |
-| isDeleting | Whether to show delete button loading status | `Boolean` | `false` | - |
+| is-deleting | Whether to show delete button loading status | `Boolean` | `false` | - |
 
 ### ContactEdit Event
 

docs/markdown/en-US/coupon.md

@@ -16,7 +16,7 @@ Vue.use(CouponList);
 <!-- Coupon Cell -->
 <van-coupon-cell
   :coupons="coupons"
-  :chosenCoupon="chosenCoupon"
+  :chosen-coupon="chosenCoupon"
   @click="showList = true"
 />
 
@@ -24,8 +24,8 @@ Vue.use(CouponList);
 <van-popup v-model="showList" position="bottom">
   <van-coupon-list
     :coupons="coupons"
-    :chosenCoupon="chosenCoupon"
+    :chosen-coupon="chosenCoupon"
-    :disabledCoupons="disabledCoupons"
+    :disabled-coupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
   />
@@ -71,7 +71,7 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | title | Cell title | `String` | `Coupon` | - |
-| chosenCoupon | Index of chosen coupon | `Number` | `-1` | - |
+| chosen-coupon | Index of chosen coupon | `Number` | `-1` | - |
 | coupons | Coupon list | `Array` | `[]` | - |
 | editable | Cell editable | `Boolean` | `true` | - |
 
@@ -79,15 +79,15 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| chosenCoupon | Index of chosen coupon | `Number` | `-1` | - |
+| chosen-coupon | Index of chosen coupon | `Number` | `-1` | - |
 | coupons | Coupon list | `Array` | `[]` | - |
-| disabledCoupons | Disabled voupon list | `Array` | `[]` | - |
+| disabled-coupons | Disabled voupon list | `Array` | `[]` | - |
-| exchangeButtonText | Exchange button text | `String` | `Exchange` | - |
+| exchange-button-text | Exchange button text | `String` | `Exchange` | - |
-| exchangeButtonDisabled | Whether to disable exchange button | `Boolean` | `false` | - |
+| exchange-button-disabled | Whether to disable exchange button | `Boolean` | `false` | - |
-| displayedCouponIndex | Index of displayed coupon | `Number` | - | - |
+| displayed-coupon-index | Index of displayed coupon | `Number` | - | - |
-| closeButtonText | Close button text | `String` | `Close` | - |
+| close-button-text | Close button text | `String` | `Close` | - |
-| disabledListTitle | Disabled list title | `String` | `Unavailable` | - |
+| disabled-list-title | Disabled list title | `String` | `Unavailable` | - |
-| inputPlaceholder | Input placeholder | `String` | `Coupon code` | - |
+| input-placeholder | Input placeholder | `String` | `Coupon code` | - |
 
 ### CouponList Event
 

docs/markdown/en-US/datetime-picker.md

@@ -15,10 +15,10 @@ Vue.use(DatetimePicker);
 <van-datetime-picker
   v-model="currentDate"
   type="datetime"
-  :minHour="minHour"
+  :min-hour="minHour"
-  :maxHour="maxHour"
+  :max-hour="maxHour"
-  :minDate="minDate"
+  :min-date="minDate"
-  :maxDate="maxDate"
+  :max-date="maxDate"
 />
 ```
 
@@ -65,11 +65,11 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | type | Picker type | `String` | 'datetime' |  'date', 'time' |
-| minDate | Min date | `Date` | Ten years ago on January 1 | - |
+| min-date | Min date | `Date` | Ten years ago on January 1 | - |
-| maxDate | Max date | `Date` | Ten years later on December 31 | - |
+| max-date | Max date | `Date` | Ten years later on December 31 | - |
-| minHour | Min hour | `Number` | `0` | - |
+| min-hour | Min hour | `Number` | `0` | - |
-| maxHour | Max hour | `Number` | `23` | - |
+| max-hour | Max hour | `Number` | `23` | - |
-| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
+| visibile-column-count | Count of columns to show | `Number` | `5` | - |
 
 ### Event
 

docs/markdown/en-US/field.md

@@ -14,7 +14,7 @@ The value of filed is bound with v-model.
 
 ```html
 <van-cell-group>
-  <van-field v-model="value" placeholder="Username"></van-field>
+  <van-field v-model="value" placeholder="Username" />
 </van-cell-group>
 ```
 
@@ -30,16 +30,15 @@ Use `type` prop to custom diffrent type fileds.
     placeholder="Username"
     required
     @click-icon="username = ''"
-  >
+  />
-  </van-field>
 
   <van-field
     v-model="password"
     type="password"
     label="Password"
     placeholder="Password"
-    required>
+    required
-  </van-field>
+  />
 </van-cell-group>
 ```
 
@@ -47,7 +46,7 @@ Use `type` prop to custom diffrent type fileds.
 
 ```html
 <van-cell-group>
-  <van-field value="Disabled" label="Username" disabled></van-field>
+  <van-field value="Disabled" label="Username" disabled />
 </van-cell-group>
 ```
 
@@ -55,7 +54,7 @@ Use `type` prop to custom diffrent type fileds.
 
 ```html
 <van-cell-group>
-  <van-field label="Username" placeholder="Username" error></van-field>
+  <van-field label="Username" placeholder="Username" error />
 </van-cell-group>
 ```
 
@@ -71,8 +70,7 @@ Textarea Filed can be auto resize when has `autosize` prop
     placeholder="Message"
     rows="1"
     autosize
-  >
+  />
-  </van-field>
 </van-cell-group>
 ```
 

docs/markdown/en-US/goods-action.md

@@ -59,7 +59,7 @@ Use `info` prop to show messages in upper right corner of icon
 |-----------|-----------|-----------|-------------|-------------|
 | text | Button text | `String` | - | - |
 | icon | Icon | `String` | - | - |
-| iconClass | Icon class name | `String` | `''` | - |
+| icon-class | Icon class name | `String` | `''` | - |
 | info | Info message | `String` | - | - |
 | url | Link | `String` | - | - |
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - | - |

docs/markdown/en-US/lazyload.md

@@ -14,7 +14,7 @@ Vue.use(Lazyload, options);
 #### Basic Usage
 
 ```html
-<img v-for="img in imageList" v-lazy="img">
+<img v-for="img in imageList" v-lazy="img" >
 ```
 
 ```javascript
@@ -41,7 +41,7 @@ Use `v-lazy:background-image` to set background url, and declare the height of t
 
 ```html
 <lazy-component>
-  <img v-for="img in imageList" v-lazy="img">
+  <img v-for="img in imageList" v-lazy="img" >
 </lazy-component>
 ```
 

docs/markdown/en-US/nav-bar.md

@@ -14,9 +14,9 @@ Vue.use(NavBar);
 ```html
 <van-nav-bar
   title="Title"
-  leftText="Back"
+  left-text="Back"
-  rightText="Button"
+  right-text="Button"
-  leftArrow
+  left-arrow
   @click-left="onClickLeft"
   @click-right="onClickRight"
 />
@@ -38,7 +38,7 @@ export default {
 #### Advanced Usage
 
 ```html
-<van-nav-bar title="Title" leftText="Back" leftArrow>
+<van-nav-bar title="Title" left-text="Back" left-arrow>
   <van-icon name="search" slot="right" />
 </van-nav-bar>
 ```
@@ -48,9 +48,9 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | title | Title | `String` | `''` | - |
-| leftText | Left Text | `String` | `''` | - |
+| left-text | Left Text | `String` | `''` | - |
-| rightText | Right Text | `String` | `''` | - |
+| right-text | Right Text | `String` | `''` | - |
-| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
+| left-arrow | Whether to show left arrow | `Boolean` | `false` | - |
 | fixed | Whether to fixed top | `Boolean` | `false` | - |
 
 ### Slot

docs/markdown/en-US/notice-bar.md

@@ -14,7 +14,7 @@ Vue.use(NoticeBar);
 ```html
 <van-notice-bar
   text="Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily."
-  leftIcon="https://img.yzcdn.cn/1.png"
+  left-icon="https://img.yzcdn.cn/1.png"
 />
 ```
 
@@ -46,7 +46,7 @@ Vue.use(NoticeBar);
 | delay | Animation delay (s) | Number | `1` | - |
 | speed | Scroll speed (px) | Number | `50` | - |
 | scrollable | Whether to scroll content | Boolean | `true` | - |
-| leftIcon | Image url of left icon | String | - | - |
+| left-icon | Image url of left icon | String | - | - |
 | color | Text color | String | `#f60` | - |
 | background | Background color | String | `#fff7cc` | - |
 

docs/markdown/en-US/number-keyboard.md

@@ -12,15 +12,15 @@ Vue.use(NumberKeyboard);
 #### Default Style
 
 ```html
-<van-button @touchstart.native.stop="showKeyboard = true">
+<van-button @touchstart.native.stop="show = true">
   Show Keyboard
 </van-button>
 
 <van-number-keyboard
-  extraKey="."
+  :show="show"
-  :show="showKeyboard"
+  extra-key="."
-  closeButtonText="Close"
+  close-button-text="Close"
-  @blur="showKeyboard = false"
+  @blur="show = false"
   @input="onInput"
   @delete="onDelete"
 />
@@ -30,7 +30,7 @@ Vue.use(NumberKeyboard);
 export default {
   data() {
     return {
-      showKeyboard: true
+      show: true
     }
   },
 
@@ -49,11 +49,11 @@ export default {
 
 ```html
 <van-number-keyboard
+  :show="show"
   theme="custom"
-  extraKey="."
+  extra-key="."
-  :show="showKeyboard"
+  close-button-text="Close"
-  closeButtonText="Close"
+  @blur="show = false"
-  @blur="showKeyboard = false"
   @input="onInput"
   @delete="onDelete"
 />
@@ -66,12 +66,12 @@ export default {
 | show | Whether to show keyboard | `Boolean` | - | - |
 | theme | Keyboard theme | `String` | `Default` | `Custom` |
 | title | Keyboard title | `String` | - | - |
-| zIndex | Keyboard z-index | `Number` | `100` | - |
-| extraKey | Content of bottom left key | `String` | `''` | - |
-| closeButtonText | Close button text | `String` | `-` | - |
 | transition | Whether to show transition animation | `Boolean` | `true` | - |
-| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
+| z-index | Keyboard z-index | `Number` | `100` | - |
-| hideOnClickOutside | Whether to hide keyboard when click outside | `Boolean` | `true` | - |
+| extra-key | Content of bottom left key | `String` | `''` | - |
+| close-button-text | Close button text | `String` | `-` | - |
+| show-delete-key | Whether to show delete button | `Boolean` | `true` | - |
+| hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` | - |
 
 ### Event
 

docs/markdown/en-US/pagination.md

@@ -14,8 +14,8 @@ Vue.use(Pagination);
 ```html
 <van-pagination 
   v-model="currentPage" 
-  :totalItems="24" 
+  :total-items="24" 
-  :itemsPerPage="5"
+  :items-per-page="5"
 />
 ```
 
@@ -34,7 +34,7 @@ export default {
 ```html
 <van-pagination 
   v-model="currentPage" 
-  :pageCount="12"
+  :page-count="12"
   mode="simple" 
 />
 ```
@@ -44,9 +44,9 @@ export default {
 ```html
 <van-pagination 
   v-model="currentPage" 
-  :totalItems="125" 
+  :total-items="125" 
-  :showPageSize="3" 
+  :show-page-size="3" 
-  :forceEllipses="true"
+  force-ellipses
 />
 ```
 
@@ -54,13 +54,13 @@ export default {
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | pageModel | `Object` | - | - |
+| v-model | Current page number | `Number` | - | - |
-| mode | mode | `String` | `multi` | `simple`  |
+| mode | Mode | `String` | `multi` | `simple`  |
-| itemsPerPage | itemsPerPage | `Number` | `10` | - |
+| items-per-page | Item number per page | `Number` | `10` | - |
-| prevText | previousText | `String` | `Previous` | - |
+| prev-text | Previous text | `String` | `Previous` | - |
-| nextText | nextText | `String` | `Next` | - |
+| next-text | Next text | `String` | `Next` | - |
-| showPageSize | showPageSize | `Number` | `5` | - |
+| show-page-size | Count of page size to show | `Number` | `5` | - |
-| forceEllipses | ellipses | `Boolean` | `false` | - |
+| force-ellipses | Whether to show ellipses | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/en-US/password-input.md

@@ -57,7 +57,7 @@ export default {
 | value | Password value | `String` | `''` | - |
 | length | Maxlength of password | `Number` | `6` | - |
 | info | Bottom info | `String` | - | - |
-| errorInfo | Bottom error info | `String` | - | - |
+| error-info | Bottom error info | `String` | - | - |
 
 ### Event
 

docs/markdown/en-US/picker.md

@@ -52,7 +52,7 @@ export default {
 
 ```html
 <van-picker
-  showToolbar
+  show-toolbar
   :title="Title"
   :columns="columns"
   @cancel="onCancel"
@@ -119,11 +119,11 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | columns | Columns data | `Array` | `[]` | - |
-| showToolbar | Whether to show toolbar | `Boolean` | `false` | - |
+| show-toolbar | Whether to show toolbar | `Boolean` | `false` | - |
 | title | Toolbar title | `String` | `''` | - |
-| itemHeight | Option height | `Number` | `44` | - |
+| item-height | Option height | `Number` | `44` | - |
-| visibileColumnCount | Count of visible columns | `Number` | `5` | - |
+| visibile-column-count | Count of visible columns | `Number` | `5` | - |
-| valueKey | Key of option text | `String` | `text` | - |
+| value-key | Key of option text | `String` | `text` | - |
 
 ### Data struct of columns
 

docs/markdown/en-US/popup.md

@@ -41,10 +41,10 @@ Use `position` prop to set popup display position
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Whether to show popup | `Boolean` | `false` | - |
 | overlay | Whether to show overlay | `Boolean` | `true` | - |
-| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
+| lock-on-scroll | Lock body scroll | `Boolean` | `false` | - |
 | position | Position | `String` | - | `top` `bottom` `right` `left` |
-| overlayClass | Custom overlay class | `String` | `` | - |
+| overlay-class | Custom overlay class | `String` | `` | - |
-| overlayStyle | Custom overlay style | `Object` | - | - |
+| overlay-style | Custom overlay style | `Object` | - | - |
-| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
+| close-on-click-overlay | Close popup when click overlay | `Boolean` | `true` | - |
 | transition | Transition | `String` | `popup-slide` | - |
-| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
+| prevent-scroll | Prevent background scroll | `Boolean` | `false` | - |

docs/markdown/en-US/progress.md

@@ -29,12 +29,12 @@ Use 'percentage' prop to set current progress
 
 
 #### Custom Style
-Use `pivotText` to custom text，use `color` to custom bar color
+Use `pivot-text` to custom text，use `color` to custom bar color
 
 ```html
-<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
+<van-progress pivot-text="Red" color="#ed5050" :percentage="26" />
-<van-progress pivotText="Orange" color="#f60" :percentage="46" />
+<van-progress pivot-text="Orange" color="#f60" :percentage="46" />
-<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
+<van-progress pivot-text="Yellow" color="#f09000" :percentage="66" />
 ```
 
 ### API
@@ -43,7 +43,7 @@ Use `pivotText` to custom text，use `color` to custom bar color
 |-----------|-----------|-----------|-------------|-------------|
 | inactive | Whether to be gray | `Boolean` | `false` | - |
 | percentage | Percentage | `Number` | `false` | `0-100` |
-| showPivot | Whether to show text | `Boolean` | `true` | - |
+| show-pivot | Whether to show text | `Boolean` | `true` | - |
-| pivotText | Text | `String` | percentage | - |
+| pivot-text | Text | `String` | percentage | - |
 | color | Color | `String` | `#38f` | hexvalue |
-| textColor | Text color | `String` | `#fff` | hexvalue |
+| text-color | Text color | `String` | `#fff` | hexvalue |

docs/markdown/en-US/pull-refresh.md

@@ -49,11 +49,11 @@ export default {
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | Loading status | `Boolean` | - | - |
-| pullingText | Text to show when pulling | `String` | `下拉即可刷新...` | - |
+| pulling-text | Text to show when pulling | `String` | `下拉即可刷新...` | - |
-| loosingText | Text to show when loosing | `String` | `释放即可刷新...` | - |
+| loosing-text | Text to show when loosing | `String` | `释放即可刷新...` | - |
-| loadingText | Text to show when loading | `String` | `加载中...` | - |
+| loading-text | Text to show when loading | `String` | `加载中...` | - |
-| animationDuration | Animation duration | `Number` | `300` | - |
+| animation-duration | Animation duration | `Number` | `300` | - |
-| headHeight | Height of head | `Number` | `50` | - |
+| head-height | Height of head | `Number` | `50` | - |
 
 ### Slot
 

docs/markdown/en-US/search.md

@@ -35,10 +35,10 @@ Tips: There will be a search button on the keyboard when Search is inside a form
   <van-search
     v-model="value"
     placeholder="Placeholder"
-    :showAction="true"
+    show-action
     @search="onSearch"
-    @cancel="onCancel">
+    @cancel="onCancel"
-  </van-search>
+  />
 </form>
 ```
 
@@ -48,8 +48,9 @@ Use `action` slot to custom right button, `cancel` event will no longer be trigg
 ```html
 <van-search
   v-model="value"
-  :showAction="true"
+  show-action
-  @search="onSearch">
+  @search="onSearch"
+>
   <div slot="action" @click="onSearch">Search</div>
 </van-search>
 ```
@@ -61,7 +62,7 @@ Search support all native properties of input tag，such as `maxlength`、`place
 |-----------|-----------|-----------|-------------|-------------|
 | placeholder | Input placeholder | `String` | - | - |
 | background | Background color | `String` | `#f2f2f2` | - |
-| showAction | Whether to show right button | `Boolean` | false | - |
+| show-action | Whether to show right button | `Boolean` | false | - |
 
 ### Event
 Search support all native events of input tag，such as `focus`、`blur`、`keypress`

docs/markdown/en-US/sku.md

@@ -15,12 +15,12 @@ Vue.use(Sku);
   v-model="showBase"
   :sku="sku"
   :goods="goods"
-  :goodsId="goodsId"
+  :goods-id="goodsId"
-  :hideStock="sku.hide_stock"
+  :hide-stock="sku.hide_stock"
   :quota="quota"
-  :quotaUsed="quotaUsed"
+  :quota-used="quotaUsed"
-  :resetStepperOnHide="resetStepperOnHide"
+  :reset-stepper-on-hide="resetStepperOnHide"
-  :disableStepperInput="disableStepperInput"
+  :disable-stepper-input="disableStepperInput"
   @buy-clicked="handleBuyClicked"
   @add-cart="handleAddCartClicked"
 />
@@ -31,16 +31,16 @@ Vue.use(Sku);
 ```html
 <van-sku
   v-model="showCustomAction"
-  stepperTitle="Stepper title"
+  stepper-title="Stepper title"
   :sku="sku"
   :goods="goods"
-  :goodsId="goodsId"
+  :goods-id="goodsId"
-  :hideStock="sku.hide_stock"
+  :hide-stock="sku.hide_stock"
-  :showAddCartBtn="true"
+  :show-add-cart-btn="true"
   :quota="quota"
-  :quotaUsed="quotaUsed"
+  :quota-used="quotaUsed"
-  :resetStepperOnHide="true"
+  :reset-stepper-on-hide="true"
-  :initialSku="initialSku"
+  :initial-sku="initialSku"
   @buy-clicked="handleBuyClicked"
   @add-cart="handleAddCartClicked"
 >
@@ -49,9 +49,9 @@ Vue.use(Sku);
   <!-- custom sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
-      <van-button bottomAction @click="handlePointClicked">Button</van-button>
+      <van-button bottom-action @click="handlePointClicked">Button</van-button>
       <!-- trigger sku inner event -->
-      <van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
+      <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
     </div>
   </template>
 </van-sku>
@@ -64,14 +64,14 @@ Vue.use(Sku);
 | v-model | Whether to show sku | `Boolean` | `false` | - |
 | sku | Sku data | `Object` | - | - |
 | goods | Goods info | `Object` | - | - |
-| goodsId | Goods id | `String | Number` | - | - |
+| goods-id | Goods id | `String | Number` | - | - |
-| hideStock | Whether to hide stock | `Boolean` | `false` | - |
+| hide-stock | Whether to hide stock | `Boolean` | `false` | - |
-| showAddCartBtn | Whether to show cart button | `Boolean` | `true` | - |
+| show-add-cart-btn | Whether to show cart button | `Boolean` | `true` | - |
 | quota | Quota (0 as no limit) | `Number` | `0` | - |
-| quotaUsed | Used quota | `Number` | `0` | - |
+| quota-used | Used quota | `Number` | `0` | - |
-| resetStepperOnHide | Whether to reset stepper when hide | `Boolean` | `false` | - |
+| reset-stepper-on-hide | Whether to reset stepper when hide | `Boolean` | `false` | - |
-| disableStepperInput | Whether to disable stepper input | `Boolean` | `false` | - |
+| disable-stepper-input | Whether to disable stepper input | `Boolean` | `false` | - |
-| stepperTitle | Quantity title | `String` | `Quantity` | - |
+| stepper-title | Quantity title | `String` | `Quantity` | - |
 
 ### Event
 

docs/markdown/en-US/stepper.md

@@ -36,10 +36,10 @@ export default {
 ```html
 <van-stepper
   v-model="value"
-  min="5"
+  :min="5"
-  max="40"
+  :max="40"
-  step="2"
+  :step="2"
-  defaultValue="9"
+  :default-value="9"
 />
 ```
 
@@ -49,10 +49,10 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | min | Min value | `String | Number` | `1` | - |
 | max | Max value | `String | Number` | - | - |
-| defaultValue | Default value | `String | Number` | `1` | - |
+| default-value | Default value | `String | Number` | `1` | - |
 | step | Value change step | `String | Number` | `1` | - |
 | disabled | Disable value change | `Boolean` | `false` | - | 
-| disableInput | Disable input | `Boolean` | `false` | - |
+| disable-input | Disable input | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/en-US/steps.md

@@ -50,7 +50,7 @@ export default {
 #### Vertical Steps
 
 ```html
-<van-steps direction="vertical" :active="0" activeColor="#f60">
+<van-steps direction="vertical" :active="0" active-color="#f60">
   <van-step>
     <h3>【City】Status1</h3>
     <p>2016-07-12 12:40</p>
@@ -72,11 +72,11 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | active | Active step | `Number` | 0 | - |
 | icon | Action step icon | `String` | - | - |
-| iconClass | Icon class | `String` | - | - |
+| icon-class | Icon class | `String` | - | - |
 | title | Title | `String` | - | - |
 | description | Description | `String` | - | - |
 | direction | Direction | `String` | `horizontal` | `vertical` |
-| activeColor | Active step color | `String` | `#06bf04` | - |
+| active-color | Active step color | `String` | `#06bf04` | - |
 
 ### Steps Slot
 

docs/markdown/en-US/submit-bar.md

@@ -14,7 +14,7 @@ Vue.use(SubmitBar);
 ```html
 <van-submit-bar
   :price="3050"
-  buttonText="Submit"
+  button-text="Submit"
   @submit="onSubmit"
 />
 ```
@@ -26,7 +26,7 @@ Vue.use(SubmitBar);
 <van-submit-bar
   disabled
   :price="3050"
-  buttonText="Submit"
+  button-text="Submit"
   tip="Some tips"
   @submit="onSubmit"
 />
@@ -39,7 +39,7 @@ Vue.use(SubmitBar);
 <van-submit-bar
   loading
   :price="3050"
-  buttonText="Submit"
+  button-text="Submit"
   @submit="onSubmit"
 />
 ```
@@ -50,7 +50,7 @@ Use slot to add custom contents.
 ```html
 <van-submit-bar
   :price="3050"
-  buttonText="Submit"
+  button-text="Submit"
   @submit="onSubmit"
 >
   <van-checkbox v-model="checked">Check</van-checkbox>
@@ -66,8 +66,8 @@ Use slot to add custom contents.
 |-----------|-----------|-----------|-------------|-------------|
 | price | Price |  `Number` | - | - |
 | label | Price label |  `String` | `合计：` | - |
-| buttonText | Button text | `String` | - | - |
+| button-text | Button text | `String` | - | - |
-| buttonType | Button type |  `String` | `danger` | - |
+| button-type | Button type |  `String` | `danger` | - |
 | tip | Tip |  `String` | - | - |
 | disabled | Whether to disable button |  `Boolean` | `false` | - |
 | loading | Whether to show loading icon |  `Boolean` | `false` | - |

docs/markdown/en-US/swipe.md

@@ -52,8 +52,8 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | autoplay | Autoplay interval (ms) | `Number` | - | - |
 | duration | Animation duration (ms) | `Number` | `500` | - |
-| showIndicators | Whether to show indocators | `Boolean` | `true` | - |
+| show-indicators | Whether to show indocators | `Boolean` | `true` | - |
-| initialSwipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
+| initial-swipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
 
 ### Event
 

docs/markdown/en-US/tab.md

@@ -34,7 +34,7 @@ export default {
 
 #### Swipe Tabs
 
-By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
+By default more than 4 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.
 
 ```html
 <van-tabs>
@@ -118,7 +118,7 @@ In sticky mode, the tab will be fixed to top when scroll to top
 | type | There are two style tabs, set this attribute to change tab style | `String` | `line` | `card` |
 | active | Index of active tab | `String` `Number` | `0` | - |
 | duration | Toggle tab's animation time | `Number` | `0.2` | - | - |
-| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
+| swipe-threshold | Set swipe tabs threshold | `Number` | `4` | - | - |
 
 ### Tab API
 

docs/markdown/en-US/tree-select.md

@@ -45,13 +45,13 @@ export default {
 
 ### API
 
-#### Properties
+#### API
 
-| Attribute | Description | Type | Default | 必须 |
+| Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` | - |
-| mainActiveIndex | The index of selected parent node | `Number` | `0` | - |
+| main-Active-index | The index of selected parent node | `Number` | `0` | - |
-| activeId | Id of selected item | `Number` | `0` | - |
+| active-id | Id of selected item | `Number` | `0` | - |
 
 #### Event
 | Event | Description | Attribute |

docs/markdown/en-US/uploader.md

@@ -13,7 +13,7 @@ Vue.use(Uploader);
 
 ```html
 <div class="uploader-container">
-  <van-uploader :afterRead="logContent">
+  <van-uploader :after-read="onRead">
     <van-icon name="photograph" />
   </van-uploader>
 </div>
@@ -22,7 +22,7 @@ Vue.use(Uploader);
 ```javascript
 export default {
   methods: {
-    logContent(file) {
+    onRead(file) {
       console.log(file)
     }
   }
@@ -33,7 +33,7 @@ export default {
 You can set native properties such as `accpet`、`multiple` on Uploader, and the input will automatically inherits the attribute.
 
 ```html
-<van-uploader :afterRead="logContent" accept="image/gif, image/jpeg" multiple>
+<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
   <van-icon name="photograph" />
 </van-uploader>
 ```
@@ -42,10 +42,10 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
 
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
-| resultType | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
+| result-type | The way to read the file, read as base64; read as text | `String` | `dataUrl` | `text` |
 | disable | Whether to disable the upload, set to true during the image upload to prevent users from clicking this component to upload pictures | `Boolean` | `false` | - |
-| beforeRead | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
+| before-read | Hook before reading the file, the first parameter is the selected file, return false to stop reading the file | `Function` | - | - |
-| afterRead | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
+| after-read | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
 
 ### Slot
 

docs/markdown/en-US/waterfall.md

@@ -33,7 +33,8 @@ export default {
 <ul
   v-waterfall-lower="loadMore"
   waterfall-disabled="disabled"
-  waterfall-offset="400">
+  waterfall-offset="400"
+>
   <li v-for="item in list">{{ item }}</li>
 </ul>
 ```
@@ -55,7 +56,7 @@ export default {
     loadMore() {
       this.disabled = true;
       setTimeout(() => {
-        for (let i = 0; i < 5; i ++) {
+        for (let i = 0; i < 5; i++) {
           this.list.push(this.list.length);
         }
         this.disabled = false;

docs/markdown/zh-CN/actionsheet.md

@@ -50,7 +50,7 @@ export default {
 如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
 
 ```html
-<van-actionsheet v-model="show" :actions="actions" cancelText="取消" />
+<van-actionsheet v-model="show" :actions="actions" cancel-text="取消" />
 ```
 
 #### 带标题的 Actionsheet
@@ -69,9 +69,9 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | actions | 行动按钮数组 | `Array` | `[]` | - |
 | title | 标题 | `String` | - | - |
-| cancelText | 取消按钮文案 | `String` | - | - |
+| cancel-text | 取消按钮文案 | `String` | - | - |
 | overlay | 是否显示遮罩 | `Boolean` | - | - |
-| closeOnClickOverlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
+| close-on-click-overlay | 点击遮罩是否关闭`Actionsheet` | `Boolean` | - | - |
 
 ### actions
 

docs/markdown/zh-CN/address-edit.md

@@ -13,11 +13,11 @@ Vue.use(AddressEdit);
 
 ```html
 <van-address-edit
-  :areaList="areaList"
+  :area-list="areaList"
-  :showPostal="true"
+  show-postal
-  :showSetDefault="true"
+  show-set-default
-  :showSearchResult="true"
+  show-search-result
-  :searchResult="searchResult"
+  :search-result="searchResult"
   @save="onSave"
   @delete="onDelete"
   @change-detail="onChangeDetail"
@@ -58,15 +58,15 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| areaList | 地区列表 | `Object` | - | - |
+| area-list | 地区列表 | `Object` | - | - |
-| addressInfo | 收货人信息 | `Object` | `{}` | - |
+| address-info | 收货人信息 | `Object` | `{}` | - |
-| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
+| search-result | 详细地址搜索结果 | `Array` | `[]` | - |
-| addressText | "地址"文案前缀 | `String` | `收货` | - |
+| address-text | "地址"文案前缀 | `String` | `收货` | - |
-| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
+| show-postal | 是否显示邮政编码 | `Boolean` | `false` | - |
-| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
+| show-set-default | 是否显示默认地址栏 | `Boolean` | `false` | - |
-| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
+| show-search-result | 是否显示搜索结果 | `Boolean` | `false` | - |
-| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
-| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+| is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/zh-CN/address-list.md

@@ -60,7 +60,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | 当前选中地址的 id | String | - | - |
 | list | 地址列表 | Array | `[]` | - |
-| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+| add-button-text | 底部按钮文字 | String | `新增收货地址` | - |
 
 ### Event
 

docs/markdown/zh-CN/area.md

@@ -12,10 +12,10 @@ Vue.use(Area);
 
 #### 基础用法
 
-要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`数据格式具体可看下面数据格式章节
+要初始化一个`Area`组件，你需要传入一个`area-list`属性，数据格式具体可看下面数据格式章节
 
 ```html
-<van-area :areaList="areaList" />
+<van-area :area-list="areaList" />
 ```
 
 #### 选中省市县
@@ -23,32 +23,32 @@ Vue.use(Area);
 如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`
 
 ```html
-<van-area :areaList="areaList" value="110101" />
+<van-area :area-list="areaList" value="110101" />
 ```
 
 #### 配置显示列
 
-可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择
+可以通过`columns-num`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择
 
 ```html
-<van-area :areaList="areaList" :columnsNum="2" title="标题" />
+<van-area :area-list="areaList" :columns-num="2" title="标题" />
 ```
 
 ### API
 
-| 参数       | 说明                                                                | 类型              | 默认值 | 可选值 |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-| ---------- | ------------------------------------------------------------------- | ----------------- | ------ | ------ |
+| --- | --- | --- | --- | --- |
-| value      | 当前选中的省市区`code`                                              | `String`          | -      | -      |
+| value | 当前选中的省市区`code` | `String` | - | - |
-| title      | 顶部栏标题                                                          | `String`          | `''`   | -      |
+| title | 顶部栏标题 | `String` | `''`   | - |
-| areaList   | 省市县数据，必须与`province_list`、`city_list`和`county_list`为 key | `Object`          | -      | -      |
+| area-list | 省市县数据，格式见下方 | `Object` | - | - |
-| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省                              | `String`,`Number` | 3      | -      |
+| columns-num | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | `3` | - |
 
 ### Event
 
-| 事件名称 | 说明               | 回调参数                                 |
+| 事件 | 说明 | 回调参数 |
-| -------- | ------------------ | ---------------------------------------- |
+| --- | --- | --- |
-| confirm  | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
+| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 |
-| cancel   | 点击取消按钮时     | -                                        |
+| cancel | 点击取消按钮时 | - |
 
 ### 数据格式
 

docs/markdown/zh-CN/badge.md

@@ -11,14 +11,14 @@ Vue.use(Badge);
 
 #### 基础用法
 
-通过在`van-badge-group`上设置`activeKey`属性来控制选中的`badge`
+通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
 
 ```html
-<van-badge-group :activeKey="activeKey">
+<van-badge-group :active-key="activeKey">
-  <van-badge title="热销榜" @click="onClick"></van-badge>
+  <van-badge title="热销榜" @click="onClick" />
-  <van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
+  <van-badge title="花式寿司" @click="onClick" info="8" />
-  <van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
+  <van-badge title="火炽寿司" @click="onClick" info="99" />
-  <van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
+  <van-badge title="手握寿司" @click="onClick" info="199" />
 </van-badge-group>
 ```
 
@@ -41,7 +41,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| activeKey | 选中`badge`的索引 | `String | Number` | `0` | - |
+| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
 
 ### Badge API
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |

docs/markdown/zh-CN/button.md

@@ -55,14 +55,14 @@ Vue.use(Button);
 #### 页面底部操作按钮
 
 ```html 
-<van-button type="primary" bottomAction>按钮</van-button>
+<van-button type="primary" bottom-action>按钮</van-button>
 
 <van-row>
   <van-col span="12">
-    <van-button bottomAction>按钮</van-button>
+    <van-button bottom-action>按钮</van-button>
   </van-col>
   <van-col span="12">
-    <van-button type="primary" bottomAction>按钮</van-button>
+    <van-button type="primary" bottom-action>按钮</van-button>
   </van-col>
 </van-row>
 ```
@@ -74,8 +74,8 @@ Vue.use(Button);
 | type | 按钮类型 | `String` | `default` | `primary` `danger` |
 | size | 按钮尺寸 | `String` | `normal` | `large` `small` `mini` |
 | tag | 按钮标签 | `String` | `button` | 任意`HTML`标签 |
-| nativeType | 按钮类型（原生） | `String` | `''` | - |
+| native-type | 按钮类型（原生） | `String` | `''` | - |
 | diabled | 是否禁用 | `Boolean` |  `false` | - |
 | loading | 是否显示为加载状态 | `Boolean` |  `false` | - |
 | block | 是否为块级元素 | `Boolean` |   `false` | - |
-| bottomAction | 是否为底部行动按钮 | `Boolean` | `false` | - |
+| bottom-action | 是否为底部行动按钮 | `Boolean` | `false` | - |

docs/markdown/zh-CN/cell.md

@@ -41,12 +41,12 @@ Vue.use(CellGroup);
 
 
 #### 展示箭头
-传入`isLink`属性则会在右侧显示箭头
+传入`is-link`属性则会在右侧显示箭头
 
 ```html
 <van-cell-group>
-  <van-cell title="单元格" isLink />
+  <van-cell title="单元格" is-link />
-  <van-cell title="单元格" isLink value="内容" />
+  <van-cell title="单元格" is-link value="内容" />
 </van-cell-group>
 ```
 
@@ -55,17 +55,15 @@ Vue.use(CellGroup);
 
 ```html
 <van-cell-group>
-  <van-cell value="内容" icon="shop" isLink>
+  <van-cell value="内容" icon="shop" is-link>
     <template slot="title">
       <span class="van-cell-text">单元格</span>
       <van-tag type="danger">标签</van-tag>
     </template>
   </van-cell>
-  <van-cell title="单元格" icon="location" isLink />
+  <van-cell title="单元格" icon="location" is-link />
   <van-cell title="单元格">
-    <template slot="right-icon">
+    <van-icon slot="right-icon" name="search" class="van-cell__right-icon" />
-      <van-icon name="search" class="van-cell__right-icon" />
-    </template>
   </van-cell>
 </van-cell-group>
 ```
@@ -87,7 +85,7 @@ Vue.use(CellGroup);
 | url | 跳转链接 | `String` | - | - |
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
 | replace | 跳转时是否替换当前 history | `String` | `false` | - |
-| isLink | 是否展示右侧箭头 | `Boolean` | `false` | - |
+| is-link | 是否展示右侧箭头 | `Boolean` | `false` | - |
 | required | 是否显示表单必填符号 | `Boolean` | `false` | - |
 
 ### Slot

docs/markdown/zh-CN/contact.md

@@ -37,8 +37,8 @@ Vue.use(ContactEdit);
 <!-- 联系人编辑 -->
 <van-popup v-model="showEdit" position="bottom">
   <van-contact-edit
-    :contactInfo="editingContact"
+    :contact-info="editingContact"
-    :isEdit="isEdit"
+    :is-edit="isEdit"
     @save="onSave"
     @delete="onDelete"
   />
@@ -134,16 +134,16 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | type | 类型，分为添加和编辑两种样式 | `String` | `add` | `edit` |
-| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
 | name | 联系人姓名 | `String` | - | - |
 | tel | 联系人手机号 | `String` | - | - |
+| add-text | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
 
 ### ContactList API
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | 当前选中联系人的 id | `String | Number` | - | - |
-| addText | 新建按钮文案 | `String` | `新建联系人` | - |
 | list | 联系人列表 | `Array` | `[]` | - |
+| add-text | 新建按钮文案 | `String` | `新建联系人` | - |
 
 ### ContactList Event
 
@@ -157,10 +157,10 @@ export default {
 ### ContactEdit API
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| contactInfo | 联系人信息 | `Object` | `[]` | - |
+| contact-info | 联系人信息 | `Object` | `[]` | - |
-| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
+| is-edit | 是否为编辑联系人 | `Boolean` | `false` | - |
-| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| is-saving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
-| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+| is-deleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
 
 ### ContactEdit Event
 

docs/markdown/zh-CN/coupon.md

@@ -16,7 +16,7 @@ Vue.use(CouponList);
 <!-- 优惠券单元格 -->
 <van-coupon-cell
   :coupons="coupons"
-  :chosenCoupon="chosenCoupon"
+  :chosen-coupon="chosenCoupon"
   @click="showList = true"
 />
 
@@ -24,8 +24,8 @@ Vue.use(CouponList);
 <van-popup v-model="showList" position="bottom">
   <van-coupon-list
     :coupons="coupons"
-    :chosenCoupon="chosenCoupon"
+    :chosen-coupon="chosenCoupon"
-    :disabledCoupons="disabledCoupons"
+    :disabled-coupons="disabledCoupons"
     @change="onChange"
     @exchange="onExchange"
   />
@@ -72,7 +72,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
 | title | 单元格标题 | `String` | `优惠券码` | - |
-| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
 | editable | 能否切换优惠券 | `Boolean` | `true` | - |
 
@@ -80,17 +80,17 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 必须 |
 |-----------|-----------|-----------|-------------|-------------|
-| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| chosen-coupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
 | coupons | 可用优惠券列表 | `Array` | `[]` | - |
-| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
+| disabled-doupons | 不可用优惠券列表 | `Array` | `[]` | - |
-| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
+| exchange-button-text | 兑换按钮文字 | `String` | `兑换` | - |
-| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
+| exchange-button-disabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
-| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
+| displayed-coupon-index | 滚动至特定优惠券位置 | `Number` | - | - |
-| showCloseButton | 是否显示列表底部按钮 | `Boolean` | `true` | - |
+| show-close-button | 是否显示列表底部按钮 | `Boolean` | `true` | - |
-| closeButtonText | 列表底部按钮文字 | `String` | `不使用优惠` | - |
+| close-button-text | 列表底部按钮文字 | `String` | `不使用优惠` | - |
-| disabledListTitle | 不可用券列表标题 | `String` | `不可用优惠` | - |
+| disabled-list-title | 不可用券列表标题 | `String` | `不可用优惠` | - |
-| inputPlaceholder | 输入框文字提示 | `String` | `请输入优惠码` | - |
+| input-placeholder | 输入框文字提示 | `String` | `请输入优惠码` | - |
-| showExchangeBar | 是否展示兑换栏 | `Boolean` | `true` | - |
+| show-exchange-bar | 是否展示兑换栏 | `Boolean` | `true` | - |
 
 ### CouponList Event
 

docs/markdown/zh-CN/datetime-picker.md

@@ -15,10 +15,10 @@ Vue.use(DatetimePicker);
 <van-datetime-picker
   v-model="currentDate"
   type="datetime"
-  :minHour="minHour"
+  :min-hour="minHour"
-  :maxHour="maxHour"
+  :max-hour="maxHour"
-  :minDate="minDate"
+  :min-date="minDate"
-  :maxDate="maxDate"
+  :max-date="maxDate"
 />
 ```
 
@@ -42,9 +42,9 @@ export default {
 <van-datetime-picker
   v-model="currentDate"
   type="date"
-  :minHour="minHour"
+  :min-hour="minHour"
-  :maxHour="maxHour"
+  :max-hour="maxHour"
-  :minDate="minDate"
+  :min-date="minDate"
 />
 ```
 
@@ -54,9 +54,9 @@ export default {
 <van-datetime-picker
   v-model="currentDate"
   type="time"
-  :minHour="minHour"
+  :min-hour="minHour"
-  :maxHour="maxHour"
+  :max-hour="maxHour"
-  :minDate="minDate"
+  :min-date="minDate"
 />
 ```
 
@@ -65,11 +65,11 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | type | 组件类型 | `String` | 'datetime' |  'date', 'time' |
-| minDate | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
+| min-date | 可选的最小日期 | `Date` | 十年前的 1 月 1 日 | - |
-| maxDate | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
+| max-date | 可选的最大日期 | `Date` | 十年后的 12 月 31 日 | - |
-| minHour | 可选的最小小时 | `Number` | `0` | - |
+| min-hour | 可选的最小小时 | `Number` | `0` | - |
-| maxHour | 可选的最大小时 | `Number` | `23` | - |
+| max-hour | 可选的最大小时 | `Number` | `23` | - |
-| visibileColumnCount | 每一列可见备选元素的个数 | `Number` | `5` | - |
+| visibile-column-count | 每一列可见备选元素的个数 | `Number` | `5` | - |
 
 ### Event
 

docs/markdown/zh-CN/field.md

@@ -16,7 +16,7 @@ Vue.use(Field);
 
 ```html
 <van-cell-group>
-  <van-field v-model="value" placeholder="请输入用户名"></van-field>
+  <van-field v-model="value" placeholder="请输入用户名" />
 </van-cell-group>
 ```
 
@@ -32,16 +32,15 @@ Vue.use(Field);
     placeholder="请输入用户名"
     required
     @click-icon="username = ''"
-  >
+  />
-  </van-field>
 
   <van-field
     v-model="password"
     type="password"
     label="密码"
     placeholder="请输入密码"
-    required>
+    required
-  </van-field>
+  />
 </van-cell-group>
 ```
 
@@ -49,7 +48,7 @@ Vue.use(Field);
 
 ```html
 <van-cell-group>
-  <van-field value="输入框已禁用" label="用户名" disabled></van-field>
+  <van-field value="输入框已禁用" label="用户名" disabled />
 </van-cell-group>
 ```
 
@@ -57,7 +56,7 @@ Vue.use(Field);
 
 ```html
 <van-cell-group>
-  <van-field label="用户名" placeholder="请输入用户名" error></van-field>
+  <van-field label="用户名" placeholder="请输入用户名" error />
 </van-cell-group>
 ```
 
@@ -73,8 +72,7 @@ Vue.use(Field);
     placeholder="请输入留言"
     rows="1"
     autosize
-  >
+/>
-  </van-field>
 </van-cell-group>
 ```
 

docs/markdown/zh-CN/goods-action.md

@@ -59,7 +59,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | text | 按钮文字 | `String` | - | - |
 | icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
-| iconClass | 图标额外类名 | `String` | `''` | - |
+| icon-class | 图标额外类名 | `String` | `''` | - |
 | info | 图标右上角提示信息 | `String` | - | - |
 | url | 跳转链接 | `String` | - | - |
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |

docs/markdown/zh-CN/lazyload.md

@@ -17,7 +17,7 @@ Vue.use(Lazyload, options);
 将`v-lazy`指令的值设置为你需要懒加载的图片
 
 ```html
-<img v-for="img in imageList" v-lazy="img">
+<img v-for="img in imageList" v-lazy="img" >
 ```
 
 ```javascript
@@ -47,7 +47,7 @@ export default {
 
 ```html
 <lazy-component>
-  <img v-for="img in imageList" v-lazy="img">
+  <img v-for="img in imageList" v-lazy="img" >
 </lazy-component>
 ```
 
@@ -64,4 +64,4 @@ export default {
 | filter | 图片url过滤 | `Object` | - | - |
 | lazyComponent | 是否能懒加载模块 | `Boolean` | `false` | - |
 
-更多内容请参照：[ vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)
+更多内容请参照：[vue-lazyload 官方文档](https://github.com/hilongjw/vue-lazyload)

docs/markdown/zh-CN/nav-bar.md

@@ -14,9 +14,9 @@ Vue.use(NavBar);
 ```html
 <van-nav-bar
   title="标题"
-  leftText="返回"
+  left-text="返回"
-  rightText="按钮"
+  right-text="按钮"
-  leftArrow
+  left-arrow
   @click-left="onClickLeft"
   @click-right="onClickRight"
 />
@@ -39,7 +39,7 @@ export default {
 通过 slot 定制内容
 
 ```html
-<van-nav-bar title="标题" leftText="返回" leftArrow>
+<van-nav-bar title="标题" left-text="返回" left-arrow>
   <van-icon name="search" slot="right" />
 </van-nav-bar>
 ```
@@ -49,9 +49,9 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | title | 标题 | `String` | `''` | - |
-| leftText | 左侧文案 | `String` | `''` | - |
+| left-text | 左侧文案 | `String` | `''` | - |
-| rightText | 右侧文案 | `String` | `''` | - |
+| right-text | 右侧文案 | `String` | `''` | - |
-| leftArrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
+| left-arrow | 是否显示左侧箭头 | `Boolean` | `false` | - |
 | fixed | 是否固定在顶部 | `Boolean` | `false` | - |
 
 ### Slot

docs/markdown/zh-CN/notice-bar.md

@@ -14,7 +14,7 @@ Vue.use(NoticeBar);
 ```html
 <van-notice-bar
   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
-  leftIcon="https://img.yzcdn.cn/1.png"
+  left-icon="https://img.yzcdn.cn/1.png"
 />
 ```
 
@@ -50,7 +50,7 @@ Vue.use(NoticeBar);
 | delay | 动画延迟时间，单位秒 | Number | `1` | - |
 | speed | 滚动速率，单位px | Number | `50` | - |
 | scrollable | 是否滚动 | Boolean | `true` | - |
-| leftIcon | 左侧图标图片链接 | String | - | - |
+| left-icon | 左侧图标图片链接 | String | - | - |
 | color | 文本颜色 | String | `#f60` | - |
 | background | 滚动条背景 | String | `#fff7cc` | - |
 

docs/markdown/zh-CN/number-keyboard.md

@@ -12,15 +12,15 @@ Vue.use(NumberKeyboard);
 #### 默认样式
 
 ```html
-<van-button @touchstart.native.stop="showKeyboard = true">
+<van-button @touchstart.native.stop="show = true">
   弹出默认键盘
 </van-button>
 
 <van-number-keyboard
-  extraKey="."
+  :show="show"
-  :show="showKeyboard"
+  extra-key="."
-  closeButtonText="完成"
+  close-button-text="完成"
-  @blur="showKeyboard = false"
+  @blur="show = false"
   @input="onInput"
   @delete="onDelete"
 />
@@ -30,7 +30,7 @@ Vue.use(NumberKeyboard);
 export default {
   data() {
     return {
-      showKeyboard: true
+      show: true
     }
   },
 
@@ -49,11 +49,11 @@ export default {
 
 ```html
 <van-number-keyboard
+  :show="show"
   theme="custom"
-  extraKey="."
+  extra-key="."
-  :show="showKeyboard"
+  close-button-text="完成"
-  closeButtonText="完成"
+  @blur="show = false"
-  @blur="showKeyboard = false"
   @input="onInput"
   @delete="onDelete"
 />
@@ -66,12 +66,12 @@ export default {
 | show | 是否显示键盘 | `Boolean` | - | - |
 | theme | 键盘样式风格 | `String` | `Default` | `Custom` |
 | title | 键盘标题 | `String` | - | - |
-| zIndex | 键盘 z-index | `Number` | `100` | - |
-| extraKey | 左下角按键内容 | `String` | `''` | - |
-| closeButtonText | 关闭按钮文字，空则不展示 | `String` | `-` | - |
 | transition | 是否开启过场动画 | `Boolean` | `true` | - |
-| showDeleteKey | 是否展示删除按钮 | `Boolean` | `true` | - |
+| z-index | 键盘 z-index | `Number` | `100` | - |
-| hideOnClickOutside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
+| extra-key | 左下角按键内容 | `String` | `''` | - |
+| close-button-text | 关闭按钮文字，空则不展示 | `String` | `-` | - |
+| show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
+| hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
 
 ### Event
 

docs/markdown/zh-CN/pagination.md

@@ -16,8 +16,8 @@ Vue.use(Pagination);
 ```html
 <van-pagination 
   v-model="currentPage" 
-  :totalItems="24" 
+  :total-items="24" 
-  :itemsPerPage="5"
+  :items-per-page="5"
 />
 ```
 
@@ -36,7 +36,7 @@ export default {
 ```html
 <van-pagination 
   v-model="currentPage" 
-  :pageCount="12"
+  :page-count="12"
   mode="simple" 
 />
 ```
@@ -46,9 +46,9 @@ export default {
 ```html
 <van-pagination 
   v-model="currentPage" 
-  :totalItems="125" 
+  :total-items="125" 
-  :showPageSize="3" 
+  :show-page-size="3" 
-  :forceEllipses="true"
+  force-ellipses
 />
 ```
 
@@ -56,13 +56,13 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前页码 | `Object` | - | - |
+| v-model | 当前页码 | `Number` | - | - |
 | mode | 显示模式 | `String` | `multi` | `simple`  |
-| itemsPerPage | 每页记录数 | `Number` | `10` | - |
+| items-per-page | 每页记录数 | `Number` | `10` | - |
-| previousText | 上一页 | `String` | `上一页` | - |
+| previous-text | 上一页 | `String` | `上一页` | - |
-| nextText | 下一页 | `String` | `下一页` | - |
+| next-text | 下一页 | `String` | `下一页` | - |
-| showPageSize | 显示的页码个数 | `Number` | `5` | - |
+| show-page-size | 显示的页码个数 | `Number` | `5` | - |
-| forceEllipses | 显示省略号 | `Boolean` | `false` | - |
+| force-ellipses | 显示省略号 | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/zh-CN/password-input.md

@@ -57,7 +57,7 @@ export default {
 | value | 密码值 | `String` | `''` | - |
 | length | 密码最大长度 | `Number` | `6` | - |
 | info | 输入框下方提示 | `String` | - | - |
-| errorInfo | 输入框下方错误提示 | `String` | - | - |
+| error-info | 输入框下方错误提示 | `String` | - | - |
 
 ### Event
 

docs/markdown/zh-CN/picker.md

@@ -54,7 +54,7 @@ export default {
 
 ```html
 <van-picker
-  showToolbar
+  show-toolbar
   :title="标题"
   :columns="columns"
   @cancel="onCancel"
@@ -121,11 +121,11 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | columns | 对象数组，配置每一列显示的数据 | `Array` | `[]` | - |
-| showToolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
+| show-toolbar | 是否显示顶部栏 | `Boolean` | `false` | - |
 | title | 顶部栏标题 | `String` | `''` | - |
-| itemHeight | 选项高度 | `Number` | `44` | - |
+| item-height | 选项高度 | `Number` | `44` | - |
-| visibileColumnCount | 可见的选项个数 | `Number` | `5` | - |
+| visibile-column-count | 可见的选项个数 | `Number` | `5` | - |
-| valueKey | 选项对象中，文字对应的 key | `String` | `text` | - |
+| value-key | 选项对象中，文字对应的 key | `String` | `text` | - |
 
 ### Columns 数据结构
 当传入多列数据时，`columns`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`

docs/markdown/zh-CN/popup.md

@@ -41,10 +41,10 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | 当前组件是否显示 | `Boolean` | `false` | - |
 | overlay | 是否显示背景蒙层 | `Boolean` | `true` | - |
-| lockOnScroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
+| lock-on-scroll | 背景是否跟随滚动 | `Boolean` | `false` | - |
 | position | Popup 位置 | `String` | - | `top` `bottom` `right` `left` |
-| overlayClass | 自定义蒙层 class | `String` | `` | - |
+| overlay-class | 自定义蒙层 class | `String` | `` | - |
-| overlayStyle | 自定义蒙层样式 | `Object` | `` | - |
+| overlay-style | 自定义蒙层样式 | `Object` | `` | - |
-| closeOnClickOverlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - |
+| close-on-click-overlay | 点击蒙层是否关闭 Popup | `Boolean` | `true` | - |
 | transition | transition 名称 | `String` | `popup-slide` | - |
-| preventScroll | 是否防止滚动穿透 | `Boolean` | `false` | - |
+| prevent-scroll | 是否防止滚动穿透 | `Boolean` | `false` | - |

docs/markdown/zh-CN/progress.md

@@ -31,12 +31,12 @@ Vue.use(Progress);
 
 #### 样式定制
 
-可以使用`pivotText`属性自定义文字，`color`属性自定义进度条颜色
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
 
 ```html
-<van-progress pivotText="红色" color="#ed5050" :percentage="26" />
+<van-progress pivot-text="红色" color="#ed5050" :percentage="26" />
-<van-progress pivotText="橙色" color="#f60" :percentage="46" />
+<van-progress pivot-text="橙色" color="#f60" :percentage="46" />
-<van-progress pivotText="黄色" color="#f09000" :percentage="66" />
+<van-progress pivot-text="黄色" color="#f09000" :percentage="66" />
 ```
 
 ### API
@@ -45,7 +45,7 @@ Vue.use(Progress);
 |-----------|-----------|-----------|-------------|-------------|
 | inactive | 是否置灰 | `Boolean` | `false` | - |
 | percentage | 进度百分比 | `Number` | `false` | `0-100` |
-| showPivot | 是否显示进度文字 | `Boolean` | `true` | - |
+| show-pivot | 是否显示进度文字 | `Boolean` | `true` | - |
-| pivotText | 文字显示 | `String` | 百分比文字 | - |
+| pivot-text | 文字显示 | `String` | 百分比文字 | - |
 | color | 进度条颜色 | `String` | `#38f` | hexvalue |
-| textColor | 进度条文字颜色 | `String` | `#fff` | hexvalue |
+| text-color | 进度条文字颜色 | `String` | `#fff` | hexvalue |

docs/markdown/zh-CN/pull-refresh.md

@@ -44,11 +44,11 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | v-model | 是否在加载中 | `Boolean` | - | - |
-| pullingText | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
+| pulling-text | 下拉过程中顶部文案 | `String` | `下拉即可刷新...` | - |
-| loosingText | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
+| loosing-text | 释放过程中顶部文案 | `String` | `释放即可刷新...` | - |
-| loadingText | 加载过程中顶部文案 | `String` | `加载中...` | - |
+| loading-text | 加载过程中顶部文案 | `String` | `加载中...` | - |
-| animationDuration | 动画时长 | `Number` | `300` | - |
+| animation-duration | 动画时长 | `Number` | `300` | - |
-| headHeight | 顶部内容高度 | `Number` | `50` | - |
+| head-height | 顶部内容高度 | `Number` | `50` | - |
 
 ### Slot
 

docs/markdown/zh-CN/search.md

@@ -26,10 +26,10 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
   <van-search
     v-model="value"
     placeholder="请输入商品名称"
-    :showAction="true"
+    show-action
     @search="onSearch"
-    @cancel="onCancel">
+    @cancel="onCancel"
-  </van-search>
+  />
 </form>
 ```
 
@@ -39,8 +39,9 @@ Tips: 在 `van-search` 外层增加 form 标签，并且 action 不为空，即
 ```html
 <van-search
   v-model="value"
-  :showAction="true"
+  show-action
-  @search="onSearch">
+  @search="onSearch"
+>
   <div slot="action" @click="onSearch">搜索</div>
 </van-search>
 ```
@@ -51,7 +52,7 @@ Search 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pl
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | background | 搜索框背景色 | `String` | `#f2f2f2` |  所有浏览器支持的颜色描述 |
-| showAction | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
+| show-action | 是否在搜索框右侧显示取消按钮 | `Boolean` | false | - |
 
 ### Event
 Search 默认支持 Input 标签所有的原生事件，如 `focus`、`blur`、`keypress` 等

docs/markdown/zh-CN/sku.md

@@ -15,12 +15,12 @@ Vue.use(Sku);
   v-model="showBase"
   :sku="sku"
   :goods="goods"
-  :goodsId="goodsId"
+  :goods-id="goodsId"
-  :hideStock="sku.hide_stock"
+  :hide-stock="sku.hide_stock"
   :quota="quota"
-  :quotaUsed="quotaUsed"
+  :quota-used="quotaUsed"
-  :resetStepperOnHide="resetStepperOnHide"
+  :reset-stepper-on-hide="resetStepperOnHide"
-  :disableStepperInput="disableStepperInput"
+  :disable-stepper-input="disableStepperInput"
   @buy-clicked="handleBuyClicked"
   @add-cart="handleAddCartClicked"
 />
@@ -31,16 +31,16 @@ Vue.use(Sku);
 ```html
 <van-sku
   v-model="showCustomAction"
-  stepperTitle="我要买"
+  stepper-title="我要买"
   :sku="sku"
   :goods="goods"
-  :goodsId="goodsId"
+  :goods-id="goodsId"
-  :hideStock="sku.hide_stock"
+  :hide-stock="sku.hide_stock"
-  :showAddCartBtn="true"
+  :show-add-cart-btn="true"
   :quota="quota"
-  :quotaUsed="quotaUsed"
+  :quota-used="quotaUsed"
-  :resetStepperOnHide="true"
+  :reset-stepper-on-hide="true"
-  :initialSku="initialSku"
+  :initial-sku="initialSku"
   @buy-clicked="handleBuyClicked"
   @add-cart="handleAddCartClicked"
 >
@@ -49,9 +49,9 @@ Vue.use(Sku);
   <!-- 自定义 sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
-      <van-button bottomAction @click="handlePointClicked">积分兑换</van-button>
+      <van-button bottom-action @click="handlePointClicked">积分兑换</van-button>
       <!-- 直接触发 sku 内部事件，通过内部事件执行 handleBuyClicked 回调 -->
-      <van-button type="primary" bottomAction @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
+      <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
     </div>
   </template>
 </van-sku>
@@ -65,14 +65,14 @@ Vue.use(Sku);
 | v-model | 是否显示sku | `Boolean` | `false` | - |
 | sku | 商品sku数据 | `Object` | - | - |
 | goods | 商品信息 | `Object` | - | - |
-| goodsId | 商品id | `String | Number` | - | - |
+| goods-id | 商品id | `String | Number` | - | - |
-| hideStock | 是否显示商品剩余库存 | `Boolean` | `false` | - |
+| hide-stock | 是否显示商品剩余库存 | `Boolean` | `false` | - |
-| showAddCartBtn | 是否显示加入购物车按钮 | `Boolean` | `true` | - |
+| show-add-cart-btn | 是否显示加入购物车按钮 | `Boolean` | `true` | - |
 | quota | 限购数(0表示不限购) | `Number` | `0` | - |
-| quotaUsed | 已经购买过的数量 | `Number` | `0` | - |
+| quota-used | 已经购买过的数量 | `Number` | `0` | - |
-| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - |
+| reset-stepper-on-hide | 窗口隐藏时重置选择的商品数量 | `Boolean` | `false` | - |
-| disableStepperInput | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
+| disable-stepper-input | 是否禁用sku中stepper的input框 | `Boolean` | `false` | - |
-| stepperTitle | 数量选择组件左侧文案 | `String` | `购买数量` | - |
+| stepper-title | 数量选择组件左侧文案 | `String` | `购买数量` | - |
 
 ### Event
 

docs/markdown/zh-CN/stepper.md

@@ -34,10 +34,16 @@ export default {
 
 #### 高级用法
 
-默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`defaultValue`属性
+默认是每次加减为1，可以对组件设置`step`、`min`、`max`、`default-value`属性
 
 ```html
-<van-stepper v-model="value" min="5" max="40" step="2" defaultValue="9" />
+<van-stepper
+  v-model="value"
+  :min="5"
+  :max="40"
+  :step="2"
+  :default-value="9"
+/>
 ```
 
 ### API
@@ -46,10 +52,10 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | min | 最小值 | `String | Number` | `1` | - |
 | max | 最大值 | `String | Number` | - | - |
-| defaultValue | 默认值 | `String | Number` | `1` | - |
+| default-value | 默认值 | `String | Number` | `1` | - |
 | step | 步数 | `String | Number` | `1` | - |
 | disabled | 是否禁用 | `Boolean` | `false` | - | 
-| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
+| disable-input | 是否禁用input框 | `Boolean` | `false` | - |
 
 ### Event
 

docs/markdown/zh-CN/steps.md

@@ -53,7 +53,7 @@ export default {
 可以通过设置`direction`属性来改变步骤条的显示方式
 
 ```html
-<van-steps direction="vertical" :active="0" activeColor="#f60">
+<van-steps direction="vertical" :active="0" active-color="#f60">
   <van-step>
     <h3>【城市】物流状态1</h3>
     <p>2016-07-12 12:40</p>
@@ -75,11 +75,11 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | active | 当前步骤，起始值为0 | `Number` | - | - |
 | icon | 当前步骤的icon | `String` | - | - |
-| iconClass | 当前步骤栏为icon添加的类 | `String` | - | - |
+| icon-class | 当前步骤栏为icon添加的类 | `String` | - | - |
 | title | 当前步骤标题 | `String` | - | - |
 | description | 当前步骤描述 | `String` | - | - |
 | direction | 显示方向 | `String` | `horizontal` | `vertical` |
-| activeColor | active状态颜色 | `String` | `#06bf04` | - |
+| active-color | active状态颜色 | `String` | `#06bf04` | - |
 
 ### Steps Slot
 

docs/markdown/zh-CN/submit-bar.md

@@ -14,7 +14,7 @@ Vue.use(SubmitBar);
 ```html
 <van-submit-bar
   :price="3050"
-  buttonText="提交订单"
+  button-text="提交订单"
   @submit="onSubmit"
 />
 ```
@@ -26,7 +26,7 @@ Vue.use(SubmitBar);
 <van-submit-bar
   disabled
   :price="3050"
-  buttonText="提交订单"
+  button-text="提交订单"
   tip="您的收货地址不支持同城送, 我们已为您推荐快递"
   @submit="onSubmit"
 />
@@ -39,7 +39,7 @@ Vue.use(SubmitBar);
 <van-submit-bar
   loading
   :price="3050"
-  buttonText="提交订单"
+  button-text="提交订单"
   @submit="onSubmit"
 />
 ```
@@ -50,7 +50,7 @@ Vue.use(SubmitBar);
 ```html
 <van-submit-bar
   :price="3050"
-  buttonText="提交订单"
+  button-text="提交订单"
   @submit="onSubmit"
 >
   <van-checkbox v-model="checked">全选</van-checkbox>
@@ -66,8 +66,8 @@ Vue.use(SubmitBar);
 |-----------|-----------|-----------|-------------|-------------|
 | price | 价格（单位分） |  `Number` | - | - |
 | label | 价格文案 |  `String` | `合计：` | - |
-| buttonText | 按钮文字 | `String` | - | - |
+| button-text | 按钮文字 | `String` | - | - |
-| buttonType | 按钮类型 |  `String` | `danger` | - |
+| button-type | 按钮类型 |  `String` | `danger` | - |
 | tip | 提示文案 |  `String` | - | - |
 | disabled | 是否禁用按钮 |  `Boolean` | `false` | - |
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | - |

docs/markdown/zh-CN/swipe.md

@@ -52,8 +52,8 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | autoplay | 自动轮播间隔，单位为 ms | `Number` | - | - |
 | duration | 动画时长，单位为 ms | `Number` | `500` | - |
-| showIndicators | 是否显示指示器 | `Boolean` | `true` | - |
+| show-indicators | 是否显示指示器 | `Boolean` | `true` | - |
-| initialSwipe | 初始位置，从 0 开始算 | `Number` | `0` | - |
+| initial-swipe | 初始位置，从 0 开始算 | `Number` | `0` | - |
 
 ### 事件
 

docs/markdown/zh-CN/tab.md

@@ -34,7 +34,7 @@ export default {
 
 #### 横向滚动
 
-默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
+默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipe-threshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
 
 ```html
 <van-tabs>
@@ -118,7 +118,7 @@ export default {
 | type | Tab 样式类型 | `String` | `line` | `card` |
 | active | 默认激活的 tab | `String` `Number` | `0` | - |
 | duration | 切换 tab 的动画时间 | `Number` | `0.2` | - |
-| swipeThreshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - |
+| swipe-threshold | 滚动阀值，设置 Tab 超过多少个可滚动 | `Number` | `4` | - |
 | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
 
 ### Tab API

docs/markdown/zh-CN/tree-select.md

@@ -48,11 +48,11 @@ export default {
 
 #### 传入参数
 
-| 参数 | 说明 | 类型 | 默认值 | 必须 |
+| 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | `[]` | - |
-| mainActiveIndex | 左侧导航高亮的索引 | `Number` | `0` | - |
+| main-active-index | 左侧导航高亮的索引 | `Number` | `0` | - |
-| activeId | 右侧选择项，高亮的数据id | `Number` | `0` | - |
+| active-id | 右侧选择项，高亮的数据id | `Number` | `0` | - |
 
 #### 事件
 | 事件名 | 说明 | 参数 |

docs/markdown/zh-CN/uploader.md

@@ -12,7 +12,7 @@ Vue.use(Uploader);
 #### 基础用法
 
 ```html
-<van-uploader :afterRead="logContent">
+<van-uploader :after-read="onRead">
   <van-icon name="photograph" />
 </van-uploader>
 ```
@@ -20,7 +20,7 @@ Vue.use(Uploader);
 ```javascript
 export default {
   methods: {
-    logContent(file) {
+    onRead(file) {
       console.log(file)
     }
   }
@@ -31,7 +31,7 @@ export default {
 可以直接在 Uploader 上设置 accpet、multiple 等原生属性，input 会自动继承该属性
 
 ```html
-<van-uploader :afterRead="logContent" accept="image/gif, image/jpeg" multiple>
+<van-uploader :after-read="onRead" accept="image/gif, image/jpeg" multiple>
   <van-icon name="photograph" />
 </van-uploader>
 ```
@@ -40,10 +40,10 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| resultType | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
+| result-type | 读取文件的方式，以base64的方式读取；以文本的方式读取 | `String` | `dataUrl` | `text` |
 | disable | 是否禁用上传,在图片上传期间设置为true，禁止用户点击此组件上传图片 | `Boolean` | `false` | - |
-| beforeRead | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
+| before-read | 读文件之前的钩子，参数为选择的文件，若返回 false 则停止读取文件 | `Function` | - | - |
-| afterRead | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
+| after-read | 文件读完之后回调此函数，参数为 { file:'选择的文件',content:'读的内容' } | `Function` | - | - |
 
 ### Slot
 

docs/markdown/zh-CN/waterfall.md

@@ -37,7 +37,8 @@ export default {
 <ul
   v-waterfall-lower="loadMore"
   waterfall-disabled="disabled"
-  waterfall-offset="400">
+  waterfall-offset="400"
+>
   <li v-for="item in list">{{ item }}</li>
 </ul>
 ```
@@ -59,7 +60,7 @@ export default {
     loadMore() {
       this.disabled = true;
       setTimeout(() => {
-        for (let i = 0; i < 5; i ++) {
+        for (let i = 0; i < 5; i++) {
           this.list.push(this.list.length);
         }
         this.disabled = false;