[new feature] add i18n support (#310)

* fix: Tabbar icon line-height * [new feature] progress add showPivot prop * [new feature] TabItem support vue-router * [new feature] update document header style * [Doc] add toast english ducoment * [new feature] add i18n support * feat: Extract demos from markdown * feat: Base components demos * [new feature] complete demo extract & translate * [fix] text cases * fix: add deepAssign test cases * fix: changelog detail * [new feature] AddressEdit support i18n
2017-11-15 20:08:51 -06:00
parent 05abf0d509
commit d8b6ad7d54
210 changed files with 5561 additions and 5528 deletions
@@ -0,0 +1,73 @@
+## Actionsheet
+
+### Install
+``` javascript
+import { Actionsheet } from 'vant';
+
+Vue.component(Actionsheet.name, Actionsheet);
+```
+
+### Usage
+
+#### Basic Usage
+Use `actions` prop to set options of actionsheet. 
+
+```html
+<van-actionsheet v-model="show" :actions="actions" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false,
+      actions: [
+        { name: 'Option1', callback: this.onClick },
+        { name: 'Option2' },
+        { name: 'Option3', loading: true }
+      ]
+    };
+  },
+
+  methods: {
+    onClick(item) {
+      Toast(item.name);
+    }
+  }
+}
+```
+
+#### Actionsheet with cancel button
+
+```html
+<van-actionsheet v-model="show" :actions="actions" cancelText="Cancel" />
+```
+
+#### Actionsheet with title
+Actionsheet will get another style if there is a `title` prop.
+
+```html
+<van-actionsheet v-model="show" title="Title">
+  <p>Content</p>
+</van-actionsheet>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| actions | Options | `Array` | `[]` | - |
+| title | Title | `String` | - | - |
+| cancelText | Text of cancel button | `String` | - | - |
+| overlay | Whether to show overlay | `Boolean` | - | - |
+| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | - | - |
+
+### Data struct of actions
+
+| key | Description |
+|-----------|-----------|
+| name | Title |
+| subname | Subtitle |
+| className | className for the option |
+| loading | Whether to be loading status |
+| callback | Triggered when click option |
@@ -0,0 +1,104 @@
+## AddressEdit
+
+### Install
+``` javascript
+import { AddressEdit } from 'vant';
+
+Vue.component(AddressEdit.name, AddressEdit);
+```
+
+### Usage
+
+#### Basic Usage
+
+
+```html
+<van-address-edit
+  :areaList="areaList"
+  :showPostal="true"
+  :showSetDefault="true"
+  :showSearchResult="true"
+  :searchResult="searchResult"
+  @save="onSave"
+  @delete="onDelete"
+  @change-detail="onChangeDetail"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+}
+```
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| areaList | 地区列表 | `Object` | - | - |
+| addressInfo | 收货人信息 | `Object` | `{}` | - |
+| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
+| addressText | "地址"文案前缀 | `String` | `收货` | - |
+| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
+| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
+| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
+
+### Data Structure
+
+#### addressInfo Data Structure
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| province | 省份 | `String` |
+| city | 城市 | `String` |
+| county | 区县 | `String` |
+| address_detail | 详细地址 | `String` |
+| area_code | 地区编码，通过省市区选择获取 | `String` |
+| postal_code | 邮政编码 | `String` |
+| is_default | 是否为默认地址 | `String` |
+
+#### searchResult Data Structure
+| key | Description | Type |
+|-----------|-----------|-----------|
+| name | 地名 | `String` |
+| address | 详细地址 | `String` |
+
+#### 省市县列表Data Structure
+请参考 [Area](#/zh-CN/component/area) 组件。
@@ -0,0 +1,79 @@
+## AddressList
+
+### Install
+``` javascript
+import { AddressList } from 'vant';
+
+Vue.component(AddressList.name, AddressList);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-address-list
+  v-model="chosenAddressId"
+  :list="list"
+  @add="onAdd"
+  @edit="onEdit"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      chosenAddressId: '1',
+      list: [
+        {
+          id: '1',
+          name: '张三',
+          tel: '13000000000',
+          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
+        },
+        {
+          id: '2',
+          name: '李四',
+          tel: '1310000000',
+          address: '浙江省杭州市拱墅区莫干山路 50 号'
+        }
+      ]
+    }
+  },
+
+  methods: {
+    onAdd() {
+      Toast('新增收货地址');
+    },
+    onEdit(item, index) {
+      Toast('编辑收货地址:' + index);
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中地址的 id | String | - | - |
+| list | 地址列表 | Array | `[]` | - |
+| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| select | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+
+### Data Structure
+#### 地址列表字段说明
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| address | 收货地址 | `String` |
@@ -0,0 +1,106 @@
+## Area
+
+### Install
+
+``` javascript
+import { Area } from 'vant';
+
+Vue.component(Area.name, Area);
+```
+
+### Usage
+
+#### Basic Usage
+
+要初始化一个`Area`组件，你需要传入一个`areaList`属性，`areaList`Data Structure具体可看下面Data Structure章节。
+
+```html
+<van-area :areaList="areaList" />
+```
+
+#### Initial Value
+
+如果想选中某个省市县，需要传入一个`value`属性，绑定对应的省市县`code`。
+
+```html
+<van-area :areaList="areaList" value="110101" />
+```
+
+#### Columns Number
+
+可以通过`columnsNum`属性配置省市县显示的列数，默认情况下会显示省市县，当你设置为`2`，则只会显示省市选择。
+
+```html
+<van-area :areaList="areaList" :columnsNum="2" />
+```
+
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| value | 当前选中的省市区`code` | `String` | - | - |
+| areaList | 省市县数据，必须与`province_list`、`city_list`和`county_list`为key | `Object` | - | - |
+| columnsNum | 省市县显示列数，3-省市县，2-省市，1-省 | `String`,`Number` | 3 | - |
+
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方Data Structure章节 |
+| cancel | 点击取消按钮时 | - |
+
+### Data Structure
+
+#### 省市县列表Data Structure
+
+整体是一个Object，包含 `province_list`, `city_list`, `county_list` 三个key。
+
+每项以省市区编码作为key，省市区名字作为value。编码为6位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以0补足6位。如北京编码为 `11`，以零补足6位，为 `110000`。
+
+`AreaList`具体格式如下：
+```javascript
+{
+  province_list: {
+    110000: '北京市',
+    120000: '天津市'
+  },
+  city_list: {
+    110100: '北京市',
+    110200: '县',
+    120100: '天津市',
+    120200: '县'
+  },
+  county_list: {
+    110101: '东城区',
+    110102: '西城区',
+    110105: '朝阳区',
+    110106: '丰台区'
+    120101: '和平区',
+    120102: '河东区',
+    120103: '河西区',
+    120104: '南开区',
+    120105: '河北区',
+    // ....
+  }
+}
+```
+
+完整数据见 [Area.json](https://github.com/youzan/vant/blob/dev/docs/demos/mock/area.json)
+
+#### 点击完成时返回的Data Structure
+返回的数据整体为一个数组，数组内包含 `columnsNum` 个数据， 每个数据对应一列选项中被选中的数据。
+
+`code` 代表被选中的地区编码， `name` 代表被选中的地区名称
+```javascript
+[{
+  code: '110000',
+  name: '北京市'
+}, {
+  code: '110100',
+  name: '北京市'
+},{
+  code: '110101',
+  name: '东城区'
+}]
+```
@@ -0,0 +1,50 @@
+## Badge
+
+### Install
+``` javascript
+import { Badge } from 'vant';
+
+Vue.component(Badge.name, Badge);
+```
+
+### Usage
+
+#### Basic Usage
+Use `activeKey` prop to set index of chosen 'badge'
+
+```html
+<van-badge-group :activeKey="activeKey">
+  <van-badge title="Title" @click="onClick"></van-badge>
+  <van-badge title="Title" @click="onClick" info="8"></van-badge>
+  <van-badge title="Title" @click="onClick" info="99"></van-badge>
+  <van-badge title="Title" @click="onClick" info="199"></van-badge>
+</van-badge-group>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onClick(key) {
+      this.activeKey = key;
+    }
+  }
+};
+```
+
+### BadgeGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| activeKey | Index of chosen badge | `String | Number` | `0` | - |
+
+### Badge API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Content | `String` | `''` | - |
+| info | Info Message | `String` | `''` | - |
+| url | Link | `String` | - | - |
@@ -0,0 +1,77 @@
+## Button
+
+### Install
+``` javascript
+import { Button } from 'vant';
+
+Vue.component(Button.name, Button);
+```
+
+### Usage
+
+#### Type
+
+```html
+<van-button type="default">Default</van-button>
+<van-button type="primary">Primary</van-button>
+<van-button type="danger">Danger</van-button>
+```
+
+#### Size
+
+```html 
+<van-button size="large">Large</van-button>
+<van-button size="normal">Normal</van-button>
+<van-button size="small">Small</van-button>
+<van-button size="mini">Mini</van-button>
+```
+
+#### Disabled
+
+```html
+<van-button disabled>Diabled</van-button>
+```
+
+#### Loading
+
+```html 
+<van-button loading></van-button>
+<van-button loading type="primary"></van-button>
+```
+
+#### Custom Tag
+Use `tag` prop to custom button tag
+
+```html 
+<van-button tag="a" href="https://www.youzan.com" target="_blank">
+  Button
+</van-button>
+```
+
+#### Action Button
+
+```html 
+<van-button type="primary" bottomAction>Button</van-button>
+
+<van-row>
+  <van-col span="12">
+    <van-button bottomAction>Button</van-button>
+  </van-col>
+  <van-col span="12">
+    <van-button type="primary" bottomAction>Button</van-button>
+  </van-col>
+</van-row>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type | `String` | `default` | `primary` `danger` |
+| size | Size | `String` | `normal` | `large` `small` `mini` |
+| tag | Tag | `String` | `button` | - |
+| nativeType | 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` | - |
@@ -0,0 +1,61 @@
+## Card
+
+### Install
+``` javascript
+import { Card } from 'vant';
+
+Vue.component(Card.name, Card);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-card
+  title="Title"
+  desc="Description"
+  num="2"
+  price="2.00"
+  :thumb="imageURL"
+/>
+```
+
+#### Advanced Usage
+Use `slot` to custom content.
+
+```html
+<van-card
+  title="Title"
+  desc="Description"  
+  num="2"
+  price="2.00"
+  :thumb="imageURL"
+>
+  <div slot="footer">
+    <van-button size="mini">Button</van-button>
+    <van-button size="mini">Button</van-button>
+  </div>
+</van-card>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| thumb | Left thumb | `String` | - | - |
+| title | Title | `String` | - | - |
+| desc | Description | `String` | - | - |
+| num | Number of goods | `String | Number` | - | - |
+| price | Price of goods | `String | Number` | - | - |
+| centered | Whether content vertical centered | `String` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| title | Custom title |
+| desc | Custom description |
+| tags | Custom tags |
+| thumb | Custom thumb |
+| footer | Custom footer |
@@ -0,0 +1,37 @@
+## CellSwipe
+
+### Install
+``` javascript
+import { CellSwipe } from 'vant';
+
+Vue.component(CellSwipe.name, CellSwipe);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-cell-swipe :right-width="65" :left-width="65">
+  <span slot="left">Select</span>
+  <van-cell-group>
+    <van-cell title="Cell" value="Cell Content"></van-cell>
+  </van-cell-group>
+  <span slot="right">Delete</span>
+</van-cell-swipe>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| left-width | Width of the left scrollable area | `Number` | `0` | - |
+| right-width | Width of the right scrollable area | `Number` | `0` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | custom content |
+| left | content of left scrollable area |
+| right | content of right scrollabe area |
@@ -0,0 +1,87 @@
+## Cell
+
+### Install
+``` javascript
+import { Cell, CellGroup } from 'vant';
+
+Vue.component(Cell.name, Cell);
+Vue.component(CellGroup.name, CellGroup);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-cell-group>
+  <van-cell title="Cell title" value="Content"></van-cell>
+  <van-cell title="Cell title" value="Content" label="Description"></van-cell>
+</van-cell-group>
+```
+
+#### Value only
+
+```html
+<van-cell-group>
+  <van-cell value="Content"></van-cell>
+</van-cell-group>
+```
+
+#### Left Icon
+
+```html
+<van-cell-group>
+  <van-cell title="Cell title" icon="location"></van-cell>
+</van-cell-group>
+```
+
+#### Link
+
+```html
+<van-cell-group>
+  <van-cell title="Cell title" is-link></van-cell>
+  <van-cell title="Cell title" is-link value="Content"></van-cell>
+</van-cell-group>
+```
+
+#### Advanced Usage
+
+```html
+<van-cell-group>
+  <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" is-link></van-cell>
+  <van-cell title="Cell title">
+    <template slot="right-icon">
+      <van-icon name="search" class="van-cell__right-icon"></van-icon>
+    </template>
+  </van-cell>
+</van-cell-group>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | Left Icon | `String` | - | - |
+| title | Title | `String` | - | - |
+| value | Right text | `String` | - | - |
+| label | Description below the title | `String` | - | - |
+| 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` | - |
+| required | Whether to show required mark | `Boolean` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
+| icon | Custom icon |
+| title | Custom title |
+| right-icon | Custom right icon |
@@ -0,0 +1,193 @@
+## Changelog
+
+### [0.10.9](https://github.com/youzan/vant/tree/v0.10.9) 
+`2017-11-15`
+
+**Improvements**
+- Icon: add new icons [\#315](https://github.com/youzan/vant/pull/315) [@cookfront](https://github.com/cookfront)
+
+**Bug Fixes**
+- Search: fix box-sizing wrong [\#312](https://github.com/youzan/vant/pull/312) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.8](https://github.com/youzan/vant/tree/v0.10.8)
+`2017-11-11`
+
+**Improvements**
+- Tabbar: support vue-router [\#305](https://github.com/youzan/vant/pull/305) [@chenjiahan](https://github.com/chenjiahan)
+- Stepper: add plus & minus event [\#294](https://github.com/youzan/vant/pull/294) [@chenjiahan](https://github.com/chenjiahan)
+- Progress: add showPivot prop [\#300](https://github.com/youzan/vant/pull/300) [@chenjiahan](https://github.com/chenjiahan)
+- Loading: add spinner type [\#297](https://github.com/youzan/vant/pull/297) [@chenjiahan](https://github.com/chenjiahan)
+- Toast: add mask option [\#296](https://github.com/youzan/vant/pull/296) [@chenjiahan](https://github.com/chenjiahan)
+- add Tab english document [\#308](https://github.com/youzan/vant/pull/308) [@cookfront](https://github.com/cookfront)
+- add Toast english document [\#307](https://github.com/youzan/vant/pull/307) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix npm run dist errors in windows [\#301](https://github.com/youzan/vant/pull/301) [@zlkiarest](https://github.com/lkiarest)
+
+### [0.10.7](https://github.com/youzan/vant/tree/v0.10.7)
+`2017-11-08`
+
+**Improvements**
+- Normalize size of all icons [\#292](https://github.com/youzan/vant/pull/292) [@chenjiahan](https://github.com/chenjiahan)
+- ImagePreview support custom startPosition [\#286](https://github.com/youzan/vant/pull/286) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Sku scroll lock [\#291](https://github.com/youzan/vant/pull/291) [@w91](https://github.com/w91)
+- fix Steps style error when has more than 4 items [\#287](https://github.com/youzan/vant/pull/287) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.6](https://github.com/youzan/vant/tree/v0.10.6)
+`2017-11-06`
+
+**Improvements**
+- add Swipe initialSwipe prop [\#279](https://github.com/youzan/vant/pull/279) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Dialog button text not reset when showed [\#278](https://github.com/youzan/vant/pull/278) [@chenjiahan](https://github.com/chenjiahan)
+- fix Tab dynamic generate bug [\#284](https://github.com/youzan/vant/pull/284) [@cookfront](https://github.com/cookfront)
+- fix NoticeBar text disappeared when page back [\#280](https://github.com/youzan/vant/pull/280) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.5](https://github.com/youzan/vant/tree/v0.10.5)
+`2017-10-30`
+
+**Improvements**
+- Cell support vue-router target route [\#268](https://github.com/youzan/vant/pull/268) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Tabbar info display when use icon slot [\#269](https://github.com/youzan/vant/pull/269) [@chenjiahan](https://github.com/chenjiahan)
+- fix Uploader input type [\#265](https://github.com/youzan/vant/pull/265) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.4](https://github.com/youzan/vant/tree/v0.10.4)
+`2017-10-26`
+
+**Improvements**
+- add more icons [\#253](https://github.com/youzan/vant/pull/253) [@pangxie1991](https://github.com/pangxie1991)
+- add document of custom theme [\#251](https://github.com/youzan/vant/pull/251) [@chenjiahan](https://github.com/chenjiahan)
+- add click feedback of buttons in components [\#248](https://github.com/youzan/vant/pull/248) [@chenjiahan](https://github.com/chenjiahan)
+- add more props of NoticeBar [\#254](https://github.com/youzan/vant/pull/254) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Swipe width calc error [\#258](https://github.com/youzan/vant/pull/258) [@chenjiahan](https://github.com/chenjiahan)
+- fix PullRefreash scroll bug when parent is scrollable [\#247](https://github.com/youzan/vant/pull/247) [@GeoffZhu](https://github.com/GeoffZhu)
+- fix CouponList empty info display bug [\#246](https://github.com/youzan/vant/pull/246) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.3](https://github.com/youzan/vant/tree/v0.10.3)
+`2017-10-25`
+
+**Improvements**
+- add Tabbar info prop [\#245](https://github.com/youzan/vant/pull/245) [@chenjiahan](https://github.com/chenjiahan)
+- add Toast position prop [\#244](https://github.com/youzan/vant/pull/244) [@chenjiahan](https://github.com/chenjiahan)
+- add Coupon showExchangeBar prop [\#243](https://github.com/youzan/vant/pull/243) [@chenjiahan](https://github.com/chenjiahan)
+- add Advanced components english document [\#236](https://github.com/youzan/vant/pull/236) [@Tinysymphony](https://github.com/Tinysymphony)
+- add demo pages in document [\#237](https://github.com/youzan/vant/pull/237) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Address & Contact list style error [\#230](https://github.com/youzan/vant/pull/230) [@chenjiahan](https://github.com/chenjiahan)
+- fix popup style missing when build style entry [\#231](https://github.com/youzan/vant/pull/231) [@chenjiahan](https://github.com/chenjiahan)
+- fix PullRefresh touchcancel event [\#239](https://github.com/youzan/vant/pull/239) [@GeoffZhu](https://github.com/GeoffZhu)
+
+### [0.10.2](https://github.com/youzan/vant/tree/v0.10.2)
+`2017-10-20`
+
+**Improvements**
+- Sku: sku-group slot add event bus [\#226](https://github.com/youzan/vant/pull/226) [@w91](https://github.com/w91)
+- add English documents [\#220](https://github.com/youzan/vant/pull/220) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- Optimize component dependency analyze when build style entry [\#224](https://github.com/youzan/vant/pull/224) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.1](https://github.com/youzan/vant/tree/v0.10.1)
+`2017-10-18`
+
+**Improvements**
+- upgrade Vue version to 2.5.0 [@chenjiahan](https://github.com/chenjiahan)
+- add Tabs swipeThreshold prop [\#206](https://github.com/youzan/vant/pull/206) [@cookfront](https://github.com/cookfront)
+
+**Bug Fixes**
+- fix Swipe not clear autoplay timer when destroyed [\#218](https://github.com/youzan/vant/pull/218) [@chenjiahan](https://github.com/chenjiahan)
+- fix Tab slot text ellipsis [\#217](https://github.com/youzan/vant/pull/217) [@cookfront](https://github.com/cookfront)
+- fix TreeSelect denpendency path error [\#216](https://github.com/youzan/vant/pull/216) [@chenjiahan](https://github.com/chenjiahan)
+- fix Checkbox border render error in Weixin browser [\#214](https://github.com/youzan/vant/pull/214) [@chenjiahan](https://github.com/chenjiahan)
+- fix Popup modal can not display in some cases [\#211](https://github.com/youzan/vant/pull/211) [@chenjiahan](https://github.com/chenjiahan)
+- fix Waterfall repeated event bind [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.10.0](https://github.com/youzan/vant/tree/v0.10.0)
+`2017-10-13`
+
+**Breaking changes**
+- remove reset.css in vant-css [\#192](https://github.com/youzan/vant/issues/192) [\#196](https://github.com/youzan/vant/pull/196) [@chenjiahan](https://github.com/chenjiahan)
+- reconstruct Swipe component, adjust some API [#174](https://github.com/youzan/vant/issues/174) [#180](https://github.com/youzan/vant/issues/180) [\#194](https://github.com/youzan/vant/pull/194) [\#200](https://github.com/youzan/vant/pull/200) [@chenjiahan](https://github.com/chenjiahan)
+- optimize Search component，adjust struct [\#198](https://github.com/youzan/vant/pull/198) [@pangxie1991](https://github.com/pangxie1991)
+
+**Improvements**
+- add Tabbar componnet [#157](https://github.com/youzan/vant/issues/157) [\#204](https://github.com/youzan/vant/pull/204) [@chenjiahan](https://github.com/chenjiahan)
+- add english document of Form components [\#199](https://github.com/youzan/vant/pull/199) [@chenjiahan](https://github.com/chenjiahan)
+- optimize Sku style [\#205](https://github.com/youzan/vant/pull/205) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix ImagePreview beating bug when loading image [\#201](https://github.com/youzan/vant/pull/201) [@chenjiahan](https://github.com/chenjiahan)
+- fix Field height error when type is textarea and display none [\#181](https://github.com/youzan/vant/issues/181) [@chenjiahan](https://github.com/chenjiahan)
+
+### [0.9.12](https://github.com/youzan/vant/tree/v0.9.12) 
+`2017-10-11`
+
+**Bug Fixes**
+
+- fix Search style bug [\#191](https://github.com/youzan/vant/pull/191) ([pangxie1991](https://github.com/pangxie1991))
+
+### [0.9.11](https://github.com/youzan/vant/tree/v0.9.11)
+`2017-10-11`
+
+**Improvements**
+- add Contribute document [\#182](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
+
+**Bug Fixes**
+- fix AddressEdit name key [\#187](https://github.com/youzan/vant/pull/187) [@chenjiahan](https://github.com/chenjiahan)
+- fix Filed textarea wrong height when display none [\#188](https://github.com/youzan/vant/pull/188) [@chenjiahan](https://github.com/chenjiahan)
+- fix compile error in windows [\#185](https://github.com/youzan/vant/pull/182) [@pangxie1991](https://github.com/pangxie1991)
+
+### [0.9.10](https://github.com/youzan/vant/tree/v0.9.10)
+`2017-10-09`
+
+**Improvements**
+- add Contact component [\#160](https://github.com/youzan/vant/pull/160) [@chenjiahan](https://github.com/chenjiahan)
+- add AddressEdit component [\#147](https://github.com/youzan/vant/pull/147) [@chenjiahan](https://github.com/chenjiahan)
+- add english document support [\#170](https://github.com/youzan/vant/pull/170) [@pangxie1991](https://github.com/pangxie1991)
+- remove dependency of zan-utils [\#168](https://github.com/youzan/vant/pull/168) [@w91](https://github.com/w91) [@chenjiahan](https://github.com/chenjiahan)
+- remove unnecessary codes in transition.js [\#162](https://github.com/youzan/vant/pull/162) [@chenjiahan](https://github.com/chenjiahan)
+- use clean-css instead of gulp-cssmin to minify css [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Tab props not observable [\#148](https://github.com/youzan/vant/pull/148) [@chenjiahan](https://github.com/chenjiahan)
+- fix Button active border color [\#150](https://github.com/youzan/vant/issues/150) [@ZWkang](https://github.com/ZWkang)
+- fix Stepper input style [\#159](https://github.com/youzan/vant/pull/159) [@w91](https://github.com/w91)
+- fix Waterfall disable props not work when display none [\#166](https://github.com/youzan/vant/pull/166) [@pangxie1991](https://github.com/pangxie1991)
+- fix vant-css not compile calc property after build [@chenjiahan](https://github.com/chenjiahan)
+- fix npm run dev error in MacOS [\#152](https://github.com/youzan/vant/issues/152) [@chenjiahan](https://github.com/chenjiahan)
+- fix document router not work in some browsers [\#158](https://github.com/youzan/vant/pull/158) [@pangxie1991](https://github.com/pangxie1991)
+
+### [0.9.9](https://github.com/youzan/vant/tree/v0.9.9)
+`2017-09-26`
+
+**Improvements**
+- Sku：support Stepper [\#146](https://github.com/youzan/vant/pull/146) [@w91](https://github.com/w91)
+
+**Bug Fixes**
+- fix license error in packages.json [\#144](https://github.com/youzan/vant/pull/144) [@airyland](https://github.com/airyland)
+- fix Waterfall scroll bug [\#145](https://github.com/youzan/vant/pull/145) [@pangxie1991](https://github.com/pangxie1991)
+
+
+### [0.9.8](https://github.com/youzan/vant/tree/v0.9.8)
+`2017-09-24`
+
+**Improvements**
+- add AddressList component [\#138](https://github.com/youzan/vant/pull/138) [@chenjiahan](https://github.com/chenjiahan)
+- modify changelog [\#140](https://github.com/youzan/vant/pull/140) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- fix Sku message render bug [\#142](https://github.com/youzan/vant/pull/142) [@w91](https://github.com/w91)
+
+### [0.9.7](https://github.com/youzan/vant/tree/v0.9.7)
+`2017-09-21`
+
+**Improvements**
+- Checkbox: support shape prop [\#137](https://github.com/youzan/vant/pull/137) [@chenjiahan](https://github.com/chenjiahan)
@@ -0,0 +1,97 @@
+## Checkbox
+
+### Install
+``` javascript
+import { Checkbox, CheckboxGroup } from 'vant';
+
+Vue.component(Checkbox.name, Checkbox);
+Vue.component(CheckboxGroup.name, CheckboxGroup);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checked: true
+    };
+  }
+};
+```
+
+#### Disabled
+
+```html
+<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
+```
+
+#### Checkbox Group
+When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
+
+```html
+<van-checkbox-group v-model="result">
+  <van-checkbox
+    v-for="(item, index) in list"
+    :key="index"
+    :name="item"
+  >
+    Checkbox {{ item }}
+  </van-checkbox>
+</van-checkbox-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      list: ['a', 'b', 'c'],
+      result: ['a', 'b']
+    };
+  }
+};
+```
+
+#### Inside a Cell
+
+```html
+<van-checkbox-group v-model="result">
+  <van-cell-group>
+    <van-cell v-for="(item, index) in list" :key="index">
+      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
+    </van-cell>
+  </van-cell-group>
+</van-checkbox-group>
+```
+
+### Checkbox API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Checkbox name | `Boolean` | `false` | - |
+| disabled | Diable checkbox | `Boolean` | `false` | - |
+| shape | Checkbox shape | `String` | `round` | `square` |
+
+### CheckboxGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Disable all checkboxes | `Boolean` | `false` | - |
+
+### Checkbox Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |
+
+### CheckboxGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |
@@ -0,0 +1,169 @@
+## Contact
+通过 Contact 组件可以实现联系人的展示、选择、编辑等功能。
+
+### Install
+``` javascript
+import { ContactCard, ContactList, ContactEdit } from 'vant';
+
+Vue.component(ContactCard.name, ContactCard);
+Vue.component(ContactList.name, ContactList);
+Vue.component(ContactEdit.name, ContactEdit);
+```
+
+### Usage
+
+#### Basic Usage
+
+
+```html
+<!-- 联系人卡片 -->
+<van-contact-card
+  :type="cardType"
+  :name="currentContact.name"
+  :tel="currentContact.tel"
+  @click="showList = true"
+/>
+
+<!-- 联系人列表 -->
+<van-popup v-model="showList" position="bottom">
+  <van-contact-list
+    v-model="chosenContactId"
+    :list="list"
+    @add="onAdd"
+    @edit="onEdit"
+    @select="onSelect"
+  />
+</van-popup>
+
+<!-- 联系人编辑 -->
+<van-popup v-model="showEdit" position="bottom">
+  <van-contact-edit
+    :contactInfo="editingContact"
+    :isEdit="isEdit"
+    @save="onSave"
+    @delete="onDelete"
+  />
+</van-popup>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      chosenContactId: null,
+      editingContact: {},
+      showList: false,
+      showEdit: false,
+      isEdit: false,
+      list: [{
+        name: '张三',
+        tel: '13000000000',
+        id: 0
+      }]
+    };
+  },
+
+  computed: {
+    cardType() {
+      return this.chosenContactId !== null ? 'edit' : 'add';
+    },
+
+    currentContact() {
+      const id = this.chosenContactId;
+      return id !== null ? this.list.filter(item => item.id === id)[0] : {};
+    }
+  },
+
+  methods: {
+    // 添加联系人
+    onAdd() {
+      this.editingContact = { id: this.list.length };
+      this.isEdit = false;
+      this.showEdit = true;
+    },
+
+    // 编辑联系人
+    onEdit(item) {
+      this.isEdit = true;      
+      this.showEdit = true;
+      this.editingContact = item;
+    },
+
+    // 选中联系人
+    onSelect() {
+      this.showList = false;
+    },
+
+    // 保存联系人
+    onSave(info) {
+      this.showEdit = false;
+      this.showList = false;
+      
+      if (this.isEdit) {
+        this.list = this.list.map(item => item.id === info.id ? info : item);
+      } else {
+        this.list.push(info);
+      }
+      this.chosenContactId = info.id;
+    },
+
+    // 删除联系人
+    onDelete(info) {
+      this.showEdit = false;
+      this.list = this.list.filter(item => item.id !== info.id);
+      if (this.chosenContactId === info.id) {
+        this.chosenContactId = null;
+      }
+    }
+  }
+};
+```
+
+
+### ContactCard API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type，分为添加和编辑两种样式 | `String` | `add` | `edit` |
+| addText | 添加时的文案提示 | `String` | `添加订单联系人信息` | - |
+| name | 联系人姓名 | `String` | - | - |
+| tel | 联系人手机号 | `String` | - | - |
+
+### ContactList API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中联系人的 id | `String | Number` | - | - |
+| addText | 新建按钮文案 | `String` | `新建联系人` | - |
+| list | 联系人列表 | `Array` | `[]` | - |
+
+### ContactList Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前联系人对象，index: 索引 |
+| select | 切换选中的联系人时触发 | item: 当前联系人对象，index: 索引 |
+
+
+### ContactEdit API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| contactInfo | 联系人信息 | `Object` | `[]` | - |
+| isEdit | 是否为编辑联系人 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
+
+### ContactEdit Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+
+### Data Structure
+
+#### 联系人Data Structure
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 每位联系人的唯一标识 | `String | Number` |
+| name | 联系人姓名 | `String` |
+| tel | 联系人手机号 | `String` |
@@ -0,0 +1,115 @@
+## Coupon
+
+### Install
+``` javascript
+import { CouponCell, CouponList } from 'vant';
+
+Vue.component(CouponCell.name, CouponCell);
+Vue.component(CouponList.name, CouponList);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<!-- 优惠券单元格 -->
+<van-coupon-cell
+  :coupons="coupons"
+  :chosenCoupon="chosenCoupon"
+  @click="showList = true"
+/>
+
+<!-- 优惠券列表 -->
+<van-popup v-model="showList" position="bottom">
+  <van-coupon-list
+    :coupons="coupons"
+    :chosenCoupon="chosenCoupon"
+    :disabledCoupons="disabledCoupons"
+    @change="onChange"
+    @exchange="onExchange"
+  />
+</van-popup>
+```
+
+```javascript
+const coupon = {
+  available: 1,
+  discount: 0,
+  denominations: 150,
+  origin_condition: 0,
+  reason: '',
+  value: 150,
+  condition: '下单立减 1.50 元',
+  name: '新手专用优惠券',
+  start_at: 1489104000,
+  end_at: 1514592000
+};
+
+export default {
+  data() {
+    return {
+      chosenCoupon: -1,
+      coupons: [coupon],
+      disabledCoupons: [coupon]
+    }
+  },
+
+  methods: {
+    onChange(index) {
+      this.showList = false;
+      this.chosenCoupon = index;
+    },
+    onExchange(code) {
+      this.coupons.push(coupon);
+    }
+  }
+}
+```
+
+### CouponCell API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 单元格标题 | `String` | `优惠` | - |
+| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| editable | 能否切换优惠券 | `Boolean` | `true` | - |
+
+### CouponList API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否展示优惠券列表 | `Boolean` | `false` | - |
+| chosenCoupon | 当前选中优惠券的索引 | `Number` | `-1` | - |
+| coupons | 可用优惠券列表 | `Array` | `[]` | - |
+| disabledCoupons | 不可用优惠券列表 | `Array` | `[]` | - |
+| exchangeButtonText | 兑换按钮文字 | `String` | `兑换` | - |
+| exchangeButtonDisabled | 是否禁用兑换按钮 | `Boolean` | `false` | - |
+| displayedCouponIndex | 滚动至特定优惠券位置 | `Number` | - | - |
+| closeButtonText | 列表底部按钮文字 | `String` | 不使用优惠 | - |
+| disabledListTitle | 不可用券列表标题 | `String` | 不可用优惠 | - |
+| inputPlaceholder | 输入框文字提示 | `String` | 请输入优惠码 | - |
+
+### CouponList Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | 优惠券切换回调 | index, 选中优惠券的索引 |
+| exchange | 兑换优惠券回调 | code, 兑换码 |
+
+### Data Structure
+#### 优惠券字段说明
+| key | Description | Type |
+|-----------|-----------|-----------|
+| id | 优惠券 id | `String` |
+| name | 优惠券名称 | `String` |
+| available | 是否可用, 1:可用,0:不可用 | `Number` |
+| discount | 折扣（0为满减券）88=>8.8折 | `Number` |
+| denominations | 面值（0为折扣券）单位分 | `Number` |
+| origin_condition | 满减条件（0为无门槛，满XX元可用）单位分 | `Number` |
+| start_at | 	卡有效开始时间 | `Number` |
+| end_at | 卡失效日期 | `Number` |
+| reason | 不可用原因 | `String` |
+| value | 订单优惠金额，单位分 | `Number` |
+| condition | 格式化输出 value | `String` |
@@ -0,0 +1,80 @@
+## DatetimePicker
+
+### Install
+``` javascript
+import { DatetimePicker } from 'vant';
+
+Vue.component(DatetimePicker.name, DatetimePicker);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="datetime"
+  :minHour="minHour"
+  :maxHour="maxHour"
+  :minDate="minDate"
+  :maxDate="maxDate"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      minHour: 10,
+      maxHour: 20,
+      minDate: new Date(),
+      maxDate: new Date(2019, 10, 1),
+      currentDate: new Date(2018, 0, 1)
+    };
+  }
+};
+```
+
+#### Date Picker
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="date"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+/>
+```
+
+#### Time Picker
+
+```html
+<van-datetime-picker
+  v-model="currentDate3"
+  type="time"
+  :min-hour="minHour"
+  :max-hour="maxHour"
+  :min-date="minDate"
+/>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Picker type | `String` | 'datetime' |  'date', 'time' |
+| minDate | Min date | `Date` | Ten years ago on January 1 | - |
+| maxDate | Max date | `Date` | Ten years later on December 31 | - |
+| minHour | Min hour | `Number` | `0` | - |
+| maxHour | Max hour | `Number` | `23` | - |
+| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
+
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | picker: picker instance |
+| confirm | Triggered when click confirm button | value: current value |
+| cancel | Triggered when click cancel button | - |
@@ -0,0 +1,63 @@
+## Dialog
+
+### Install
+
+```js
+import { Dialog } from 'vant';
+```
+
+### Usage
+
+#### Alert dialog
+Used to prompt for some messages, only including one confirm button
+
+```javascript
+Dialog.alert({
+  title: 'Title',
+  message: 'Content'
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: 'Content'
+}).then(() => {
+  // on close
+});
+```
+
+#### Confirm dialog
+Used to confirm some messages, including a confirm button and a cancel button
+
+```javascript
+ Dialog.confirm({
+  title: 'Title',
+  message: 'Content'
+}).then(() => {
+  // on confirm
+}).catch(() => {
+  // on cancel
+});
+```
+
+### Methods
+
+| Name | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| Dialog.alert | options | `Promise` | Show alert dialog |
+| Dialog.confirm | options | `Promise` | Show confim dialog |
+| Dialog.close | - | `void` | Close dialog |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | - | - |
+| message | Message | `String` | - | - |
+| showConfirmButton | Whether to show confirm button | `Boolean` |  `true` | - |
+| showCancelButton | Whether to show cancel button | `Boolean` |  `false` | - |
+| confirmButtonText | Confirm button text | `String` |  `Confirm` | - |
+| cancelButtonText | Cancel button test | `String` | `Cancel` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | - |
+| lockOnScroll | Whether to lock body scroll | `Boolean` | `true` | - |
@@ -0,0 +1,103 @@
+## Field
+
+### Install
+``` javascript
+import { Field } from 'vant';
+
+Vue.component(Field.name, Field);
+```
+
+### Usage
+
+#### Basic Usage
+The value of filed is bound with v-model.
+
+```html
+<van-cell-group>
+  <van-field v-model="value" placeholder="Username"></van-field>
+</van-cell-group>
+```
+
+#### Custom type
+Use `type` prop to custom diffrent type fileds.
+
+```html
+<van-cell-group>
+  <van-field
+    v-model="username"
+    label="Username"
+    icon="clear"
+    placeholder="Username"
+    required
+    @click-icon="username = ''"
+  >
+  </van-field>
+
+  <van-field
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Password"
+    required>
+  </van-field>
+</van-cell-group>
+```
+
+#### Disabled
+
+```html
+<van-cell-group>
+  <van-field value="Disabled" label="Username" disabled></van-field>
+</van-cell-group>
+```
+
+#### Error info
+
+```html
+<van-cell-group>
+  <van-field label="Username" placeholder="Username" error></van-field>
+</van-cell-group>
+```
+
+#### Auto resize
+Textarea Filed can be auto resize when has `autosize` prop
+
+```html
+<van-cell-group>
+  <van-field
+    v-model="message"
+    label="Message"
+    type="textarea"
+    placeholder="Message"
+    rows="1"
+    autosize
+  >
+  </van-field>
+</van-cell-group>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Filed type | `String` | `text` | `number` `email` <br> `textarea` `tel` <br> `datetime` `date` <br> `password` `url` |
+| value | Filed value | `String` | - | - |
+| label | Filed label | `String` | - | - |
+| disabled | Disable field | `Boolean` | `false` | - |
+| error | Whether to show error info | `Boolean` | `false` | - |
+| autosize | Textarea auto resize | `Boolean` | `false` | - |
+| icon | Right side Icon name | `String` | - | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| focus | Triggered when filed get focused | - |
+| blur | Triggered when blur filed | - |
+| click-icon | Triggered when click the icon of filed | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| icon | Custom icon |
@@ -0,0 +1,64 @@
+## GoodsAction
+
+### Install
+``` javascript
+import {
+  GoodsAction,
+  GoodsActionBigBtn,
+  GoodsActionMiniBtn
+} from 'vant';
+
+Vue.component(GoodsAction.name, GoodsAction);
+Vue.component(GoodsActionBigBtn.name, GoodsActionBigBtn);
+Vue.component(GoodsActionMiniBtn.name, GoodsActionMiniBtn);
+```
+
+### Usage
+
+
+```html
+<van-goods-action>
+  <van-goods-action-mini-btn icon="chat" @click="onClickMiniBtn">
+    客服
+  </van-goods-action-mini-btn>
+  <van-goods-action-mini-btn icon="cart" @click="onClickMiniBtn">
+    购物车
+  </van-goods-action-mini-btn>
+  <van-goods-action-big-btn @click="onClickBigBtn">
+    加入购物车
+  </van-goods-action-big-btn>
+  <van-goods-action-big-btn @click="onClickBigBtn" primary>
+    立即购买
+  </van-goods-action-big-btn>
+</van-goods-action>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickMiniBtn() {
+      Toast('点击图标');
+    },
+    onClickBigBtn() {
+      Toast('点击按钮');
+    }
+  }
+}
+```
+
+### API
+
+#### GoodsActionMiniBtn
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | 图标 | `String` | - | Icon 组件支持的所有图标 |
+| iconClass | 图标额外类名 | `String` | `''` | - |
+| url | 跳转链接 | `String` | `javascript:;` | - |
+
+#### GoodsActionBigBtn
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| url | 跳转链接 | `String` | `javascript:;` | - |
+| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | - |
@@ -0,0 +1,23 @@
+## Icon
+
+### Install
+``` javascript
+import { Icon } from 'vant';
+
+Vue.component(Icon.name, Icon);
+```
+
+### Usage
+
+#### Basic Usage
+View all usable icons on the right.
+
+```html
+<van-icon name="success" />
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| name | Icon name | `String` | `''` | - |
@@ -0,0 +1,32 @@
+## ImagePreview
+
+### Install
+
+```js
+import { ImagePreview } from 'vant';
+```
+
+### Usage
+
+#### Basic Usage
+
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+]);
+```
+
+#### Custom Start Position
+```javascript
+ImagePreview([
+  'https://img.yzcdn.cn/1.jpg',
+  'https://img.yzcdn.cn/2.jpg'
+], 1);
+```
+
+### Arguments
+
+| Attribute | Description | Type |
+|-----------|-----------|-----------|
+| imageUrls | Image URL list | `Array` |
@@ -0,0 +1,66 @@
+## Layout
+
+Quickly and easily create layouts with `van-row` and `van-col`
+
+### Install
+``` javascript
+import { Row, Col } from 'vant';
+
+Vue.component(Row.name, Row);
+Vue.component(Col.name, Col);
+```
+
+### Usage
+
+#### Basic Usage
+
+Layout are based on 24-column. The attribute `span` in `Col` means the number of column the grid spans. Of course, You can use `offset` attribute to set number of spacing on the left side of the grid.
+
+
+```html
+<van-row>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+</van-row>
+
+<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="6">span: 6</van-col>
+</van-row>
+
+<van-row>
+  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
+</van-row>
+```
+
+
+#### Column Spacing
+
+Set grid spacing using `gutter` attribute. The default value is 0
+
+
+```html
+<van-row gutter="20">
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+  <van-col span="8">span: 8</van-col>
+</van-row>
+```
+
+
+### API
+
+#### Row
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| gutter | grid spacing（px） | `String | Number` | - | - |
+| prefix | className prefix | `String` | `van` | - |
+
+#### Column
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| span | number of column the grid spans | `String | Number` | - | - |
+| offset | number of spacing on the left side of the grid | `String | Number` | - | - |
+| prefix | className prefix | `String` | `van` | - |
@@ -0,0 +1,90 @@
+<script>
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg'
+      ],
+      backgroundImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/bac1903e863834ace25773f3554b6890.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/138c32d4384b5e4a78dc4e1ba58e6a80.jpg'
+      ],
+      componentImageList: [
+        'https://img.yzcdn.cn/public_files/2017/09/05/100a7845756a70af2df513bdd1307d0e.jpg',
+        'https://img.yzcdn.cn/public_files/2017/09/05/8a4f5be8289cb3a7434fc19a3de780a2.jpg'
+      ]
+    };
+  },
+
+  methods: {
+    handleComponentShow() {
+      console.log('component show');
+    }
+  }
+}
+</script>
+
+## Lazyload
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Lazyload } from 'vant';
+
+Vue.use(Lazyload, options);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<img v-for="img in imageList" v-lazy="img">
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      imageList: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    };
+  }
+}
+```
+
+#### Lazyload Background Image
+Use `v-lazy:background-image` to set background url, and declare the height of the container.
+
+```html
+<div v-for="img in imageList" v-lazy:background-image="img" />
+```
+
+#### Lazyload Component
+
+```html
+<lazy-component>
+  <img v-for="img in imageList" v-lazy="img">
+</lazy-component>
+```
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| loading | Src of the image while loading | `String` | - | - |
+| error | Src of the image upon load fail | `String` | - | - |
+| preload | Proportion of pre-loading height | `String` | - | - |
+| attempt | Attempts count | `Number` | `3` | - |
+| listenEvents | Events that you want vue listen for | `Array` | `scroll`... | - |
+| adapter | Dynamically modify the attribute of element | `Object` | - | - |
+| filter | The image's listener filter | `Object` | - | - |
+| lazyComponent | Lazyload component | `Boolean` | `false` | - |
+
+See more：[ vue-lazyload ](https://github.com/hilongjw/vue-lazyload)
@@ -0,0 +1,38 @@
+## Loading
+
+### Install
+``` javascript
+import { Loading } from 'vant';
+
+Vue.component(Loading.name, Loading);
+```
+
+### Usage
+
+#### Solid Circle
+
+```html
+<van-loading type="circle" color="black" />
+<van-loading type="circle" color="white" />
+```
+
+#### Gradient Circle
+
+```html
+<van-loading type="gradient-circle" color="black" />
+<van-loading type="gradient-circle" color="white" />
+```
+
+#### Spinner
+
+```html
+<van-loading type="spinner" color="black" />
+<van-loading type="spinner" color="white" />
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| color | Color | `String` | `black` | `black` `white` |
+| type | Type | `String` | `gradient-circle` | `spinner` `circle` |
@@ -0,0 +1,47 @@
+## NavBar
+
+### Install
+``` javascript
+import { NavBar } from 'vant';
+
+Vue.component(NavBar.name, NavBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-nav-bar
+  title="Title"
+  leftText="Back"
+  rightText="Button"
+  leftArrow
+/>
+```
+
+#### Advanced Usage
+
+```html
+<van-nav-bar title="Title" leftText="Back" leftArrow>
+  <van-icon name="search" slot="right" />
+</van-nav-bar>
+```
+
+
+### API
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | `''` | - |
+| leftText | Left Text | `String` | `''` | - |
+| rightText | Right Text | `String` | `''` | - |
+| leftArrow | Whether to show left arrow | `Boolean` | `false` | - |
+| fixed | Whether to fixed top | `Boolean` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| title | Custom title |
+| left | Custom left side content |
+| right | Custom right side content |
@@ -0,0 +1,58 @@
+## NoticeBar
+
+### Install
+``` javascript
+import { NoticeBar } from 'vant';
+
+Vue.component(NoticeBar.name, NoticeBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+```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"
+/>
+```
+
+#### Disable scroll
+
+```html
+<van-notice-bar :scrollable="false">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+```
+
+#### Mode
+
+```html
+<van-notice-bar mode="closeable">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+
+<van-notice-bar mode="link">
+  Only those who have the patience to do simple things perfectly ever acquire the skill to do difficult things easily.
+</van-notice-bar>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| mode | Mode | String | `''` | `closeable` `link` |
+| 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 | - | - |
+| color | Text color | String | `#f60` | - |
+| background | Background color | String | `#fff7cc` | - |
+
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click | Triggered when click notice bar | - |
@@ -0,0 +1,69 @@
+## NumberKeyboard
+
+### Install
+``` javascript
+import { NumberKeyboard } from 'vant';
+
+Vue.component(NumberKeyboard.name, NumberKeyboard);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-button @touchstart.native.stop="showKeyboard = true">
+  Show Keyboard
+</van-button>
+
+<van-button @touchstart.native.stop="showKeyboard = false">
+  Hide Keyboard
+</van-button>
+
+<van-number-keyboard
+  :show="showKeyboard"
+  @blur="showKeyboard = false"
+  @input="onInput"
+  @delete="onDelete"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(value) {
+      Toast(value);
+    },
+    onDelete() {
+      Toast('delete');
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| show | Whether to show keyboard | `Boolean` | - | - |
+| title | Keyboard title | `String` | - | - |
+| extraKey | Content of bottom left key | `String` | `''` | - |
+| zIndex | Keyboard z-index | `Number` | `100` | - |
+| transition | Whether to show transition animation | `Boolean` | `true` | - |
+| showDeleteKey | Whether to show delete button | `Boolean` | `true` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| input | Triggered when keydown | key: Content of the key |
+| delete | Triggered when press delete key | - |
+| blur | Triggered when blur keyboard | - |
+| show | Triggered when keyboard is fully displayed. | - |
+| hide | Triggered when keyboard is fully hidden. | - |
@@ -0,0 +1,47 @@
+## Panel
+
+### Install
+``` javascript
+import { Panel } from 'vant';
+
+Vue.component(Panel.name, Panel);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-panel title="Title" desc="Description" status="Status">
+  <div>Content</div>
+</van-panel>
+```
+
+#### Advanced Usage
+
+```html
+<van-panel title="Title" desc="Description" status="Status">
+  <div>Content</div>
+  <div slot="footer">
+    <van-button size="small">Button</van-button>
+    <van-button size="small" type="danger">Button</van-button>
+  </div>
+</van-panel>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Title | `String` | - | - |
+| desc | Description | `String` | - | - |
+| status | Status | `String` | - | - |
+
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
+| header | Custom header |
+| footer | Custom footer |
@@ -0,0 +1,86 @@
+<script>
+export default {
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    }
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+</script>
+
+## PasswordInput
+The PasswordInput component is usually used with [NumberKeyboard](#/en-US/component/number-keyboard) Component.
+
+### Install
+``` javascript
+import { PasswordInput, NumberKeyBoard } from 'vant';
+
+Vue.component(PasswordInput.name, PasswordInput);
+Vue.component(NumberKeyBoard.name, NumberKeyBoard);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<!-- PasswordInput -->
+<van-password-input
+  :value="value"
+  info="Some tips"
+  @focus="showKeyboard = true"
+/>
+
+<!-- NumberKeyboard -->
+<van-number-keyboard
+  :show="showKeyboard"
+  @input="onInput"
+  @delete="onDelete"
+  @blur="showKeyboard = false"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: '',
+      showKeyboard: true
+    };
+  },
+
+  methods: {
+    onInput(key) {
+      this.value = (this.value + key).slice(0, 6);
+    },
+    onDelete() {
+      this.value = this.value.slice(0, this.value.length - 1);
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| value | Password value | `String` | `''` | - |
+| length | Maxlength of password | `Number` | `6` | - |
+| info | Bottom info | `String` | - | - |
+| errorInfo | Bottom error info | `String` | - | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| focus | Triggered when input get focused | - |
@@ -0,0 +1,128 @@
+## Picker
+
+### Install
+``` javascript
+import { Picker } from 'vant';
+
+Vue.component(Picker.name, Picker);
+```
+
+### Usage
+
+#### Basic Usage
+
+
+```html
+<van-picker :columns="pickerColumns" @change="onChange" />
+```
+
+```javascript
+const states = {
+  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
+};
+
+export default {
+  data() {
+    return {
+      pickerColumns: [
+        {
+          values: Object.keys(states),
+          className: 'column1'
+        },
+        {
+          values: states.Group1,
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    onChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    }
+  }
+};
+```
+
+
+#### Picker with toolbar
+
+```html
+<van-picker
+  showToolbar
+  :title="title"
+  :columns="pickerColumns"
+  @change="onChange"
+  @cancel="onCancel"
+  @confirm="onConfirm"
+/>
+```
+
+```javascript
+const states = {
+  'Group1': ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
+  'Group2': ['Alabama', 'Kansas', 'Louisiana', 'Texas']
+};
+
+export default {
+  data() {
+    return {
+      title: 'Title',
+      pickerColumns: [
+        {
+          values: Object.keys(states),
+          className: 'column1'
+        },
+        {
+          values: states.Group1,
+          className: 'column2'
+        }
+      ]
+    };
+  },
+
+  methods: {
+    onChange(picker, values) {
+      picker.setColumnValues(1, citys[values[0]]);
+    },
+    onCancel() {
+      Toast('Cancel');
+    },
+    onConfirm() {
+      Toast('Confirm');
+    }
+  }
+};
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| visibileColumnCount | Count of columns to show | `Number` | `5` | - |
+| itemHeight | Item height | `Number` | `44` | - |
+| columns | Columns data | `Array` | - | - |
+| showToolbar | Whether to show toolbar | `Boolean` | `true` | - |
+| title | Toolbar title | `String` | - | - |
+
+### Data struct of columns
+
+| key | Description |
+|-----------|-----------|
+| values | Value of column |
+| defaultIndex | Default value index |
+| className | ClassName for this column |
+
+### Picker instance
+The first argument of change event's callback function is a picker instance with some methods
+
+| Method | Description |
+|-----------|-----------|
+| getColumnValue(index) | get current value of the column |
+| setColumnValue(index, value) | set current value of the column |
+| getColumnValues(index) | get all values of the column |
+| setColumnValues(index, values) | set all values of the column |
+| getValues() | get current values of all columns |
+| setValues(values) | set current values of all columns |
@@ -0,0 +1,48 @@
+## Popup
+
+### Install
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
+### Usage
+
+#### Basic Usage
+Popup is located in the middle of the screen by default
+
+```html
+<van-popup v-model="show">Content</van-popup>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      show: false
+    }
+  }
+};
+```
+
+#### Position
+Use `position` prop to set popup display position
+
+```html
+<van-popup v-model="show" position="top" :overlay="false">
+  Content
+</van-popup>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Whether to show popup | `Boolean` | `false` | - |
+| overlay | Whether to show overlay | `Boolean` | `true` | - |
+| lockOnScroll | Lock body scroll | `Boolean` | `false` | - |
+| position | Position | `String` | - | `top` `bottom` `right` `left` |
+| closeOnClickOverlay | Close popup when click overlay | `Boolean` | `true` | - |
+| transition | Transition | `String` | `popup-slide` | - |
+| preventScroll | Prevent background scroll | `Boolean` | `false` | - |
@@ -0,0 +1,49 @@
+## Progress
+
+### Install
+``` javascript
+import { Progress } from 'vant';
+
+Vue.component(Progress.name, Progress);
+```
+
+### Usage
+
+#### Basic Usage
+Use 'percentage' prop to set current progress
+
+```html
+<van-progress :percentage="0" />
+<van-progress :percentage="46" />
+<van-progress :percentage="100" />
+```
+
+
+#### Inactive
+
+```html
+<van-progress inactive :percentage="0" />
+<van-progress inactive :percentage="46" />
+<van-progress inactive :percentage="100" />
+```
+
+
+#### Custom Style
+Use `pivotText` to custom text，use `color` to custom bar color
+
+```html
+<van-progress pivotText="Red" color="#ed5050" :percentage="26" />
+<van-progress pivotText="Orange" color="#f60" :percentage="46" />
+<van-progress pivotText="Yellow" color="#f09000" :percentage="66" />
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| inactive | Whether to be gray | `Boolean` | `false` | - |
+| percentage | Percentage | `Number` | `false` | `0-100` |
+| showPivot | Whether to show text | `Boolean` | `true` | - |
+| pivotText | Text | `String` | percentage | - |
+| color | Color | `String` | `#38f` | hexvalue |
+| textColor | Text color | `String` | `#fff` | hexvalue |
@@ -0,0 +1,66 @@
+## PullRefresh
+
+### Install
+``` javascript
+import { PullRefresh } from 'vant';
+
+Vue.component(PullRefresh.name, PullRefresh);
+```
+
+### Usage
+
+```html
+<!-- use v-model to control loading status -->
+<van-pull-refresh
+  v-model="isLoading"
+  pulling-text="Pull to refresh..."
+  loosing-text="Loose to refresh..."
+  loading-text="Loading..."
+>
+  <p>Refresh Count: {{ count }}</p>
+</van-pull-refresh>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      count: 0,
+      isLoading: false
+    }
+  },
+
+  watch: {
+    isLoading() {
+      if (this.isLoading) {
+        setTimeout(() => {
+          Toast('Refresh Success');
+          this.isLoading = false;
+          this.count++;
+        }, 500);
+      }
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Loading status | `Boolean` | - | - |
+| pullingText | Text to show when pulling | `String` | `下拉即可刷新...` | - |
+| loosingText | Text to show when loosing | `String` | `释放即可刷新...` | - |
+| loadingText | Text to show when loading | `String` | `加载中...` | - |
+| animationDuration | Animation duration | `Number` | `300` | - |
+| headHeight | Height of head | `Number` | `50` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
+| normal | Content of head when at normal status |
+| pulling | Content of head when at pulling |
+| loosing | Content of head when at loosing |
+| loading | Content of head when at loading |
@@ -0,0 +1,60 @@
+## Vant
+
+Mobile UI Component based on `Vue 2.0`
+
+### Install
+
+```shell
+npm i vant -S
+```
+
+### Usage
+
+#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
+```bash
+# Install babel-plugin-import
+npm i babel-plugin-import -D
+```
+
+```js
+// set babel config in .babelrc or babel-loader
+{
+  "plugins": [
+    ["import", { "libraryName": "vant", "style": true }]
+  ]
+}
+```
+
+Then you can import components from vant, equivalent to import manually below.
+
+```js
+import { Button } from 'vant';
+```
+
+#### 2. Manually import
+
+```js
+import { Button } from 'vant/lib/button';
+import 'vant/lib/vant-css/base.css';
+import 'vant/lib/vant-css/button.css';
+```
+ 
+#### 3. Import all components
+
+```js
+import Vue from 'vue';
+import Vant from 'vant';
+import 'vant/lib/vant-css/index.css';
+
+Vue.use(Vant);
+```
+
+### CDN
+
+```html
+<!-- import style -->
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
+
+<!-- import script --><script></script>
+<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
+```
@@ -0,0 +1,76 @@
+## Radio
+
+### Install
+``` javascript
+import { Radio } from 'vant';
+
+Vue.component(Radio.name, Radio);
+```
+
+### Usage
+
+#### Basic Usage
+Use `v-model` to bind check status of radio. The value will be set to the name of radio when radio get checked.
+
+```html
+<van-radio name="1" v-model="radio">Radio 1</van-radio>
+<van-radio name="2" v-model="radio">Radio 2</van-radio>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      radio: '1'
+    }
+  }
+};
+```
+
+#### Disabled
+
+```html
+<van-radio name="1" v-model="radio" disabled>Disabled</van-radio>
+<van-radio name="2" v-model="radio" disabled>Disabled and checked</van-radio>
+```
+
+
+#### Radio Group
+When Radios are inside a RadioGroup, the checked radio's name is bound with CheckboxGroup by `v-model`.
+
+```html
+<van-radio-group v-model="radio">
+  <van-radio name="1">Radio 1</van-radio>
+  <van-radio name="2">Radio 2</van-radio>
+</van-radio-group>
+```
+
+#### Inside a Cell
+
+```html
+<van-radio-group v-model="radio">
+  <van-cell-group>
+    <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
+    <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
+  </van-cell-group>
+</van-radio-group>
+```
+
+### Radio API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Diable radio | `Boolean` | `false` | - |
+| name | Radio name | `Boolean` | `false` | - |
+
+### RadioGroup API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| disabled | Diable all radios | `Boolean` | `false` | - |
+
+### RadioGroup Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when value changed | current value |
@@ -0,0 +1,76 @@
+## Search
+
+### Install
+``` javascript
+import { Search } from 'vant';
+
+Vue.component(Search.name, Search);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-search placeholder="Placeholder" v-model="value" />
+```
+
+```javascript
+export default {
+  data() {
+    value: ''
+  }
+}
+```
+
+#### Listen to Events
+`search` event will be triggered when click the search button on the keyboard.
+
+`cancel` event will be triggered when click the cancel button.
+
+Tips: There will be a search button on the keyboard when Search is inside a form in iOS.
+
+```html
+<form action="/">
+  <van-search
+    v-model="value"
+    placeholder="Placeholder"
+    :showAction="true"
+    @search="onSearch"
+    @cancel="onCancel">
+  </van-search>
+</form>
+```
+
+#### Custom Button
+Use `action` slot to custom right button, `cancel` event will no longer be triggered when use this slot
+
+```html
+<van-search
+  v-model="value"
+  :showAction="true"
+  @search="onSearch">
+  <div slot="action" @click="onSearch">Search</div>
+</van-search>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| placeholder | Input placeholder | `String` | - | - |
+| background | Background color | `String` | `#f2f2f2` | - |
+| showAction | Whether to show right button | `Boolean` | false | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| cancel | Triggered when click cancel button | - |
+| search | Triggered when confirm search | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| action | Custom right button, displayed when `showAction` is true |
@@ -0,0 +1,175 @@
+## Sku
+
+### Install
+```javascript
+import { Sku } from 'vant';
+
+Vue.component(Sku.name, Sku);
+```
+
+### Usage
+#### Basic Usage
+
+```html
+<van-sku
+  v-model="showBase"
+  :sku="sku"
+  :goods="goods"
+  :goodsId="goodsId"
+  :hideStock="sku.hide_stock"
+  :quota="quota"
+  :quotaUsed="quotaUsed"
+  :resetStepperOnHide="resetStepperOnHide"
+  :disableStepperInput="disableStepperInput"
+  @buy-clicked="handleBuyClicked"
+  @add-cart="handleAddCartClicked"
+/>
+```
+
+#### 自定义 sku slot 区块
+
+```html
+<van-sku
+  v-model="showCustomAction"
+  stepperTitle="我要买"
+  :sku="sku"
+  :goods="goods"
+  :goodsId="goodsId"
+  :hideStock="sku.hide_stock"
+  :showAddCartBtn="true"
+  :quota="quota"
+  :quotaUsed="quotaUsed"
+  :resetStepperOnHide="true"
+  :initialSku="initialSku"
+  @buy-clicked="handleBuyClicked"
+  @add-cart="handleAddCartClicked"
+>
+  <!-- 隐藏sku messages -->
+  <template slot="sku-messages"></template>
+  <!-- 自定义sku actions -->
+  <template slot="sku-actions" slot-scope="props">
+    <div class="van-sku-actions">
+      <button class="van-sku__add-cart-btn" @click="handlePointClicked">
+        积分兑换
+      </button>
+      <!-- 直接触发sku内部事件，通过内部事件执行handleBuyClicked回调 -->
+      <button class="van-sku__buy-btn" @click="props.skuEventBus.$emit('sku:buy')">
+        买买买
+      </button>
+    </div>
+  </template>
+</van-sku>
+```
+
+### API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 是否显示sku | Boolean | false |    是 |
+| sku | 商品sku数据 | Object | - |    是 |
+| goods | 商品信息 | Object | - |  是 |
+| goodsId | 商品id | String/Number | - |  是 |
+| hideStock | 是否显示商品剩余库存 | Boolean | false | 否 |
+| showAddCartBtn | 是否显示加入购物车按钮 | Boolean | true |  否 |
+| quota | 限购数(0表示不限购) | Number | 0 |  否 |
+| quotaUsed | 已经购买过的数量 | Number | 0 |  否 |
+| resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean | false |  否 |
+| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
+| stepperTitle | 数量选择组件左侧文案 | String | '购买数量' |  否 |
+| add-cart | 点击添加购物车回调 | Function(skuData: Object) | - |  否 |
+| buy-clicked | 点击购买回调 | Function(skuData: Object) | - |  否 |
+
+### slots
+sku组件默认划分好了若干区块，这些区块都定义成了slot，可以按需进行替换。区块顺序见下表：
+
+| Name | Description | 
+|-----------|-----------|
+| sku-header | 商品信息展示区，包含商品图片、名称、价格等信息 |
+| sku-group | 商品sku展示区 |
+| extra-sku-group | 额外商品sku展示区，一般用不到 |
+| sku-stepper | 商品数量选择区 |
+| sku-messages | 商品留言区 |
+| sku-actions | 操作按钮区 |
+
+#### Data Structure
+#### sku对象结构
+```javascript
+"sku": {
+    // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
+    // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
+    "tree": [{ 
+        "k": "颜色", // skuKeyName：规格类目名称 
+        "v": [{
+            "id": "30349", // skuValueId：规格值id 
+            "name": "红色", // skuValueName：规格值名称 
+            "imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/02\/21\/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg" // 规格类目图片，只有第一个规格类目可以定义图片
+        }, {
+            "id": "1215",
+            "name": "蓝色",
+            "imgUrl": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg"
+        }],
+        "k_s": "s1" // skuKeyStr：sku组合列表（下方list）中当前类目对应的key值，value值会是从属于当前类目的一个规格值id 
+    }, ...],
+    // 所有sku的组合列表，比如红色、M码为一个sku组合，红色、S码为另一个组合
+    "list": [{
+        "id": 2259, // skuId，下单时后端需要
+        "price": 100, // 价格（单位分）
+        "s1": "1215", // 规格类目k_s为s1的对应规格值id
+        "s2": "1193",  // 规格类目k_s为s2的对应规格值id
+        "s3": "0", // 最多包含3个规格值，为0表示不存在该规格
+        "stock_num": 110 // 当前sku组合对应的库存
+    }, ...],
+    "price": "1.00", // 默认价格（单位元）后端单位暂时有点不统一
+    "stock_num": 227, // 商品总库存
+    "collection_id": 2261, // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
+    "none_sku": false, // 是否无规格商品
+    "messages": [{ // 商品留言
+        "datetime": "0", // 留言类型为time时，是否含日期。“1”表示包含
+        "multiple": "0", // 留言类型为text时，是否多行文本。“1”表示多行
+        "name": "留言", // 留言名称
+        "type": "text", // 留言类型，可选id_no（身份证）, text, tel, date, time, email
+        "required": "1" // 是否必填 “1”表示必填
+    }, ...],
+    "hide_stock": false // 是否隐藏剩余库存
+},
+```
+
+#### goods对象结构
+```javascript
+"goods": {
+    // 商品标题
+    "title": "测试商品", 
+    // 默认商品sku缩略图
+    "picture": "https:\/\/img.yzcdn.cn\/upload_files\/2017\/03\/16\/Fs_OMbSFPa183sBwvG_94llUYiLa.jpeg?imageView2\/2\/w\/100\/h\/100\/q\/75\/format\/webp"
+},
+```
+
+#### 添加购物车和点击购买回调函数接收的skuData对象结构
+```javascript
+skuData: {
+  // 商品id
+  goodsId:"946755",
+  // 留言信息
+  messages: {
+    message_0:"12",
+    message_1:"",
+    ... // 有几个留言就有几条
+  },
+  // 另一种格式的留言，key不同
+  cartMessages: {
+    '留言1': 'xxxx',
+    ... // key是message的name
+  },
+  // 选择的商品数量
+  selectedNum:1,
+  // 选择的sku组合
+  selectedSkuComb: {
+    id:2257,
+    price:100,
+    s1:"30349",
+    s2:"1193",
+    s3:"0",
+    stock_num:111
+  }
+}
+```
@@ -0,0 +1,64 @@
+## Stepper
+
+### Install
+``` javascript
+import { Stepper } from 'vant';
+
+Vue.component(Stepper.name, Stepper);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-stepper v-model="value" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 1
+    }
+  }
+}
+```
+
+#### Disabled
+
+```html
+<van-stepper v-model="value" disabled />
+```
+
+#### Advanced Usage
+
+```html
+<van-stepper
+  v-model="value"
+  min="5"
+  max="40"
+  step="2"
+  defaultValue="9"
+/>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| min | Min value | `String | Number` | `1` | - |
+| max | Max value | `String | Number` | - | - |
+| defaultValue | Default value | `String | Number` | `1` | - |
+| step | Value change step | `String | Number` | `1` | - |
+| disabled | Disable value change | `Boolean` | `false` | - | 
+| disableInput | Disable input | `Boolean` | `false` | - |
+
+### Event
+
+| Event | Description | Arguments |
+|-----------|-----------|-----------|
+| change | Triggered when value change | value: current value |
+| overlimit | Triggered when click disabled button | - |
+| plus | Triggered when click plus button | - |
+| minus | Triggered when click minus button | - |
@@ -0,0 +1,86 @@
+## Steps
+
+### Install
+``` javascript
+import { Step, Steps } from 'vant';
+
+Vue.component(Step.name, Step);
+Vue.component(Steps.name, Steps);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-steps :active="active">
+  <van-step>Step1</van-step>
+  <van-step>Step2</van-step>
+  <van-step>Step3</van-step>
+  <van-step>Step4</van-step>
+</van-steps>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0
+    };
+  }
+}
+```
+
+#### Description
+
+```html
+<van-steps
+  :active="active"
+  icon="logistics"
+  title="Title"
+  description="Description"
+>
+  <van-step>Step1</van-step>
+  <van-step>Step2</van-step>
+  <van-step>Step3</van-step>
+  <van-step>Step4</van-step>
+</van-steps>
+```
+
+#### Vertical Steps
+
+```html
+<van-steps direction="vertical" :active="0" activeColor="#f60">
+  <van-step>
+    <h3>【City】Status1</h3>
+    <p>2016-07-12 12:40</p>
+  </van-step>
+  <van-step>
+    <h3>【City】Status2</h3>
+    <p>2016-07-11 10:00</p>
+  </van-step>
+  <van-step>
+    <h3>【City】Status3</h3>
+    <p>2016-07-10 09:30</p>
+  </van-step>
+</van-steps>
+```
+
+### Steps API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| active | Active step | `Number` | 0 | - |
+| icon | Action step icon | `String` | - | - |
+| iconClass | Icon class | `String` | - | - |
+| title | Title | `String` | - | - |
+| description | Description | `String` | - | - |
+| direction | Direction | `String` | `horizontal` | `vertical` |
+| activeColor | Active step color | `String` | `#06bf04` | - |
+
+### Steps Slot
+
+| Name | Description |
+|-----------|-----------|
+| icon | Custom icon |
+| message-extra | Extra content |
@@ -0,0 +1,109 @@
+## SubmitBar
+
+<script>
+import { Toast } from 'packages';
+
+export default {
+  methods: {
+    onClickButton() {
+      Toast('点击按钮');
+    },
+    onClickEditAddress() {
+      Toast('修改地址');
+    }
+  }
+}
+</script>
+
+<style>
+.demo-submit-bar {
+  .van-submit-bar {
+    position: relative;
+  }
+  .van-edit-address {
+    color: #38F;
+  }
+}
+</style>
+
+### Install
+``` javascript
+import { SubmitBar } from 'vant';
+
+Vue.component(SubmitBar.name, SubmitBar);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-submit-bar
+  :price="3050"
+  buttonText="提交订单"
+  @submit="onClickButton"
+/>
+```
+
+#### Disabled
+禁用状态下不会触发`submit`事件
+
+```html
+<van-submit-bar
+  disabled
+  :price="3050"
+  buttonText="提交订单"
+  tip="您的收货地址不支持同城送, 我们已为您推荐快递"
+  @submit="onClickButton"
+/>
+```
+
+#### Loading
+加载状态下不会触发`submit`事件
+
+```html
+<van-submit-bar
+  loading
+  :price="3050"
+  buttonText="提交订单"
+  @submit="onClickButton"
+/>
+```
+
+#### Advanced Usage
+提示文案中的额外操作和说明
+
+```html
+<van-submit-bar
+  :price="3050"
+  buttonText="提交订单"
+  @submit="onClickButton"
+>
+  <span slot="tip">
+    您的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址 ></span>
+  </span>
+</van-submit-bar>
+```
+
+### API
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| price | 价格（单位分） |  `Number` | - | 是 |
+| buttonText | 按钮文字 | `String` | - | 是 |
+| buttonType | 按钮类型 |  `String` | `danger` | 否 |
+| tip | 提示文案 |  `String` | - | 否 |
+| disabled | 是否禁用按钮 |  `Boolean` | `false` | 否 |
+| loading | 是否显示加载中的按钮 |  `Boolean` | `false` | 否 |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| submit | 按钮点击事件回调 | - |
+
+### Slot
+
+| Name | Description |
+|-----------|-----------|
+| tip | 提示文案中的额外操作和说明 |
@@ -0,0 +1,62 @@
+## Swipe
+
+### Install
+``` javascript
+import { Swipe, SwipeItem } from 'vant';
+
+Vue.component(Swipe.name, Swipe);
+Vue.component(SwipeItem.name, SwipeItem);
+```
+
+### Usage
+
+#### Basic Usage
+Use `autoplay` prop to set autoplay interval
+
+```html
+<van-swipe :autoplay="3000">
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+</van-swipe>
+```
+
+#### Image Lazyload
+Use [Lazyload](#/zh-CN/component/lazyload) component to lazyload image
+
+```html
+<van-swipe>
+  <van-swipe-item v-for="(image, index) in images" :key="index">
+    <img v-lazy="image" />
+  </van-swipe-item>
+</van-swipe>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      images: [
+        'https://img.yzcdn.cn/1.jpg',
+        'https://img.yzcdn.cn/2.jpg'
+      ]
+    }
+  }
+}
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| autoplay | Autoplay interval (ms) | `Number` | - | - |
+| duration | Animation duration (ms) | `Number` | `500` | - |
+| showIndicators | Whether to show indocators | `Boolean` | `true` | - |
+| initialSwipe | Index of initial swipe, start from 0 | `Number` | `0` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | Triggered when current swipe change | index: index of current swipe |
@@ -0,0 +1,64 @@
+## SwitchCell
+`SwitchCell` component is an encapsulation of `Switch` and `Cell`.
+
+### Install
+``` javascript
+import { SwitchCell } from 'vant';
+
+Vue.component(SwitchCell.name, SwitchCell);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" title="Title" />
+</van-cell-group>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checked: true
+    }
+  }
+}
+```
+
+
+#### Disabled
+use `disabled` property to disable the component
+
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" disabled title="Title" />
+</van-cell-group>
+```
+
+
+#### Loading
+use `loading` property to keep component in loading state
+
+```html
+<van-cell-group>
+  <van-switch-cell v-model="checked" loading title="Title" />
+</van-cell-group>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | on-off state of the switch | `Boolean` | - | - |
+| title | the leftside title |  `String` | `''` | - |
+| loading | whether the component is in loading state |  `Boolean` | `false` | - |
+| disabled | whether to disable the component |  `Boolean` | `false` | - |
+
+### Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | triggered when the on-off state is changed | checked: switch is on or not |
@@ -0,0 +1,80 @@
+## Switch
+
+### Install
+``` javascript
+import { Switch } from 'vant';
+
+Vue.component(Switch.name, Switch);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-switch v-model="checked" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      checked: true
+    };
+  }
+};  
+```
+
+#### Disabled
+
+```html
+<van-switch v-model="checked" disabled />
+```
+
+#### Loading
+
+
+```html
+<van-switch v-model="checked" loading />
+```
+
+#### Advanced usage
+
+```html
+<van-switch :value="checked" @input="onInput" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      checked: true
+    };
+  },
+
+  methods: {
+    onInput(checked) {
+      Dialog.confirm({
+        title: 'Confirm',
+        message: 'Are you sure to toggle switch?'
+      }).then(() => {
+        this.checked = checked;
+      });
+    }
+  }
+};  
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Check status of Switch | `Boolean` | `false` | - |
+| loading | Whether to show loading icon | `Boolean` | `false` | - |
+| disabled | Disable switch | `Boolean` | `false` | - |
+
+### Event
+
+| Event | Description | Parameters |
+|-----------|-----------|-----------|
+| change | Triggered when check status changed | checked: is switch checked |
@@ -0,0 +1,125 @@
+## Tabs
+
+### Install
+``` javascript
+import { Tab, Tabs } from 'vant';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
+### Usage
+
+#### Basic Usage
+
+By default, the first tab is actived. You can set `active` attribute on `van-tabs` to active specified tab.
+
+```html
+<van-tabs :active="active">
+  <van-tab v-for="index in 4" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```js
+export default {
+  data() {
+    return {
+      active: 2
+    };
+  }
+}
+```
+
+#### Swipe Tabs
+
+By default more than 4 tabs, you can scroll through the tabs. You can set `swipeThreshold` attribute to customize threshold number.
+
+```html
+<van-tabs>
+  <van-tab v-for="index in 8" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### Disabled Tab
+
+You can set `disabled` attribute on the corresponding `van-tab`. 
+
+```html
+<van-tabs @disabled="onClickDisabled">
+  <van-tab v-for="index in 4" :title="'tab' + index" :disabled="index === 2">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    onClickDisabled() {
+      Toast('Disabled!');
+    }
+  }
+};
+```
+
+#### Card Style
+
+Tabs styled as cards.
+
+```html
+<van-tabs type="card">
+  <van-tab v-for="index in 4" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+#### Click Event
+
+You can bind `click` event on `van-tabs`, the event handler function has one parameters: index of click tab.
+
+```html
+<van-tabs @click="handleTabClick">
+  <van-tab v-for="index in 4" :title="'tab' + index">
+    content of tab {{ index }}
+  </van-tab>
+</van-tabs>
+```
+
+```javascript
+export default {
+  methods: {
+    handleTabClick(index) {
+      Toast(index);
+    }
+  }
+};
+```
+
+### Tabs API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| 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.3` | - | - |
+| swipeThreshold | Set swipe tabs threshold | `Number` | `4` | - | - |
+
+### Tab API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| title | Tab title | `String` | - | - |
+| disabled | Whether disabled current tab | `Boolean` | `false` | - |
+
+### Tabs Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| click | Triggered when click tab | index：index of current tab |
+| disabled | Triggered when click disabled tab | index：index of current tab |
+
@@ -0,0 +1,83 @@
+## Tabbar
+
+### Install
+``` javascript
+import { Tabbar, TabbarItem } from 'vant';
+
+Vue.component(Tabbar.name, Tabbar);
+Vue.component(TabbarItem.name, TabbarItem);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="shop">Tab</van-tabbar-item>
+  <van-tabbar-item icon="chat" dot>Tab</van-tabbar-item>
+  <van-tabbar-item icon="records" info="5">Tab</van-tabbar-item>
+  <van-tabbar-item icon="gold-coin" info="20">Tab</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0
+    }
+  }
+}
+```
+
+#### Custom icon
+Use `icon` slot to custom icon
+
+```html
+<van-tabbar v-model="active">
+  <van-tabbar-item icon="shop">
+    <span>Custom</span>
+    <img slot="icon" :src="active === 0 ? icon.active : icon.normal" />
+  </van-tabbar-item>
+  <van-tabbar-item icon="chat">Tab</van-tabbar-item>
+  <van-tabbar-item icon="records">Tab</van-tabbar-item>
+</van-tabbar>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      active: 0,
+      icon: {
+        normal: '//img.yzcdn.cn/1.png',
+        active: '//img.yzcdn.cn/2.png'
+      }
+    }
+  }
+}
+```
+
+### Tabbar API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | Index of current tab | `Number` | - | - |
+
+### Tabbar Event
+
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| change | Triggered when change active tab | active: index of current tab |
+
+### TabbarItem API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| icon | Icon name | `String` | - | Names from Icon Component |
+| dot | Whether to show red dot | `Boolean` | - | - |
+| info | Info message | `String` | - | - |
+| 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` | - |
@@ -0,0 +1,51 @@
+## Tag
+
+### Install
+``` javascript
+import { Tag } from 'vant';
+
+Vue.component(Tag.name, Tag);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-tag>Tag</van-tag>
+<van-tag type="danger">Tag</van-tag>
+<van-tag type="success">Tag</van-tag>
+<van-tag type="primary">Tag</van-tag>
+```
+
+#### Plain style
+
+```html
+<van-tag plain>Tag</van-tag>
+<van-tag plain type="danger">Tag</van-tag>
+<van-tag plain type="primary">Tag</van-tag>
+<van-tag plain type="success">Tag</van-tag>
+```
+
+#### Mark style
+
+```html
+<van-tag mark>Tag</van-tag>
+<van-tag mark type="danger">Tag</van-tag>
+<van-tag mark type="primary">Tag</van-tag>
+<van-tag mark type="success">Tag</van-tag>
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type | `String` | `''`| `primary` `success` `danger` |
+| plain | Whether to be plain style | `Boolean` | `false` | - |
+| mark | Wtether to be mark style | `Boolean` | `false` | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Default slot |
@@ -0,0 +1,55 @@
+## Custom Theme (In translation)
+
+`Vant`提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面的方法：
+
+### 方案一. PostCSS 插件
+在项目中直接引入组件对应的 postcss 源代码，并通过 postcss 插件 [postcss-theme-variables](https://www.npmjs.com/package/postcss-theme-variables) 替换颜色变量，步骤如下：
+
+```javascript
+// 引入基础样式
+import 'vant/packages/vant-css/src/base.css';
+
+// 引入组价对应的样式
+import 'vant/packages/vant-css/src/button.css';
+import 'vant/packages/vant-css/src/checkbox.css';
+```
+
+接着在 postcss.config.js 中引入所需的 postcss 插件，并根据项目需求配置颜色变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/var.css)
+
+```javascript
+module.exports = {
+  plugins: [
+    require('postcss-easy-import')({
+      extensions: ['pcss', 'css']
+    }),
+    require('postcss-theme-variables')({
+      vars: {
+        red: '#F60',
+        gray: '#CCC',
+        blue: '#03A9F4'
+      },
+      prefix: '$'
+    }),
+    require('precss')(),
+    require('postcss-calc')(),
+    require('autoprefixer')({
+      browsers: ['Android >= 4.0', 'iOS >= 7']
+    })
+  ]
+};
+```
+
+### 方案二. 本地构建
+可以通过在本地构建 vant-css 的方式生成所需的主题
+
+```bash
+# 克隆仓库
+git clone git@github.com:youzan/vant.git
+cd packages/vant-css
+```
+
+在本地 vant-css 仓库中，修改 src/common/var.css 中的颜色变量，然后执行以下构建命令，即可生成对应的样式文件
+```bash
+npm run build
+```
+
@@ -0,0 +1,73 @@
+## Toast
+
+### Install
+
+```javascript
+import { Toast } from 'vant';
+```
+
+### Usage
+
+#### Text
+
+```javascript
+Toast('Some messages');
+```
+
+
+#### Loading
+
+```javascript
+Toast.loading({ mask: true });
+```
+
+
+#### Success/Fail
+
+```javascript
+Toast.success('Success');
+Toast.fail('Fail');
+```
+
+
+#### Advanced Usage
+
+```javascript
+const toast = Toast.loading({
+  duration: 0,       // continuous display toast
+  forbidClick: true, // forbid click background
+  message: '3 seconds'
+});
+
+let second = 3;
+const timer = setInterval(() => {
+  second--;
+  if (second) {
+    toast.message = `${second} seconds`;
+  } else {
+    clearInterval(timer);
+    Toast.clear();
+  }
+}, 1000);
+```
+
+### Methods
+
+| Methods | Attribute | Return value | Description |
+|-----------|-----------|-----------|-------------|
+| Toast | `options | message` | toast instance | Show toast |
+| Toast.loading | `options | message` | toast instance | Show loading toast |
+| Toast.success | `options | message` | toast instance | Show success toast |
+| Toast.fail | `options | message` | toast instance | Show fail toast |
+| Toast.clear | - | `void` | Close  |
+
+### Options
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| type | Type | `String` | `text` | `loading` `success` `fail` `html` |
+| message | Message | `String` | `''` | - |
+| position | Position | `String` | `middle` | `top` `bottom` |
+| mask | Whether to show mask | `Boolean` | `false` | - |
+| forbidClick | Whether to forbid click background | `Boolean` | `false` | - |
+| duration | Toast duration(ms) | `Number` | `3000` | Toast won't disappear if value is 0 |
@@ -0,0 +1,89 @@
+## TreeSelect
+
+### Install
+``` javascript
+import { TreeSelect } from 'vant';
+
+Vue.component(TreeSelect.name, TreeSelect);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<van-tree-select
+  :items="items"
+  :main-active-index="mainActiveIndex"
+  :active-id="activeId"
+  @navclick="onNavClick"
+  @itemclick="onItemClick"
+/>
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      items: items,
+      // the index of parent item
+      mainActiveIndex: 0,
+      // the id of selected item
+      activeId: 1001
+    };
+  },
+  methods: {
+    onNavClick(index) {
+      this.mainActiveIndex = index;
+    },
+    onItemClick(data) {
+      this.activeId = data.id;
+    }
+  }
+}
+```
+
+### API
+
+#### Properties
+
+| Attribute | Description | Type | Default | 必须 |
+|-----------|-----------|-----------|-------------|-------------|
+| items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` | - |
+| mainActiveIndex | The index of selected parent node | `Number` | `0` | - |
+| activeId | Id of selected item | `Number` | `0` | - |
+
+#### Event
+| Event | Description | Attribute |
+|-----------|-----------|-----------|
+| navclick | triggered when parent node is selected |  index: index of selected parent |
+| itemclick | triggered when item is selected | data: selected item |
+
+### Data Structure
+`items` should be an array contains specified tree objects.
+
+In every tree object, `text` property defines the name, `id` stands for the unique key while the `children` contains sub-tree objects.
+
+```javascript
+[
+  {
+    // name of the parent node
+    text: 'All Cities',
+    // leaves of this parent node
+    children: [
+      {
+        // name of the leaf node
+        text: 'Washington',
+        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
+        id: 1002
+      },
+      {
+        // name of the leaf node
+        text: 'Baltimore',
+        // id of the leaf node, component highlights leaf node by comparing the activeId with this.
+        id: 1001
+      }
+    ]
+  }
+]
+```
@@ -0,0 +1,45 @@
+## Uploader
+
+### Install
+``` javascript
+import { Uploader } from 'vant';
+
+Vue.component(Uploader.name, Uploader);
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<div class="uploader-container">
+  <van-uploader :afterRead="logContent">
+    <van-icon name="photograph"></van-icon>
+  </van-uploader>
+</div>
+```
+
+```javascript
+export default {
+  methods: {
+    logContent(file) {
+      console.log(file)
+    }
+  }
+};
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| resultType | 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` | - | - |
+| afterRead | Hook after reading the file, parameter format: { file ,content } | `Function` | - | - |
+
+### Slot
+
+| name | Description |
+|-----------|-----------|
+| - | Custom icon |
@@ -0,0 +1,75 @@
+## Waterfall
+
+### Install
+
+#### Global registration
+
+```js
+import Vue from 'vue';
+import { Waterfall } from 'vant';
+
+Vue.use(Waterfall);
+```
+
+#### Local registration
+If you just watch to use `Waterfall` in a component, you can register the directive in the component. 
+
+```js
+import { Waterfall } from 'vant';
+
+export default {
+  directives: {
+    WaterfallLower: Waterfall('lower'),
+    WaterfallUpper: Waterfall('upper')
+  }
+};
+```
+
+### Usage
+
+#### Basic Usage
+
+```html
+<ul
+  v-waterfall-lower="loadMore"
+  waterfall-disabled="disabled"
+  waterfall-offset="400">
+  <li v-for="item in list">{{ item }}</li>
+</ul>
+```
+
+```js
+export default {
+  data() {
+    return {
+      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+      disabled: false
+    };
+  },
+
+  directives: {
+    WaterfallLower: Waterfall('lower')
+  },
+
+  methods: {
+    loadMore() {
+      this.disabled = true;
+      setTimeout(() => {
+        for (let i = 0; i < 5; i ++) {
+          this.list.push(this.list.length);
+        }
+        this.disabled = false;
+      }, 200);
+    }
+  }
+};
+```
+
+### API
+
+| Attribute | Description | Type | Default | Accepted Values |
+|-----------|-----------|-----------|-------------|-------------|
+| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - | - |
+| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - | - |
+| waterfall-disabled | Key of the property to control disable status in instance | `String` | - | - |
+| waterfall-offset | Offset to trigger callback function | `Number` | `300` | - |