From d2ce5bf6063ba278011b5347185e740ef71c7082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 22 Sep 2017 15:07:03 +0800
Subject: [PATCH 01/18] add Address edit component

---
 docs/examples-docs/address-edit.md     |  96 +++++++++++
 docs/src/doc.config.js                 |   4 +
 packages/address-edit/Detail.vue       | 104 +++++++++++
 packages/address-edit/index.vue        | 229 +++++++++++++++++++++++++
 packages/index.js                      |   3 +
 packages/vant-css/src/address-edit.css |  60 +++++++
 packages/vant-css/src/index.css        |   1 +
 7 files changed, 497 insertions(+)
 create mode 100644 docs/examples-docs/address-edit.md
 create mode 100644 packages/address-edit/Detail.vue
 create mode 100644 packages/address-edit/index.vue
 create mode 100644 packages/vant-css/src/address-edit.css

diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md
new file mode 100644
index 000000000..a5786cd0d
--- /dev/null
+++ b/docs/examples-docs/address-edit.md
@@ -0,0 +1,96 @@
+<script>
+import { Toast } from 'packages';
+import areaList from '../mock/area.json';
+
+export default {
+  data() {
+    return {
+      areaList,
+      searchResult: []
+    }
+  },
+
+  methods: {
+    onSave() {
+      Toast('save');
+    },
+    onDelete() {
+      Toast('delete');
+    },
+    onChangeDetail(val) {
+      if (val) {
+        this.searchResult = [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          name: '黄龙万科中心H座',
+          address: '杭州市西湖区'
+        }];
+      } else {
+        this.searchResult = [];
+      }
+    }
+  }
+};
+</script>
+
+## AddressEdit 地址编辑
+
+### 使用指南
+``` javascript
+import { AddressEdit } from 'vant';
+
+Vue.component(AddressEdit.name, AddressEdit);
+```
+
+### 代码演示
+
+#### 基础用法
+
+:::demo 基础用法
+```html
+<van-address-edit
+  :area-list="areaList"
+  :show-postal="true"
+  :show-set-default="true"
+  :show-search-result="true"
+  :search-result="searchResult"
+  @save="onSave"
+  @delete="onDelete"
+  @change-detail="onChangeDetail"
+/>
+```
+
+```javascript
+export default {
+  
+}
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| v-model | 当前选中地址的 id | String | - | - |
+| list | 地址列表 | Array | `[]` | - |
+| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| add | 点击新增按钮时触发 | - |
+| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
+| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+
+### 数据格式
+#### 地址列表字段说明
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| id | 每条地址的唯一标识 | `String | Number` |
+| name | 收货人姓名 | `String` |
+| tel | 收货人手机号 | `String` |
+| address | 收货地址 | `String` |
diff --git a/docs/src/doc.config.js b/docs/src/doc.config.js
index 619899742..1302676f1 100644
--- a/docs/src/doc.config.js
+++ b/docs/src/doc.config.js
@@ -214,6 +214,10 @@ module.exports = {
           {
             "groupName": "业务组件",
             "list": [
+              {
+                "path": "/address-edit",
+                "title": "AddressEdit 地址编辑"
+              },
               {
                 "path": "/address-list",
                 "title": "AddressList 地址列表"
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
new file mode 100644
index 000000000..611409ee7
--- /dev/null
+++ b/packages/address-edit/Detail.vue
@@ -0,0 +1,104 @@
+<template>
+  <div ref="root">
+    <van-field
+      label="详细地址"
+      placeholder="如街道、楼层、门牌号等"
+      maxlength="200"
+      type="textarea"
+      autosize
+      rows="1"
+      :value="value"
+      :error="isError"
+      :onIconClick="onIconClick"
+      @input="$emit('input', $event)"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      >
+      <template v-if="value && isFocused" slot="icon">
+        <span v-if="isAndroid" class="van-address-edit-detail__finish-edit van-font--12">完成</span>
+        <van-icon v-else name="clear" />
+      </template>
+    </van-field>
+
+    <van-cell-group class="van-address-edit-detail__suggest-list" v-if="showSearchList">
+      <van-cell
+        v-for="express in searchResult"
+        :key="express.name + express.address"
+        class="van-address-edit-detail__suggest-item"
+        @click="onSuggestSelect(express)">
+        <van-icon name="location" class="van-address-edit-detail__location" />
+        <div class="van-address-edit-detail__item-info">
+          <p class="van-address-edit-detail__title">{{ express.name }}</p>
+          <p class="van-address-edit-detail__subtitle">{{ express.address }}</p>
+        </div>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+
+<script>
+import Icon from '../icon';
+import Field from '../field';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import UA from 'zan-utils/browser/ua_browser';
+
+export default {
+  name: 'van-address-edit-detail',
+
+  components: {
+    [Field.name]: Field,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  },
+
+  props: {
+    value: {},
+    isError: Boolean,
+    searchResult: Array,
+    showSearchResult: Boolean
+  },
+
+  data() {
+    return {
+      isAndroid: UA.isAndroid(),
+      isFocused: false
+    };
+  },
+
+  computed: {
+    showSearchList() {
+      return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
+    }
+  },
+
+  methods: {
+    handleFocus(e) {
+      this.isFocused = true;
+      this.$emit('focus', e);
+      this.$refs.root.scrollIntoView();
+    },
+
+    handleBlur(e) {
+      // 等待其他地方点击事件完了以后，再触发
+      setTimeout(() => {
+        this.isFocused = false;
+        this.$emit('blur', e);
+      }, 100);
+    },
+
+    onIconClick() {
+      // 安卓直接完成，不触发清除
+      if (this.isAndroid) {
+        return;
+      }
+      this.$emit('input', '');
+    },
+
+    onSuggestSelect(express) {
+      this.$emit('input', `${express.address || ''} ${express.name || ''}`.trim());
+    }
+  }
+};
+</script>
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
new file mode 100644
index 000000000..24c8c1bfd
--- /dev/null
+++ b/packages/address-edit/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <div class="van-address-edit">
+    <van-cell-group>
+      <van-field
+        maxlength="15"
+        placeholder="名字"
+        :label="addressText + '人'"
+        v-model="currentInfo.user_name"
+        :error="errorInfo.user_name"
+        @focus="onFocus('user_name')"
+      />
+      <van-field
+        type="tel"
+        label="联系电话"
+        placeholder="手机或固定电话"
+        v-model="currentInfo.tel"
+        :error="errorInfo.tel"
+        @focus="onFocus('tel')"
+      />
+      <van-cell class="van-address-edit__area" title="收件地区" @click="showAreaSelect = true">
+        <span>{{ currentInfo.province || '选择省' }}</span>
+        <span>{{ currentInfo.city || '选择市' }}</span>
+        <span>{{ currentInfo.county || '选择区' }}</span>
+      </van-cell>
+      <van-address-edit-detail
+        :value="currentInfo.address_detail"
+        :isError="errorInfo.address_detail"
+        :showSearchResult="showSearchResult"
+        :searchResult="searchResult"
+        @focus="onFocus('address_detail')"
+        @blur="onDetailBlur"
+        @input="onChangeDetail"
+      />
+      <van-field
+        v-if="showPostal"
+        v-show="!hideBottomFields"
+        type="tel"
+        label="邮政编码"
+        placeholder="邮政编码(选填)"
+        v-model="currentInfo.postal_code"
+        maxlength="6"
+        class="van-hairline--top"
+        :error="errorInfo.postal_code"
+        @focus="onFocus('postal_code')">
+      </van-field>
+      <van-switch-cell 
+        v-if="showSetDefault"
+        v-show="!hideBottomFields"
+        v-model="currentInfo.is_default"
+        :title="`设为默认${addressText}地址`"
+      />
+    </van-cell-group>
+    <div v-show="!hideBottomFields" class="van-address-edit__buttons">
+      <van-button block :loading="isSaving" @click="onSaveAddress" type="primary">保存</van-button>
+      <van-button block :loading="isDeleting" @click="onDeleteAddress" v-if="isEdit">删除{{ addressText }}地址</van-button>
+    </div>
+    <van-popup v-model="showAreaSelect" position="bottom">
+      <van-area
+        :value="currentInfo.area_code"
+        :areaList="areaList"
+        @confirm="onAreaConfirm"
+        @cancel="showAreaSelect = false"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import Field from '../field';
+import Cell from '../cell';
+import CellGroup from '../cell-group';
+import Button from '../button';
+import Popup from '../popup';
+import Toast from '../toast';
+import Dialog from '../dialog';
+import Area from '../area';
+import Detail from './Detail';
+import SwitchCell from '../switch-cell';
+import validateMobile from 'zan-utils/validate/mobile';
+
+export default {
+  name: 'van-address-edit',
+
+  components: {
+    [Field.name]: Field,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [SwitchCell.name]: SwitchCell,
+    [Button.name]: Button,
+    [Popup.name]: Popup,
+    [Area.name]: Area,
+    [Detail.name]: Detail
+  },
+
+  props: {
+    isSaving: Boolean,
+    isDeleting: Boolean,
+    areaList: Object,
+    showPostal: Boolean,
+    showSetDefault: Boolean,
+    showSearchResult: Boolean,
+    addressText: {
+      type: String,
+      default: '收货'
+    },
+    addressInfo: {
+      type: Object,
+      default: () => ({})
+    },
+    searchResult: {
+      type: Array,
+      default: () => []
+    }
+  },
+
+  data() {
+    return {
+      showAreaSelect: false,
+      currentInfo: this.addressInfo,
+      isEdit: !!this.addressInfo.id,
+      detailFocused: false,
+      errorInfo: {
+        user_name: false,
+        tel: false,
+        address_detail: false,
+        postal_code: false
+      }
+    };
+  },
+
+  watch: {
+    addressInfo(val) {
+      this.currentInfo = val;
+      this.isEdit = !!val.id;
+    }
+  },
+
+  computed: {
+    // 当地址输入框开启了搜索，并且开始搜索后，隐藏所有地址详情以外的输入框
+    hideBottomFields() {
+      return this.searchResult.length && this.detailFocused;
+    }
+  },
+
+  methods: {
+    onFocus(key) {
+      this.errorInfo[key] = false;
+      this.detailFocused = key === 'address_detail';
+    },
+
+    onDetailBlur() {
+      this.detailFocused = false;
+    },
+
+    onChangeDetail(val) {
+      this.currentInfo.address_detail = val;
+      this.$emit('change-detail', val);
+    },
+
+    onAreaConfirm(values) {
+      if (values.length !== 3 || +values[0].code === -1 || +values[1].code === -1 || +values[2].code === -1) {
+        return Toast('请选择正确的收件地区');
+      }
+      Object.assign(this.currentInfo, {
+        province: values[0].name,
+        city: values[1].name,
+        county: values[2].name,
+        'area_code': values[2].code
+      });
+      this.showAreaSelect = false;
+    },
+
+    onSaveAddress() {
+      const items = [
+        'user_name',
+        'tel',
+        'area_code',
+        'address_detail'
+      ];
+
+      if (this.showPostal) {
+        items.push('postal_code');
+      }
+
+      const isValid = items.every(item => {
+        const msg = this.getErrorMessageByKey(item);
+        if (msg) {
+          this.errorInfo[item] = true;
+          Toast(msg);
+        }
+        return !msg;
+      });
+
+      if (isValid) {
+        this.$emit('save', this.currentInfo, this.isEdit);
+      }
+    },
+
+    getErrorMessageByKey(key) {
+      const value = this.currentInfo[key];
+
+      switch (key) {
+        case 'user_name':
+          return value ? value.length <= 15 ? '' : '名字过长，请重新输入' : '请填写名字';
+        case 'tel':
+          return validateMobile(value) ? '' : '请填写正确的手机号码或电话号码';
+        case 'area_code':
+          return value ? +value !== -1 ? '' : '请选择正确的收件地区' : '请选择收件地区';
+        case 'address_detail':
+          return value ? value.length <= 200 ? '' : '详细地址不能超过200个字符' : '请填写详细地址';
+        case 'postal_code':
+          return value && !/^\d{6}$/.test(value) ? '邮政编码格式不正确' : '';
+      }
+    },
+
+    onDeleteAddress() {
+      if (this.isDeleting) {
+        return;
+      }
+
+      Dialog.confirm({
+        message: `确定要删除这个${this.addressText}地址么`
+      }).then(() => {
+        this.$emit('delete', this.currentInfo);
+      });
+    }
+  }
+};
+</script>
diff --git a/packages/index.js b/packages/index.js
index 8b96fd8b8..83a94d62a 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -1,4 +1,5 @@
 import Actionsheet from './actionsheet';
+import AddressEdit from './address-edit';
 import AddressList from './address-list';
 import Area from './area';
 import Badge from './badge';
@@ -56,6 +57,7 @@ import Waterfall from './waterfall';
 const version = '0.9.7';
 const components = [
   Actionsheet,
+  AddressEdit,
   AddressList,
   Area,
   Badge,
@@ -123,6 +125,7 @@ export {
   install,
   version,
   Actionsheet,
+  AddressEdit,
   AddressList,
   Area,
   Badge,
diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css
new file mode 100644
index 000000000..f7dce207c
--- /dev/null
+++ b/packages/vant-css/src/address-edit.css
@@ -0,0 +1,60 @@
+@import './common/var.css';
+
+.van-address-edit {
+  &__buttons {
+    padding: 20px 10px;
+  }
+
+  &__area {
+    .van-cell__title {
+      width: 90px;
+    }
+
+    .van-cell__value {
+      text-align: left;
+
+      span {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .van-button {
+    margin-bottom: 10px;
+  }
+
+  &-detail {
+    &__finish-edit {
+      color: $blue;
+    }
+
+    &__suggest-list {
+      margin-left: -15px;
+
+      &::after {
+        border-top-width: 0;
+      }
+    }
+
+    &__location {
+      float: left;
+      font-size: 18px;
+      color: #666;
+    }
+
+    &__item-info {
+      margin-left: 26px;
+      line-height: 1.6;
+    }
+
+    &__title {
+      font-size: 14px;
+      margin-bottom: 4px;
+    }
+
+    &__subtitle {
+      font-size: 12px;
+      color: #666;
+    }
+  }
+}
diff --git a/packages/vant-css/src/index.css b/packages/vant-css/src/index.css
index 7a008ee7f..cee46fcaa 100644
--- a/packages/vant-css/src/index.css
+++ b/packages/vant-css/src/index.css
@@ -50,6 +50,7 @@
 @import './tree-select.css';
 
 /* business components */
+@import './address-edit.css';
 @import './address-list.css';
 @import './coupon-list.css';
 @import './goods-action.css';

From be6331ad2150f6e413a3b976fda1d1e90ddba522 Mon Sep 17 00:00:00 2001
From: wny <colonD.wny@gmail.com>
Date: Tue, 26 Sep 2017 07:11:59 -0500
Subject: [PATCH 02/18] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8D=95=E7=8B=AC?=
 =?UTF-8?q?=E7=A6=81=E7=94=A8stepper=20input=E5=8A=9F=E8=83=BD=20(#146)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: sku message key

* fix: 改用goods_id当key

* fix: 漏改一处

* feat: 增加单独禁用stepper input功能

* fix: update doc

* fix: rename spec file
---
 docs/examples-docs/sku.md                     |  7 +++++--
 docs/examples-docs/stepper.md                 |  3 ++-
 packages/sku/components/SkuStepper.vue        | 13 +++++++++++-
 packages/sku/containers/SkuContainer.vue      |  2 ++
 packages/stepper/index.vue                    | 14 +++++++++----
 .../specs/{stepper.js => stepper.spec.js}     | 20 ++++++++++++++++++-
 .../{submit-bar.js => submit-bar.spec.js}     |  0
 7 files changed, 50 insertions(+), 9 deletions(-)
 rename test/unit/specs/{stepper.js => stepper.spec.js} (85%)
 rename test/unit/specs/{submit-bar.js => submit-bar.spec.js} (100%)

diff --git a/docs/examples-docs/sku.md b/docs/examples-docs/sku.md
index e01db13ab..2eee8971f 100644
--- a/docs/examples-docs/sku.md
+++ b/docs/examples-docs/sku.md
@@ -16,6 +16,8 @@ export default {
       goodsId: data.goods_id,
       quota: data.quota,
       quotaUsed: data.quota_used,
+      disableStepperInput: true,
+      resetStepperOnHide: true,
       initialSku: {
         s1: '30349',
         s2: '1193'
@@ -62,10 +64,10 @@ Vue.component(Sku.name, Sku);
       :goods="goods"
       :goods-id="goodsId"
       :hide-stock="sku.hide_stock"
-      :show-add-cart-btn="true"
       :quota="quota"
       :quota-used="quotaUsed"
-      :reset-stepper-on-hide="true"
+      :reset-stepper-on-hide="resetStepperOnHide"
+      :disable-stepper-input="disableStepperInput"
       @buy-clicked="handleBuyClicked"
       @add-cart="handleAddCartClicked"
     >
@@ -130,6 +132,7 @@ Vue.component(Sku.name, Sku);
 | 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)  | - |  否 |
diff --git a/docs/examples-docs/stepper.md b/docs/examples-docs/stepper.md
index ce48e7804..19cee1d97 100644
--- a/docs/examples-docs/stepper.md
+++ b/docs/examples-docs/stepper.md
@@ -69,7 +69,8 @@ Vue.component(Stepper.name, Stepper);
 | max | 最大值 | `String | Number` | - | - |
 | defaultValue | 默认值 | `String | Number` | `1` | - |
 | step | 步数 | `String | Number` | `1` | - |
-| disabled | 是否禁用 | `Boolean` | `false` | - |
+| disabled | 是否禁用 | `Boolean` | `false` | - | 
+| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
 
 ### Event
 
diff --git a/packages/sku/components/SkuStepper.vue b/packages/sku/components/SkuStepper.vue
index 892c235f9..c15be326f 100644
--- a/packages/sku/components/SkuStepper.vue
+++ b/packages/sku/components/SkuStepper.vue
@@ -2,7 +2,14 @@
   <div class="van-sku-stepper-stock">
     <div class="van-sku-stepper-container">
       <div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
-      <van-stepper v-model="currentNum" :min="1" :max="stepperLimit" class="van-sku__stepper" @overlimit="handleOverLimit"></van-stepper>
+      <van-stepper
+        class="van-sku__stepper"
+        v-model="currentNum"
+        :min="1"
+        :max="stepperLimit"
+        :disableInput="disableStepperInput"
+        @overlimit="handleOverLimit">
+      </van-stepper>
     </div>
     <div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
     <div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
@@ -34,6 +41,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disableStepperInput: {
+      type: Boolean,
+      default: false
+    },
     stepperTitle: {
       type: String,
       default: DEFAULT_BUY_TEXT
diff --git a/packages/sku/containers/SkuContainer.vue b/packages/sku/containers/SkuContainer.vue
index 2d36faa0a..b79a0c3f2 100644
--- a/packages/sku/containers/SkuContainer.vue
+++ b/packages/sku/containers/SkuContainer.vue
@@ -45,6 +45,7 @@
               :skuStockNum="sku.stock_num"
               :quota="quota"
               :quotaUsed="quotaUsed"
+              :disableStepperInput="disableStepperInput"
               :hideStock="hideStock">
             </van-sku-stepper>
           </slot>
@@ -133,6 +134,7 @@ export default {
       default: 200
     },
     resetStepperOnHide: Boolean,
+    disableStepperInput: Boolean,
     messagePlaceholderMap: {
       type: Object,
       default() {
diff --git a/packages/stepper/index.vue b/packages/stepper/index.vue
index adc61b2e4..cf8bb9a78 100644
--- a/packages/stepper/index.vue
+++ b/packages/stepper/index.vue
@@ -8,11 +8,11 @@
       }">
     </button>
     <input
-      type="text"
+      type="number"
       class="van-stepper__input"
       :value="currentValue"
       @input="handleInputChange"
-      :disabled="disabled">
+      :disabled="disabled || disableInput">
     <button
       @click="handleChange('plus')"
       class="van-stepper__stepper van-stepper__plus"
@@ -42,6 +42,7 @@ export default {
       default: 1
     },
     disabled: Boolean,
+    disableInput: Boolean,
     defaultValue: {
       type: [String, Number],
       default: 1
@@ -91,8 +92,13 @@ export default {
   methods: {
     // 纠正value值
     correctValue(value) {
-      value = Math.max(this.min, value);
-      value = Math.min(this.max, value);
+      if (Number.isNaN(value)) {
+        value = this.min;
+      } else {
+        value = Math.max(this.min, value);
+        value = Math.min(this.max, value);
+      }
+
       return value;
     },
     handleInputChange(event) {
diff --git a/test/unit/specs/stepper.js b/test/unit/specs/stepper.spec.js
similarity index 85%
rename from test/unit/specs/stepper.js
rename to test/unit/specs/stepper.spec.js
index 7362d6a4f..9da978e63 100644
--- a/test/unit/specs/stepper.js
+++ b/test/unit/specs/stepper.spec.js
@@ -60,6 +60,17 @@ describe('Stepper', () => {
     });
   });
 
+  it('only disable stepper input', () => {
+    wrapper = mount(Stepper, {
+      propsData: {
+        disableInput: true
+      }
+    });
+
+    const input = wrapper.find('.van-stepper__input')[0];
+    expect(input.hasAttribute('disabled', 'disabled')).to.be.true;
+  });
+
   it('update stepper value use v-model', (done) => {
     wrapper = mount(Stepper, {
       propsData: {
@@ -96,7 +107,14 @@ describe('Stepper', () => {
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.currentValue).to.equal(30);
       expect(eventStub.calledWith('input'));
-      done();
+
+      // value设置非数字时，则使用设置的最小值（默认1）
+      wrapper.vm.value = 'abc';
+      wrapper.update();
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).to.equal(1);
+        done();
+      });
     });
   });
 
diff --git a/test/unit/specs/submit-bar.js b/test/unit/specs/submit-bar.spec.js
similarity index 100%
rename from test/unit/specs/submit-bar.js
rename to test/unit/specs/submit-bar.spec.js

From 435511e23de1f2a29a51012de173fe8be792a6ae Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Tue, 26 Sep 2017 20:13:56 +0800
Subject: [PATCH 03/18] [build] 0.9.9

---
 packages/index.js              | 2 +-
 packages/vant-css/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/index.js b/packages/index.js
index ef19eb9a9..a6b552bbd 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -53,7 +53,7 @@ import TreeSelect from './tree-select';
 import Uploader from './uploader';
 import Waterfall from './waterfall';
 
-const version = '0.9.8';
+const version = '0.9.9';
 const components = [
   Actionsheet,
   AddressList,
diff --git a/packages/vant-css/package.json b/packages/vant-css/package.json
index 4fa198512..580a1abed 100644
--- a/packages/vant-css/package.json
+++ b/packages/vant-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant-css",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "vant css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

From 5da6d4a6851170ec2e9e6c97b4db64da3156504e Mon Sep 17 00:00:00 2001
From: pangxie1991 <chenyao1102@gmail.com>
Date: Tue, 26 Sep 2017 20:13:57 +0800
Subject: [PATCH 04/18] [release] 0.9.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ff5139429..75bb24762 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "有赞vue wap组件库",
   "main": "lib/vant.js",
   "style": "lib/vant-css/index.css",

From fa06465d87eab04a1bec8226e4c888e716f353d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Tue, 26 Sep 2017 20:37:27 +0800
Subject: [PATCH 05/18] AddressEdit: add test cases

---
 docs/examples-docs/address-edit.md     |  76 +++++-
 packages/address-edit/Detail.vue       |  16 +-
 packages/address-edit/index.vue        |  25 +-
 packages/field/index.vue               |   5 +-
 packages/vant-css/src/address-edit.css |   9 +-
 test/unit/specs/address-edit.spec.js   | 327 +++++++++++++++++++++++++
 6 files changed, 433 insertions(+), 25 deletions(-)
 create mode 100644 test/unit/specs/address-edit.spec.js

diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md
index a5786cd0d..cc332e06f 100644
--- a/docs/examples-docs/address-edit.md
+++ b/docs/examples-docs/address-edit.md
@@ -4,14 +4,23 @@ import areaList from '../mock/area.json';
 
 export default {
   data() {
+    setTimeout(() => {
+      this.test.user_name = 'b';
+    }, 1000);
     return {
       areaList,
-      searchResult: []
+      searchResult: [],
+      test: {
+        user_name: 'a'
+      }
     }
   },
 
   methods: {
     onSave() {
+      this.test = {
+        user_name: 'b'
+      };
       Toast('save');
     },
     onDelete() {
@@ -52,6 +61,7 @@ Vue.component(AddressEdit.name, AddressEdit);
 :::demo 基础用法
 ```html
 <van-address-edit
+  :address-info="test"
   :area-list="areaList"
   :show-postal="true"
   :show-set-default="true"
@@ -65,7 +75,31 @@ Vue.component(AddressEdit.name, AddressEdit);
 
 ```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 = [];
+      }
+    }
+  }
 }
 ```
 :::
@@ -74,23 +108,45 @@ export default {
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| v-model | 当前选中地址的 id | String | - | - |
-| list | 地址列表 | Array | `[]` | - |
-| addButtonText | 底部按钮文字 | String | `新增收货地址` | - |
+| areaList | 地区列表 | `Object` | - | - |
+| addressInfo | 收货人信息 | `Object` | `{}` | - |
+| searchResult | 详细地址搜索结果 | `Array` | `[]` | - |
+| addressText | "地址"文案前缀 | `String` | `收货` | - |
+| showPostal | 是否显示邮政编码 | `Boolean` | `false` | - |
+| showSetDefault | 是否显示默认地址栏 | `Boolean` | `false` | - |
+| showSearchResult | 是否显示搜索结果 | `Boolean` | `false` | - |
+| isSaving | 是否显示保存按钮加载动画 | `Boolean` | `false` | - |
+| isDeleting | 是否显示删除按钮加载动画 | `Boolean` | `false` | - |
 
 ### Event
 
 | 事件名       | 说明      | 参数       |
 |-----------|-----------|-----------|
-| add | 点击新增按钮时触发 | - |
-| edit | 点击编辑按钮时触发 | item: 当前地址对象，index: 索引 |
-| change | 切换选中的地址时触发 | item: 当前地址对象，index: 索引 |
+| save | 点击保存按钮时触发 | content：表单内容 |
+| delete | 点击删除按钮时触发 | content：表单内容 |
+| change-detail | 修改详细地址时触发 | value: 详细地址内容 |
 
 ### 数据格式
-#### 地址列表字段说明
+
+#### addressInfo 数据格式
 | key       | 说明      | 类型       |
 |-----------|-----------|-----------|
 | id | 每条地址的唯一标识 | `String | Number` |
 | name | 收货人姓名 | `String` |
 | tel | 收货人手机号 | `String` |
-| address | 收货地址 | `String` |
+| province | 省份 | `String` |
+| city | 城市 | `String` |
+| county | 区县 | `String` |
+| address_detail | 详细地址 | `String` |
+| area_code | 地区编码，通过省市区选择获取 | `String` |
+| postal_code | 邮政编码 | `String` |
+| is_default | 是否为默认地址 | `String` |
+
+#### searchResult 数据格式
+| key       | 说明      | 类型       |
+|-----------|-----------|-----------|
+| name | 地名 | `String` |
+| address | 详细地址 | `String` |
+
+#### 省市县列表数据格式
+请参考 [Area](/zanui/vue/component/area) 组件。
diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index 611409ee7..1371f05b5 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -14,9 +14,9 @@
       @focus="handleFocus"
       @blur="handleBlur"
       >
-      <template v-if="value && isFocused" slot="icon">
-        <span v-if="isAndroid" class="van-address-edit-detail__finish-edit van-font--12">完成</span>
-        <van-icon v-else name="clear" />
+      <template slot="icon">
+        <span v-if="showIcon && isAndroid" class="van-address-edit-detail__finish-edit">完成</span>
+        <van-icon v-else-if="showIcon" name="clear"  />
       </template>
     </van-field>
 
@@ -70,6 +70,10 @@ export default {
   computed: {
     showSearchList() {
       return this.showSearchResult && this.isFocused && this.searchResult.length > 0;
+    },
+
+    showIcon() {
+      return this.value && this.isFocused;
     }
   },
 
@@ -89,11 +93,11 @@ export default {
     },
 
     onIconClick() {
-      // 安卓直接完成，不触发清除
       if (this.isAndroid) {
-        return;
+        this.$refs.root.querySelector('.van-field__control').blur();
+      } else {
+        this.$emit('input', '');
       }
-      this.$emit('input', '');
     },
 
     onSuggestSelect(express) {
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 24c8c1bfd..489ef7dc2 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -105,7 +105,17 @@ export default {
     },
     addressInfo: {
       type: Object,
-      default: () => ({})
+      default: () => ({
+        user_name: '',
+        tel: '',
+        province: '',
+        city: '',
+        county: '',
+        area_code: '',
+        postal_code: '',
+        address_detail: '',
+        is_default: false
+      })
     },
     searchResult: {
       type: Array,
@@ -129,9 +139,12 @@ export default {
   },
 
   watch: {
-    addressInfo(val) {
-      this.currentInfo = val;
-      this.isEdit = !!val.id;
+    addressInfo: {
+      handler(val) {
+        this.currentInfo = val;
+        this.isEdit = !!val.id;
+      },
+      deep: true
     }
   },
 
@@ -191,8 +204,8 @@ export default {
         return !msg;
       });
 
-      if (isValid) {
-        this.$emit('save', this.currentInfo, this.isEdit);
+      if (isValid && !this.isSaving) {
+        this.$emit('save', this.currentInfo);
       }
     },
 
diff --git a/packages/field/index.vue b/packages/field/index.vue
index ba281a720..54603b7bc 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -15,11 +15,12 @@
     <textarea
       v-if="type === 'textarea'"
       v-bind="$attrs"
-      v-on="$listeners"
       ref="textarea"
       class="van-field__control"
       :value="value"
       @input="onInput"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <input
       v-else
@@ -29,6 +30,8 @@
       :type="type"
       :value="value"
       @input="onInput"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <div
       v-if="hasIcon"
diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css
index f7dce207c..d834a9834 100644
--- a/packages/vant-css/src/address-edit.css
+++ b/packages/vant-css/src/address-edit.css
@@ -23,9 +23,14 @@
     margin-bottom: 10px;
   }
 
+  .van-icon-clear {
+    color: $gray-dark;
+  }
+
   &-detail {
     &__finish-edit {
       color: $blue;
+      font-size: 12px;
     }
 
     &__suggest-list {
@@ -39,7 +44,7 @@
     &__location {
       float: left;
       font-size: 18px;
-      color: #666;
+      color: $gray-darker;
     }
 
     &__item-info {
@@ -54,7 +59,7 @@
 
     &__subtitle {
       font-size: 12px;
-      color: #666;
+      color: $gray-darker;
     }
   }
 }
diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js
new file mode 100644
index 000000000..7f8b58ae3
--- /dev/null
+++ b/test/unit/specs/address-edit.spec.js
@@ -0,0 +1,327 @@
+import { mount } from 'avoriaz';
+import AddressEdit from 'packages/address-edit';
+import AddressDetail from 'packages/address-edit/Detail';
+import areaList from '../../../docs/mock/area.json';
+
+describe('AddressEdit', () => {
+  let wrapper;
+  afterEach(() => {
+    wrapper && wrapper.destroy();
+  });
+
+  it('create a AddressEdit', () => {
+    wrapper = mount(AddressEdit);
+    expect(wrapper.hasClass('van-address-edit')).to.be.true;
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal('');
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal('');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal('选择省');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal('选择市');
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal('选择区');
+  });
+
+  it('create a AddressEdit with props', () => {
+    const addressInfo = {
+      user_name: '测试',
+      tel: '123123213',
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      address_detail: '详细地址',
+      postal_code: '10000',
+      is_default: true
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: addressInfo,
+        showPostal: true,
+        showSetDefault: true,
+        showSearchResult: true,
+        searchResult: []
+      }
+    });
+
+    expect(wrapper.find('.van-field__control')[0].element.value).to.equal(addressInfo.user_name);
+    expect(wrapper.find('.van-field__control')[1].element.value).to.equal(addressInfo.tel);
+    expect(wrapper.find('.van-field__control')[2].element.value).to.equal(addressInfo.address_detail);
+    expect(wrapper.find('.van-field__control')[3].element.value).to.equal(addressInfo.postal_code);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[0].text()).to.equal(addressInfo.province);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[1].text()).to.equal(addressInfo.city);
+    expect(wrapper.find('.van-address-edit__area .van-cell__value span')[2].text()).to.equal(addressInfo.county);
+    expect(wrapper.find('.van-switch-cell').length).to.equal(1);
+  });
+
+  it('save AddressInfo', () => {
+    const addressInfo = {
+      user_name: '',
+      tel: '123123213',
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      address_detail: '详细地址',
+      postal_code: '10000',
+      is_default: true
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: addressInfo,
+        showPostal: true,
+        showSetDefault: true,
+        showSearchResult: true,
+        searchResult: []
+      }
+    });
+
+    const saveButton = wrapper.find('.van-button')[0];
+
+    // name empty
+    wrapper.vm.addressInfo.user_name = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.false;
+
+    // name too long
+    wrapper.vm.addressInfo.user_name = '111111111111111111111111111';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.true;
+    wrapper.find('.van-field__control')[0].trigger('focus');
+    expect(wrapper.vm.errorInfo['user_name']).to.be.false;
+
+    // tel empty
+    wrapper.vm.addressInfo.user_name = '123';
+    wrapper.vm.addressInfo.tel = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['tel']).to.be.true;
+    wrapper.find('.van-field__control')[1].trigger('focus');
+    expect(wrapper.vm.errorInfo['tel']).to.be.false;
+
+    // area_code empty
+    wrapper.vm.addressInfo.tel = '13000000000';
+    wrapper.vm.addressInfo.area_code = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['area_code']).to.be.true;
+
+    // area_code invalid
+    wrapper.vm.addressInfo.tel = '13000000000';
+    wrapper.vm.addressInfo.area_code = '-1';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['area_code']).to.be.true;
+
+    // address_detail empty
+    wrapper.vm.addressInfo.area_code = '100000';
+    wrapper.vm.addressInfo.address_detail = '';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
+
+    // address_detail too long
+    let longAddress = '1';
+    for (let i = 0; i < 300; i++) {
+      longAddress += '1';
+    }
+    wrapper.vm.addressInfo.address_detail = longAddress;
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.true;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    expect(wrapper.vm.errorInfo['address_detail']).to.be.false;
+
+    // postal_code invalid
+    wrapper.vm.addressInfo.address_detail = '123';
+    wrapper.vm.addressInfo.postal_code = '123';
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.true;
+    wrapper.find('.van-field__control')[3].trigger('focus');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
+
+    // valid result
+    wrapper.vm.addressInfo.postal_code = '123456';
+    saveButton.trigger('click');
+
+    // not show postal_code
+    wrapper.vm.addressInfo.postal_code = '156';
+    wrapper.vm.showPostal = false;
+    saveButton.trigger('click');
+    expect(wrapper.vm.errorInfo['postal_code']).to.be.false;
+  });
+
+  it('show search result', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {},
+        showSearchResult: true,
+        searchResult: [{
+          name: '黄龙万科中心',
+          address: '杭州市西湖区'
+        }, {
+          name: '黄龙万科中心H座'
+        }, {
+          address: '杭州市西湖区'
+        }]
+      }
+    });
+
+    wrapper.find('.van-field__control')[2].trigger('focus');
+    wrapper.vm.$nextTick(() => {
+      const items = wrapper.find('.van-address-edit-detail__suggest-item');
+      expect(items.length).to.equal(3);
+
+      items[0].trigger('click');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区 黄龙万科中心');
+
+        items[1].trigger('click');
+        wrapper.vm.$nextTick(() => {
+          expect(wrapper.find('.van-field__control')[2].element.value).to.equal('黄龙万科中心H座');
+          items[2].trigger('click');
+
+          wrapper.vm.$nextTick(() => {
+            expect(wrapper.find('.van-field__control')[2].element.value).to.equal('杭州市西湖区');
+
+            wrapper.find('.van-field__control')[2].trigger('blur');
+            setTimeout(() => {
+              done();
+            }, 300);
+          });
+        });
+      });
+    });
+  });
+
+  it('select area', () => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        areaList,
+        addressInfo: {}
+      }
+    });
+
+    wrapper.vm.onAreaConfirm([]);
+    wrapper.vm.onAreaConfirm([{ code: -1 }]);
+    wrapper.vm.onAreaConfirm([{ code: 1 }, { code: -1 }]);
+    wrapper.vm.onAreaConfirm([{ code: 1 }, { code: 1 }, { code: -1 }]);
+    expect(wrapper.vm.addressInfo['area_code']).to.equal(undefined);
+
+    wrapper.vm.onAreaConfirm([{ name: '浙江省' }, { name: '杭州市' }, { name: '西湖区', code: '123456' }]);
+    expect(wrapper.vm.addressInfo['province']).to.equal('浙江省');
+    expect(wrapper.vm.addressInfo['city']).to.equal('杭州市');
+    expect(wrapper.vm.addressInfo['county']).to.equal('西湖区');
+    expect(wrapper.vm.addressInfo['area_code']).to.equal('123456');
+  });
+
+  it('delete address', done => {
+    wrapper = mount(AddressEdit, {
+      attachToDocument: true,
+      propsData: {
+        areaList,
+        isDeleting: true,
+        addressInfo: {
+          id: '123'
+        }
+      }
+    });
+
+    const deleteButton = wrapper.find('.van-button')[1];
+    deleteButton.trigger('click');
+    wrapper.vm.onDeleteAddress();
+
+    setTimeout(() => {
+      expect(document.querySelectorAll('.van-dialog').length).to.equal(0);
+      wrapper.vm.isDeleting = false;
+      wrapper.vm.$nextTick(() => {
+        deleteButton.trigger('click');
+        setTimeout(() => {
+          expect(document.querySelectorAll('.van-dialog').length).to.equal(1);
+
+          wrapper.vm.$on('delete', () => {
+            done();
+          });
+          document.querySelector('.van-dialog__confirm').click();
+          done();
+        }, 300);
+      });
+    }, 300);
+  });
+
+  it('on change detail', done => {
+    wrapper = mount(AddressEdit);
+
+    wrapper.vm.$on('change-detail', (val) => {
+      expect(val).to.equal('123');
+      done();
+    });
+
+    const field = wrapper.find('.van-field__control')[2];
+    field.element.value = '123';
+    field.trigger('input');
+  });
+
+  it('clear address detail in ios', done => {
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {
+          address_detail: '123'
+        }
+      }
+    });
+
+    wrapper.vm.isAndriod = false;
+    wrapper.find('.van-field__control')[2].trigger('focus');
+
+    wrapper.vm.$nextTick(() => {
+      wrapper.find('.van-field__icon')[0].trigger('touchstart');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.addressInfo.address_detail).to.equal('');
+        done();
+      });
+    });
+  });
+
+  it('finish edit address detail in andriod', done => {
+    wrapper = mount(AddressDetail, {
+      propsData: {
+        value: '123'
+      }
+    });
+
+    wrapper.vm.$on('input', val => {
+      wrapper.vm.value = val;
+    });
+
+    wrapper.setData({
+      isAndroid: true
+    });
+    wrapper.find('.van-field__control')[0].trigger('focus');
+
+    wrapper.vm.$nextTick(() => {
+      wrapper.find('.van-field__icon')[0].trigger('touchstart');
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.value).to.equal('123');
+        done();
+      });
+    });
+  });
+
+  it('watch address info', done => {
+    const addressInfo = {
+      user_name: '123'
+    };
+
+    wrapper = mount(AddressEdit, {
+      propsData: {
+        addressInfo: {}
+      }
+    });
+
+    wrapper.setProps({ addressInfo });
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.currentInfo.user_name).to.equal('123');
+      done();
+    });
+  });
+});

From 6dd0f18df26219425f850bb5aaa5bb215957cf36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 10:24:46 +0800
Subject: [PATCH 06/18] fix: AddressEdit test cases failed

---
 docs/examples-docs/address-edit.md   | 9 +--------
 test/unit/specs/address-edit.spec.js | 1 -
 test/unit/specs/dialog.spec.js       | 5 ++---
 test/unit/specs/field.spec.js        | 3 +++
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/docs/examples-docs/address-edit.md b/docs/examples-docs/address-edit.md
index cc332e06f..9e0ebf529 100644
--- a/docs/examples-docs/address-edit.md
+++ b/docs/examples-docs/address-edit.md
@@ -4,15 +4,9 @@ import areaList from '../mock/area.json';
 
 export default {
   data() {
-    setTimeout(() => {
-      this.test.user_name = 'b';
-    }, 1000);
     return {
       areaList,
-      searchResult: [],
-      test: {
-        user_name: 'a'
-      }
+      searchResult: []
     }
   },
 
@@ -61,7 +55,6 @@ Vue.component(AddressEdit.name, AddressEdit);
 :::demo 基础用法
 ```html
 <van-address-edit
-  :address-info="test"
   :area-list="areaList"
   :show-postal="true"
   :show-set-default="true"
diff --git a/test/unit/specs/address-edit.spec.js b/test/unit/specs/address-edit.spec.js
index 7f8b58ae3..7f12bb249 100644
--- a/test/unit/specs/address-edit.spec.js
+++ b/test/unit/specs/address-edit.spec.js
@@ -242,7 +242,6 @@ describe('AddressEdit', () => {
             done();
           });
           document.querySelector('.van-dialog__confirm').click();
-          done();
         }, 300);
       });
     }, 300);
diff --git a/test/unit/specs/dialog.spec.js b/test/unit/specs/dialog.spec.js
index 81d2a212e..ec1bf4a56 100644
--- a/test/unit/specs/dialog.spec.js
+++ b/test/unit/specs/dialog.spec.js
@@ -14,10 +14,9 @@ describe('Dialog', () => {
       done();
     });
 
-    expect(document.querySelector('.van-dialog')).to.exist;
-    expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
-
     setTimeout(() => {
+      expect(document.querySelector('.van-dialog')).to.exist;
+      expect(document.querySelector('.van-dialog__cancel').style.display).to.equal('none');
       document.querySelector('.van-dialog__confirm').click();
     }, 500);
   });
diff --git a/test/unit/specs/field.spec.js b/test/unit/specs/field.spec.js
index 5da380573..b0c92c0ee 100644
--- a/test/unit/specs/field.spec.js
+++ b/test/unit/specs/field.spec.js
@@ -136,12 +136,15 @@ describe('Field', () => {
 
   it('blur event', (done) => {
     const blur = sinon.spy();
+    const focus = sinon.spy();
     const clickIcon = sinon.spy();
 
     wrapper = mount(FieldWithIcon, {});
     wrapper.vm.$on('blur', blur);
+    wrapper.vm.$on('focus', focus);
 
     wrapper.find('.van-field__icon')[0].trigger('click');
+    wrapper.find('.van-field__control')[0].trigger('focus');
     wrapper.find('.van-field__control')[0].trigger('blur');
 
     expect(blur.calledOnce).to.be.true;

From c9f8c917a2ee40a0a7a16a087b3d01333cae51bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 10:25:08 +0800
Subject: [PATCH 07/18] fix: field blur event triigered twice

---
 packages/field/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/field/index.vue b/packages/field/index.vue
index 54603b7bc..cd0efd5cc 100644
--- a/packages/field/index.vue
+++ b/packages/field/index.vue
@@ -24,8 +24,7 @@
     />
     <input
       v-else
-      v-bind="$attrs"
-      v-on="$listeners"      
+      v-bind="$attrs"  
       class="van-field__control"
       :type="type"
       :value="value"

From 37a5c55ddb1a83fe4773ce9218aaa9bb9d838ae1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 10:48:50 +0800
Subject: [PATCH 08/18] fix: tab's props not observable

---
 packages/checkbox/index.vue |  3 +--
 packages/tab/index.vue      | 40 ++++++++++++++++++++++++++-----------
 packages/tabs/index.vue     | 18 ++++++-----------
 3 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index 9518db5ee..7f7e30cbe 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -84,8 +84,7 @@ export default {
     },
 
     isChecked() {
-      const currentValue = this.currentValue;
-      console.log('this.currentValue:', this.currentValue);
+      const { currentValue } = this;
       if ({}.toString.call(currentValue) === '[object Boolean]') {
         return currentValue;
       } else if (currentValue !== null && currentValue !== undefined) {
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 232bd6b33..65933ef2e 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,35 +1,51 @@
 <template>
-  <div class="van-tab__pane" :class="classNames">
+  <div :class="['van-tab__pane', { 'van-tab__pane--select': key === $parent.curActive }]">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import findParent from '../mixins/findParent';
+
 export default {
   name: 'van-tab',
+
+  mixins: [findParent],
+
   props: {
-    // 选项卡头显示文字
     title: {
       type: String,
       required: true
     },
     disabled: Boolean
   },
-  data() {
-    const nextIndex = this.$parent.tabs.length;
-    this.$parent.tabs.push({
-      title: this.title,
-      disabled: this.disabled,
-      index: nextIndex
-    });
 
+  data() {
+    this.findParentByComponentName('van-tabs');
+    const nextIndex = this.parentGroup.tabs.length;
+    this.updateParentData(nextIndex);
     return {
       key: nextIndex
     };
   },
-  computed: {
-    classNames() {
-      return { 'van-tab__pane--select': this.key === this.$parent.curActive };
+
+  watch: {
+    title() {
+      this.updateParentData();
+    },
+    disabled() {
+      this.updateParentData();
+    }
+  },
+
+  methods: {
+    updateParentData(nextIndex) {
+      const index = arguments.length ? nextIndex : this.key;
+      this.parentGroup.tabs.splice(index, 1, {
+        title: this.title,
+        disabled: this.disabled,
+        index
+      });
     }
   }
 };
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index e1849b673..dcd27dd65 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -8,9 +8,9 @@
             v-for="(tab, index) in tabs"
             :key="index"
             class="van-tab van-hairline"
-            :class="{'van-tab--active': index === curActive}"
+            :class="{ 'van-tab--active': index === curActive }"
             ref="tabkey"
-            @click="handleTabClick(index, tab)"
+            @click="handleTabClick(index)"
           >
             {{ tab.title }}
           </div>
@@ -27,9 +27,9 @@
         v-for="(tab, index) in tabs"
         :key="index"
         class="van-tab van-hairline"
-        :class="{'van-tab--active': index === curActive}"
+        :class="{ 'van-tab--active': index === curActive }"
         ref="tabkey"
-        @click="handleTabClick(index, tab)"
+        @click="handleTabClick(index)"
       >
         {{ tab.title }}
       </div>
@@ -134,14 +134,8 @@
     },
 
     methods: {
-      /**
-       * tab点击事件
-       *
-       * @param {number} index tab在tabs中的索引
-       * @param {Object} el tab的vue实例
-       */
-      handleTabClick(index, el) {
-        if (el.disabled) {
+      handleTabClick(index) {
+        if (this.tabs[index].disabled) {
           this.$emit('disabled', index);
           return;
         }

From aaaf569759b181750921b88657329baa46a850bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 11:05:33 +0800
Subject: [PATCH 09/18] Tab: add test cases

---
 test/unit/components/tabs.vue | 12 +++++++++++-
 test/unit/specs/tabs.spec.js  | 11 +++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/test/unit/components/tabs.vue b/test/unit/components/tabs.vue
index a63a15b0d..b2b06f815 100644
--- a/test/unit/components/tabs.vue
+++ b/test/unit/components/tabs.vue
@@ -1,6 +1,6 @@
 <template>
   <van-tabs :active="active" :duration="duration" @click="handleTabClick" @disabled="handleTabDisabledClick">
-    <van-tab title="选项一">内容一</van-tab>
+    <van-tab :title="firstTabTitle" :disabled="firstTabDisabled">内容一</van-tab>
     <van-tab title="选项二">内容二</van-tab>
     <van-tab title="选项三" disabled>内容三</van-tab>
     <van-tab title="选项四">内容四</van-tab>
@@ -17,6 +17,16 @@ export default {
     'van-tabs': Tabs
   },
 
+  props: {
+    firstTabTitle: {
+      type: String,
+      default: '选项一'
+    },
+    firstTabDisabled: {
+      type: Boolean
+    }
+  },
+
   data() {
     return {
       active: 0,
diff --git a/test/unit/specs/tabs.spec.js b/test/unit/specs/tabs.spec.js
index eb6252a12..3de9cf3f9 100644
--- a/test/unit/specs/tabs.spec.js
+++ b/test/unit/specs/tabs.spec.js
@@ -146,4 +146,15 @@ describe('Tabs', () => {
       done();
     }, 1200);
   });
+
+  it('watch tab props changes', (done) => {
+    wrapper = mount(TabsTestComponent);
+    wrapper.vm.firstTabTitle = '测试标题';
+    wrapper.vm.firstTabDisabled = true;
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.find('.van-tab')[0].text().replace(/\n|\s/g, '')).to.equal('测试标题');
+      done();
+    });
+  });
 });

From 46f7bd70ec03ad902009bbd3e4c15aa8b38518bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Wed, 27 Sep 2017 11:13:00 +0800
Subject: [PATCH 10/18] update changelog.md

---
 docs/examples-docs/changelog-generated.md | 29 +++++++++++++++++++++++
 docs/examples-docs/changelog.md           | 21 ++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/docs/examples-docs/changelog-generated.md b/docs/examples-docs/changelog-generated.md
index 777968f29..274ba239f 100644
--- a/docs/examples-docs/changelog-generated.md
+++ b/docs/examples-docs/changelog-generated.md
@@ -1,5 +1,34 @@
 ## 更新日志
 
+## [v0.9.9](https://github.com/youzan/vant/tree/v0.9.9) (2017-09-26)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.9.8...v0.9.9)
+
+**处理的 Issue:**
+
+- npm无法安装 npm WARN vant@0.9.7 requires a peer of vue@2.4.2 but none was installed.   [\#141](https://github.com/youzan/vant/issues/141)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- 增加单独禁用stepper input功能 [\#146](https://github.com/youzan/vant/pull/146) ([w91](https://github.com/w91))
+- 优化：waterfall 文档和组件优化 [\#145](https://github.com/youzan/vant/pull/145) ([pangxie1991](https://github.com/pangxie1991))
+- fix: wrong license in package.json [\#144](https://github.com/youzan/vant/pull/144) ([airyland](https://github.com/airyland))
+
+## [v0.9.8](https://github.com/youzan/vant/tree/v0.9.8) (2017-09-24)
+[Full Changelog](https://github.com/youzan/vant/compare/v0.9.7...v0.9.8)
+
+**非兼容更新和新特性:**
+
+- update changelog.md [\#140](https://github.com/youzan/vant/pull/140) ([chenjiahan](https://github.com/chenjiahan))
+- 	add AddressList component [\#138](https://github.com/youzan/vant/pull/138) ([chenjiahan](https://github.com/chenjiahan))
+
+**处理的 Issue:**
+
+- pull-refresh 下拉成功后如何关闭加载，给的例子关闭不了 [\#139](https://github.com/youzan/vant/issues/139)
+
+**合并的 Pull Request (可能有不兼容改动):**
+
+- fix: sku message key [\#142](https://github.com/youzan/vant/pull/142) ([w91](https://github.com/w91))
+
 ## [v0.9.7](https://github.com/youzan/vant/tree/v0.9.7) (2017-09-21)
 [Full Changelog](https://github.com/youzan/vant/compare/v0.9.6...v0.9.7)
 
diff --git a/docs/examples-docs/changelog.md b/docs/examples-docs/changelog.md
index 4255778f0..f5373ec99 100644
--- a/docs/examples-docs/changelog.md
+++ b/docs/examples-docs/changelog.md
@@ -1,5 +1,26 @@
 ## 更新日志
 
+### [0.9.9](https://github.com/youzan/vant/tree/v0.9.9)
+`2017-09-26`
+
+**Improvements**
+- Sku：支持禁用 Stepper [\#146](https://github.com/youzan/vant/pull/146) [@w91](https://github.com/w91)
+
+**Bug Fixes**
+- 修复 packages.json 中 license 标注错误 [\#144](https://github.com/youzan/vant/pull/144) [@airyland](https://github.com/airyland)
+- 修复 Waterfall 滚动计算错误的问题 [\#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**
+- 新增 AddressList 组件 [\#138](https://github.com/youzan/vant/pull/138) [@chenjiahan](https://github.com/chenjiahan)
+- 优化 changelog 结构 [\#140](https://github.com/youzan/vant/pull/140) [@chenjiahan](https://github.com/chenjiahan)
+
+**Bug Fixes**
+- 修复 Sku 留言渲染错误 [\#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`
 

From 771bd7eba25742b59f1fbbc8e82028bf4e247e73 Mon Sep 17 00:00:00 2001
From: ZWkang <907747874@qq.com>
Date: Wed, 27 Sep 2017 16:54:44 +0800
Subject: [PATCH 11/18] fix button actived had 1px blank

---
 packages/vant-css/src/button.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 7a3356dd1..8416fa779 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -15,10 +15,10 @@
   &::before {
     content: " ";
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
     opacity: 0;
     background-color: $black;
     border-radius: inherit; /* inherit parent's border radius */

From 9d7417b386e4e8135c0e7f3e39b9e33c0a880b68 Mon Sep 17 00:00:00 2001
From: kang <907747874@qq.com>
Date: Wed, 27 Sep 2017 18:11:16 +0800
Subject: [PATCH 12/18] fix button actived 1px blank

---
 packages/vant-css/src/button.css | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 8416fa779..1fd62f0e8 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -15,13 +15,16 @@
   &::before {
     content: " ";
     position: absolute;
-    top: -1px;
-    left: -1px;
-    right: -1px;
-    bottom: -1px;
+    top: 50%;
+    left: 50%;
     opacity: 0;
-    background-color: $black;
-    border-radius: inherit; /* inherit parent's border radius */
+    width: 100%;
+    height: 100%;
+    border: inherit;
+    border-color: #000;
+    background-color: #000;
+    border-radius: inherit;/* inherit parent's border radius */
+    transform: translate3d(-50%, -50%, 0); 
   }
 
   &:not([disabled]):active::before {

From c3b24aa0244a869a535235e0b86c23ccde1b8450 Mon Sep 17 00:00:00 2001
From: kang <907747874@qq.com>
Date: Wed, 27 Sep 2017 18:12:38 +0800
Subject: [PATCH 13/18] Update button.css

---
 packages/vant-css/src/button.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vant-css/src/button.css b/packages/vant-css/src/button.css
index 1fd62f0e8..7dbd1050f 100644
--- a/packages/vant-css/src/button.css
+++ b/packages/vant-css/src/button.css
@@ -21,8 +21,8 @@
     width: 100%;
     height: 100%;
     border: inherit;
-    border-color: #000;
-    background-color: #000;
+    border-color: $black;
+    background-color: $black;
     border-radius: inherit;/* inherit parent's border radius */
     transform: translate3d(-50%, -50%, 0); 
   }

From 3de884fbd99c11a83e7ea3c8f537bdd7e323d354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 28 Sep 2017 10:42:25 +0800
Subject: [PATCH 14/18] fix: get-components should ignore .DS_Store in macOS

---
 build/bin/get-components.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build/bin/get-components.js b/build/bin/get-components.js
index 9cc7a71fe..08b3092d7 100644
--- a/build/bin/get-components.js
+++ b/build/bin/get-components.js
@@ -3,6 +3,6 @@ const path = require('path');
 
 module.exports = function() {
   const dirs = fs.readdirSync(path.resolve(__dirname, '../../packages'));
-  const excludes = ['index.js', 'vant-css', 'mixins', 'utils'];
+  const excludes = ['index.js', 'vant-css', 'mixins', 'utils', '.DS_Store'];
   return dirs.filter(dirName => excludes.indexOf(dirName) === -1)
 }

From 5d55898c63e6c4bc65d358dc66e6615a676ce082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Thu, 28 Sep 2017 10:46:58 +0800
Subject: [PATCH 15/18] delete Makefile

---
 Makefile          | 18 ------------------
 README.md         |  8 --------
 README.zh-CN.md   | 10 +---------
 build/bin/init.js | 31 -------------------------------
 4 files changed, 1 insertion(+), 66 deletions(-)
 delete mode 100644 Makefile
 delete mode 100644 build/bin/init.js

diff --git a/Makefile b/Makefile
deleted file mode 100644
index 1a6b62bb1..000000000
--- a/Makefile
+++ /dev/null
@@ -1,18 +0,0 @@
-.PHONY: test
-usage = "\
-Usage:                       make <option> \n\n\
-init componentname           初始化一个新组件，请忽视makefile的报错  \n\n\
-\n"
-
-
-default:
-	@echo $(usage)
-
-init:
-	node build/bin/init.js $(filter-out $@,$(MAKECMDGOALS))
-
-dev:
-	npm run dev
-
-test:
-	npm run test
diff --git a/README.md b/README.md
index 2a90cd0c1..bf95a1452 100644
--- a/README.md
+++ b/README.md
@@ -57,14 +57,6 @@ Vue.use(vant);
  
 ## Development
 
-### Add a new component
-
-```shell
-make init componentName
-```
-
-### Start coding
-
 Start development mode:
 
 ```shell
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 6cb129656..dcaa05ca6 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -55,15 +55,7 @@ Vue.use(vant);
 
 ## 三、开发
 
-### 1. 新建一个组件
-
-```shell
-make init componentName
-```
-
-### 2. 示例预览
-
-在`docs/nav.config.json`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分 在`docs/examples-docs`目录里新建同名的md文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动server：
+在`docs/src/doc.config.js`文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分，在`docs/examples-docs`目录里新建同名的 md 文件，如`waterfall.md`，在项目的根目录下执行以下命令，启动 server：
 
 ```shell
 npm run dev
diff --git a/build/bin/init.js b/build/bin/init.js
deleted file mode 100644
index 1cc94dc86..000000000
--- a/build/bin/init.js
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-const ch = require('child_process');
-const gulp = require('gulp');
-const runSequence = require('run-sequence');
-const gutil = require('gulp-util');
-const fileSave = require('file-save');
-const path = require('path');
-const exec = ch.exec;
-
-if (!process.argv[2]) {
-  console.error('[组件名]必填.');
-  process.exit(1);
-}
-
-const name = process.argv[2];
-
-
-// 项目规范文件拷贝
-gulp.task('copy', function(callback) {
-  gutil.log(gutil.colors.yellow('-------> 开始初始化'));
-
-  exec('cd packages && git clone git@gitlab.qima-inc.com:fe/vue-seed.git ' + name, function(err, stdout, stderr) {
-    gutil.log('-------> 拉取 vue-seed');
-    exec('rm -rf ./packages/' + name + '/.git', function(err, stdout, stderr) {
-      gutil.log('-------> ' + name + '组件初始化成功');
-      callback();
-    });
-  });
-});
-
-runSequence('copy');

From 74da05c30d6847724a581d39eb5e1959be0b63fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 29 Sep 2017 09:40:46 +0800
Subject: [PATCH 16/18] fix: NavBar text vertical align middle

---
 packages/vant-css/src/nav-bar.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/vant-css/src/nav-bar.css b/packages/vant-css/src/nav-bar.css
index 25932b595..504a9ca2b 100644
--- a/packages/vant-css/src/nav-bar.css
+++ b/packages/vant-css/src/nav-bar.css
@@ -10,6 +10,7 @@
 
   .van-icon {
     color: $blue;
+    vertical-align: middle;
   }
 
   &__arrow {
@@ -52,6 +53,7 @@
     margin: 0 -15px;
     padding: 0 15px;
     display: inline-block;
+    vertical-align: middle;
 
     &:active {
       background-color: $active-color;

From 9679a59d9fb187cc9f991d3aaebe47cce691bb68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@meituan.com>
Date: Fri, 29 Sep 2017 09:56:41 +0800
Subject: [PATCH 17/18] Docs: add balbel-plugin-import install guide

---
 docs/examples-docs/quickstart.md | 58 +++++++++++++++++---------------
 docs/src/ExamplesApp.vue         |  2 +-
 docs/src/ExamplesDocsApp.vue     |  8 +++++
 3 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/docs/examples-docs/quickstart.md b/docs/examples-docs/quickstart.md
index 87d216f51..2e42a168b 100644
--- a/docs/examples-docs/quickstart.md
+++ b/docs/examples-docs/quickstart.md
@@ -10,39 +10,42 @@ npm i vant -S
 
 ### 引入组件
 
-#### 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+```bash
+# 安装 babel-plugin-import 插件
+npm i babel-plugin-import -D
+```
 
-   ```js
-   // .babelrc or babel-loader option
-   {
-     "plugins": [
-       ["import", { "libraryName": "vant", "style": true }]
-     ]
-   }
-   ```
-   
-   接着你可以直接引入 vant 组件，等价于下方的按需引入组件
+```js
+// 在 .babelrc 或 babel-loader 中添加插件配置
+{
+  "plugins": [
+    ["import", { "libraryName": "vant", "style": true }]
+  ]
+}
+```
 
-   ```js
-   // 模块化地引入 js 和 css, 通过 babel-plugin-import 插件解析
-   import { Button } from 'vant';
-   ```
+接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式。
 
-#### 按需引入组件
+```js
+import { Button } from 'vant';
+```
 
-   ```jsx
-   import { Button } from 'vant/lib/button';
-   import 'vant/lib/vant-css/button.css';
-   ```
+#### 方式二. 按需引入组件
+
+```js
+import { Button } from 'vant/lib/button';
+import 'vant/lib/vant-css/button.css';
+```
  
-#### 导入所有组件
- 
-```javascript
+#### 方式三. 导入所有组件
+
+```js
 import Vue from 'vue';
-import vant from 'vant';
+import Vant from 'vant';
 import 'vant/lib/vant-css/index.css';
 
-Vue.use(vant);
+Vue.use(Vant);
 ```
 
 ### 自定义主题
@@ -66,9 +69,8 @@ cd packages/vant-css
 
 修改你下载主题对应的样式即可，然后引入你修改后的主题。
 
-### vue-cli模板
-
-可以使用`vue-cli`来初始化`vant`的通用模板：
+### vue-cli 模板
+可以使用`vue-cli`来初始化`Vant`的通用模板：
 
 ```shell
 vue init youzan/vue-cli-template-vant projectName
diff --git a/docs/src/ExamplesApp.vue b/docs/src/ExamplesApp.vue
index 201ab0f1e..d7715b9b3 100644
--- a/docs/src/ExamplesApp.vue
+++ b/docs/src/ExamplesApp.vue
@@ -2,7 +2,7 @@
   <router-view></router-view>
 </template>
 
-<style>
+<style lang="postcss">
 body {
   -webkit-font-smoothing: antialiased;    
 }
diff --git a/docs/src/ExamplesDocsApp.vue b/docs/src/ExamplesDocsApp.vue
index 2e3b78a03..d7545d5b5 100644
--- a/docs/src/ExamplesDocsApp.vue
+++ b/docs/src/ExamplesDocsApp.vue
@@ -34,3 +34,11 @@ export default {
   }
 };
 </script>
+
+<style lang="postcss">
+.zan-doc-content--quickstart {
+  h3:not(:first-of-type) {
+    margin-top: 35px;
+  }
+}
+</style>

From 64fd0ccb0036237b2eec32a38163607eedce4936 Mon Sep 17 00:00:00 2001
From: Yao <chenyao1102@gmail.com>
Date: Thu, 28 Sep 2017 21:32:22 -0500
Subject: [PATCH 18/18] feat: change doc router mode to hash (#158)

---
 docs/src/examples.js | 2 +-
 docs/src/index.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/examples.js b/docs/src/examples.js
index edeb94775..e4c2337a9 100644
--- a/docs/src/examples.js
+++ b/docs/src/examples.js
@@ -21,7 +21,7 @@ routesConfig.push({
   component: DemoList
 });
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: '/zanui/vue/examples',
   routes: routesConfig
 });
diff --git a/docs/src/index.js b/docs/src/index.js
index bb2d3d9e2..2313b2a20 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -15,7 +15,7 @@ routesConfig.push({
 });
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: '/zanui/vue/',
   routes: routesConfig
 });