From de4f6a8ce9c01568bd90aac944a99a549b3b905a Mon Sep 17 00:00:00 2001
From: rex-zsd <rexkaneki@gmail.com>
Date: Wed, 19 Dec 2018 16:54:07 +0800
Subject: [PATCH] [build] 0.4.10

---
 dist/action-sheet/index.js    |   6 +-
 dist/action-sheet/index.wxml  |  31 ++++---
 dist/area/index.js            |  35 ++++----
 dist/area/index.wxml          |   3 +-
 dist/area/index.wxss          |   2 +-
 dist/badge/index.js           |   2 +-
 dist/badge/index.json         |   5 +-
 dist/badge/index.wxml         |  10 ++-
 dist/badge/index.wxss         |   2 +-
 dist/button/index.js          |  22 -----
 dist/button/index.wxml        |   4 +-
 dist/card/index.js            |   2 +-
 dist/card/index.wxml          |  17 ++--
 dist/card/index.wxss          |   2 +-
 dist/cell/index.js            |  16 ----
 dist/cell/index.wxml          |   6 +-
 dist/checkbox-group/index.js  |   4 +-
 dist/checkbox/index.js        |  24 ------
 dist/checkbox/index.wxml      |   8 +-
 dist/checkbox/index.wxss      |   2 +-
 dist/col/index.js             |  11 ---
 dist/col/index.wxml           |   4 +-
 dist/collapse-item/index.js   |  31 ++-----
 dist/collapse-item/index.wxml |   4 +-
 dist/collapse-item/index.wxss |   2 +-
 dist/common/class-names.js    |  29 -------
 dist/common/utils.js          |   6 +-
 dist/common/utils.wxs         |   5 --
 dist/dialog/dialog.js         |   1 +
 dist/dialog/index.js          |   8 +-
 dist/dialog/index.wxml        |   2 +-
 dist/dialog/index.wxss        |   2 +-
 dist/field/index.js           |  15 +---
 dist/field/index.wxml         |  11 ++-
 dist/field/index.wxss         |   2 +-
 dist/goods-action/index.js    |  18 +---
 dist/goods-action/index.wxml  |   4 +-
 dist/icon/index.json          |   5 +-
 dist/icon/index.wxml          |  12 ++-
 dist/icon/index.wxss          |   2 +-
 dist/info/index.js            |   7 ++
 dist/info/index.json          |   3 +
 dist/info/index.wxml          |   7 ++
 dist/info/index.wxss          |   1 +
 dist/mixins/basic.js          |  24 +-----
 dist/mixins/iphonex.js        |  39 +++++++++
 dist/picker-column/index.js   | 132 +++++++++++++++++++++++++++++
 dist/picker-column/index.json |   3 +
 dist/picker-column/index.wxml |  31 +++++++
 dist/picker-column/index.wxss |   1 +
 dist/picker/index.js          | 155 ++++++++++++++++++++++++++++++++++
 dist/picker/index.json        |   7 ++
 dist/picker/index.wxml        |  41 +++++++++
 dist/picker/index.wxss        |   1 +
 dist/popup/index.js           |  19 +----
 dist/popup/index.wxml         |   4 +-
 dist/radio/index.js           |  13 ---
 dist/radio/index.wxml         |   4 +-
 dist/stepper/index.js         |   8 ++
 dist/stepper/index.wxml       |  19 +++--
 dist/stepper/index.wxss       |   2 +-
 dist/submit-bar/index.js      |  14 +--
 dist/submit-bar/index.wxml    |   4 +-
 dist/switch-cell/index.js     |   4 +-
 dist/switch-cell/index.wxml   |   2 +
 dist/switch-cell/index.wxss   |   2 +-
 dist/switch/index.js          |  12 ---
 dist/switch/index.wxml        |   6 +-
 dist/switch/index.wxss        |   2 +-
 dist/tabbar-item/index.json   |   3 +-
 dist/tabbar-item/index.wxml   |  12 ++-
 dist/tabbar-item/index.wxss   |   2 +-
 dist/tabbar/index.js          |  18 +---
 dist/tabbar/index.wxml        |   4 +-
 dist/tag/index.js             |  25 +++---
 dist/tag/index.wxml           |   4 +-
 dist/toast/index.wxss         |   2 +-
 dist/tree-select/index.js     |  14 +--
 dist/tree-select/index.json   |   3 +-
 dist/tree-select/index.wxml   |   9 +-
 dist/tree-select/index.wxss   |   2 +-
 dist/wxs/array.wxs            |   5 ++
 dist/wxs/bem.wxs              |  38 +++++++++
 dist/wxs/memoize.wxs          |  54 ++++++++++++
 dist/wxs/object.wxs           |  13 +++
 dist/wxs/utils.wxs            |  12 +++
 86 files changed, 780 insertions(+), 384 deletions(-)
 delete mode 100644 dist/common/class-names.js
 delete mode 100644 dist/common/utils.wxs
 create mode 100644 dist/info/index.js
 create mode 100644 dist/info/index.json
 create mode 100644 dist/info/index.wxml
 create mode 100644 dist/info/index.wxss
 create mode 100644 dist/mixins/iphonex.js
 create mode 100644 dist/picker-column/index.js
 create mode 100644 dist/picker-column/index.json
 create mode 100644 dist/picker-column/index.wxml
 create mode 100644 dist/picker-column/index.wxss
 create mode 100644 dist/picker/index.js
 create mode 100644 dist/picker/index.json
 create mode 100644 dist/picker/index.wxml
 create mode 100644 dist/picker/index.wxss
 create mode 100644 dist/wxs/array.wxs
 create mode 100644 dist/wxs/bem.wxs
 create mode 100644 dist/wxs/memoize.wxs
 create mode 100644 dist/wxs/object.wxs
 create mode 100644 dist/wxs/utils.wxs

diff --git a/dist/action-sheet/index.js b/dist/action-sheet/index.js
index 534fc458..7a93bff1 100644
--- a/dist/action-sheet/index.js
+++ b/dist/action-sheet/index.js
@@ -1,5 +1,7 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 VantComponent({
+  mixins: [iphonex],
   props: {
     show: Boolean,
     title: String,
@@ -19,10 +21,6 @@ VantComponent({
     closeOnClickOverlay: {
       type: Boolean,
       value: true
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
   methods: {
diff --git a/dist/action-sheet/index.wxml b/dist/action-sheet/index.wxml
index 2435c5c1..dd71adcb 100644
--- a/dist/action-sheet/index.wxml
+++ b/dist/action-sheet/index.wxml
@@ -16,20 +16,23 @@
       bind:click="onClose"
     />
   </view>
-  <button
-    wx:for="{{ actions }}"
-    wx:key="index"
-    open-type="{{ item.openType }}"
-    class="van-action-sheet__item van-hairline--top {{ item.disabled || item.loading ? 'van-action-sheet__item--disabled' : '' }} {{ item.className || '' }}"
-    data-index="{{ index }}"
-    bind:tap="onSelect"
-  >
-    <block wx:if="{{ !item.loading }}">
-      {{ item.name }}
-      <text wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</text>
-    </block>
-    <van-loading wx:else size="20px" />
-  </button>
+  <view wx:if="{{ actions && actions.length }}">
+    <!-- button外包一层view，防止actions动态变化，导致渲染时button被打散 -->
+    <button
+      wx:for="{{ actions }}"
+      wx:key="index"
+      open-type="{{ item.openType }}"
+      class="van-action-sheet__item van-hairline--top {{ item.disabled || item.loading ? 'van-action-sheet__item--disabled' : '' }} {{ item.className || '' }}"
+      data-index="{{ index }}"
+      bind:tap="onSelect"
+    >
+      <block wx:if="{{ !item.loading }}">
+        {{ item.name }}
+        <text wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</text>
+      </block>
+      <van-loading wx:else size="20px" />
+    </button>
+  </view>
   <view
     wx:if="{{ cancelText }}"
     class="van-action-sheet__cancel"
diff --git a/dist/area/index.js b/dist/area/index.js
index 7bab3e4c..c4e970d4 100644
--- a/dist/area/index.js
+++ b/dist/area/index.js
@@ -25,15 +25,6 @@ VantComponent({
     pickerValue: [0, 0, 0],
     columns: []
   },
-  computed: {
-    displayColumns: function displayColumns() {
-      var _this$data = this.data,
-          _this$data$columns = _this$data.columns,
-          columns = _this$data$columns === void 0 ? [] : _this$data$columns,
-          columnsNum = _this$data.columnsNum;
-      return columns.slice(0, +columnsNum);
-    }
-  },
   watch: {
     value: function value(_value) {
       this.code = _value;
@@ -58,9 +49,8 @@ VantComponent({
     },
     onChange: function onChange(event) {
       var value = event.detail.value;
-      var _this$data2 = this.data,
-          pickerValue = _this$data2.pickerValue,
-          displayColumns = _this$data2.displayColumns;
+      var pickerValue = this.data.pickerValue;
+      var displayColumns = this.getDisplayColumns();
       var index = pickerValue.findIndex(function (item, index) {
         return item !== value[index];
       });
@@ -143,11 +133,9 @@ VantComponent({
       });
     },
     getValues: function getValues() {
-      var _this$data3 = this.data,
-          _this$data3$displayCo = _this$data3.displayColumns,
-          displayColumns = _this$data3$displayCo === void 0 ? [] : _this$data3$displayCo,
-          _this$data3$pickerVal = _this$data3.pickerValue,
-          pickerValue = _this$data3$pickerVal === void 0 ? [] : _this$data3$pickerVal;
+      var _this$data$pickerValu = this.data.pickerValue,
+          pickerValue = _this$data$pickerValu === void 0 ? [] : _this$data$pickerValu;
+      var displayColumns = this.getDisplayColumns();
       return displayColumns.map(function (option, index) {
         return option[pickerValue[index]];
       }).filter(function (value) {
@@ -155,9 +143,9 @@ VantComponent({
       });
     },
     getIndexs: function getIndexs() {
-      var _this$data4 = this.data,
-          pickerValue = _this$data4.pickerValue,
-          columnsNum = _this$data4.columnsNum;
+      var _this$data = this.data,
+          pickerValue = _this$data.pickerValue,
+          columnsNum = _this$data.columnsNum;
       return pickerValue.slice(0, columnsNum);
     },
     getDetail: function getDetail() {
@@ -193,6 +181,13 @@ VantComponent({
     reset: function reset() {
       this.code = '';
       this.setValues();
+    },
+    getDisplayColumns: function getDisplayColumns() {
+      var _this$data2 = this.data,
+          _this$data2$columns = _this$data2.columns,
+          columns = _this$data2$columns === void 0 ? [] : _this$data2$columns,
+          columnsNum = _this$data2.columnsNum;
+      return columns.slice(0, +columnsNum);
     }
   }
 });
\ No newline at end of file
diff --git a/dist/area/index.wxml b/dist/area/index.wxml
index cf401704..bec4249b 100644
--- a/dist/area/index.wxml
+++ b/dist/area/index.wxml
@@ -17,7 +17,8 @@
     class="van-picker__columns"
   >
     <picker-view-column
-      wx:for="{{ displayColumns }}"
+      wx:if="{{ rowIndex < columnsNum }}"
+      wx:for="{{ columns }}"
       wx:for-item="row"
       wx:for-index="rowIndex"
       wx:key="rowIndex"
diff --git a/dist/area/index.wxss b/dist/area/index.wxss
index 1616412e..eab95244 100644
--- a/dist/area/index.wxss
+++ b/dist/area/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-picker{-webkit-text-size-adjust:100%;position:relative;overflow:hidden;background-color:#fff;-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;line-height:44px}.van-picker__cancel,.van-picker__confirm{color:#1989fa;padding:0 15px;font-size:14px}.van-picker__cancel:active,.van-picker__confirm:active{background-color:#e8e8e8}.van-picker__title{max-width:50%;font-size:16px;font-weight:500;text-align:center}.van-picker__columns{position:relative}.van-picker__loading{display:-webkit-flex;display:flex;z-index:4;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:rgba(255,255,255,.9)}.van-picker-column{-webkit-flex:1;flex:1;overflow:hidden;font-size:16px;text-align:center}.van-picker-column__item{padding:0 5px;color:#999}.van-picker-column__item--selected{font-weight:500;color:#333}.van-picker-column__item--disabled{opacity:.3}
\ No newline at end of file
+@import '../common/index.wxss';.van-picker{-webkit-text-size-adjust:100%;position:relative;overflow:hidden;background-color:#fff;-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;line-height:44px}.van-picker__cancel,.van-picker__confirm{color:#1989fa;padding:0 15px;font-size:14px}.van-picker__cancel:active,.van-picker__confirm:active{background-color:#e8e8e8}.van-picker__title{max-width:50%;font-size:16px;font-weight:500;text-align:center}.van-picker__columns{position:relative}.van-picker__loading{display:-webkit-flex;display:flex;z-index:4;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:rgba(255,255,255,.9)}.van-picker-column{-webkit-flex:1;flex:1;overflow:hidden;font-size:16px;text-align:center}.van-picker-column__item{padding:0 5px;color:#333}.van-picker-column__item--selected{font-weight:500}.van-picker-column__item--disabled{opacity:.3}
\ No newline at end of file
diff --git a/dist/badge/index.js b/dist/badge/index.js
index e9d52988..f039df3c 100644
--- a/dist/badge/index.js
+++ b/dist/badge/index.js
@@ -5,7 +5,7 @@ VantComponent({
     name: 'badge-group'
   },
   props: {
-    info: Number,
+    info: null,
     title: String
   },
   methods: {
diff --git a/dist/badge/index.json b/dist/badge/index.json
index 467ce294..bf0ebe00 100644
--- a/dist/badge/index.json
+++ b/dist/badge/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
 }
diff --git a/dist/badge/index.wxml b/dist/badge/index.wxml
index 3e55ca3a..425b4739 100644
--- a/dist/badge/index.wxml
+++ b/dist/badge/index.wxml
@@ -1,4 +1,10 @@
 <view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
-  <view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
-  {{ title }}
+  <view class="van-badge__text">
+    <van-info
+      wx:if="{{ info !== null }}"
+      info="{{ info }}"
+      custom-style="right: 4px"
+    />
+    {{ title }}
+  </view>
 </view>
diff --git a/dist/badge/index.wxss b/dist/badge/index.wxss
index bb5f6b2d..a6f3e822 100644
--- a/dist/badge/index.wxss
+++ b/dist/badge/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-badge{display:block;overflow:hidden;font-size:14px;line-height:1.4;-webkit-user-select:none;user-select:none;color:#7d7e80;word-break:break-all;box-sizing:border-box;padding:20px 12px 20px 9px;background-color:#f8f8f8;border-left:3px solid transparent}.van-badge:active{background-color:#e8e8e8}.van-badge::after{border-bottom-width:1px}.van-badge--active{font-weight:700;color:#333;border-color:#f44}.van-badge--active::after{border-right-width:1px}.van-badge--active,.van-badge--active:active{background-color:#fff}.van-badge__info{position:absolute;top:4px;right:2px;color:#fff;font-size:12px;font-weight:500;-webkit-transform:scale(.8);transform:scale(.8);text-align:center;box-sizing:border-box;padding:0 6px;min-width:18px;line-height:18px;border-radius:9px;background-color:#f44}
\ No newline at end of file
+@import '../common/index.wxss';.van-badge{display:block;overflow:hidden;font-size:14px;line-height:1.4;-webkit-user-select:none;user-select:none;color:#7d7e80;word-break:break-all;box-sizing:border-box;padding:20px 12px 20px 9px;background-color:#f8f8f8;border-left:3px solid transparent}.van-badge:active{background-color:#e8e8e8}.van-badge::after{border-bottom-width:1px}.van-badge--active{font-weight:700;color:#333;border-color:#f44}.van-badge--active::after{border-right-width:1px}.van-badge--active,.van-badge--active:active{background-color:#fff}.van-badge__text{position:relative}
\ No newline at end of file
diff --git a/dist/button/index.js b/dist/button/index.js
index c98a60ac..e5b2e792 100644
--- a/dist/button/index.js
+++ b/dist/button/index.js
@@ -20,28 +20,6 @@ VantComponent({
       value: 'normal'
     }
   },
-  computed: {
-    classes: function classes() {
-      var _this$data = this.data,
-          type = _this$data.type,
-          size = _this$data.size,
-          block = _this$data.block,
-          plain = _this$data.plain,
-          round = _this$data.round,
-          square = _this$data.square,
-          loading = _this$data.loading,
-          disabled = _this$data.disabled;
-      return this.classNames('van-button', "van-button--" + type, "van-button--" + size, {
-        'van-button--block': block,
-        'van-button--round': round,
-        'van-button--plain': plain,
-        'van-button--square': square,
-        'van-button--loading': loading,
-        'van-button--disabled': disabled,
-        'van-button--unclickable': disabled || loading
-      });
-    }
-  },
   methods: {
     onClick: function onClick() {
       if (!this.data.disabled && !this.data.loading) {
diff --git a/dist/button/index.wxml b/dist/button/index.wxml
index 3480f938..63817067 100644
--- a/dist/button/index.wxml
+++ b/dist/button/index.wxml
@@ -1,7 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <button
   id="{{ id }}"
   lang="{{ lang }}"
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, unclickable: disabled || loading }]) }}"
   open-type="{{ openType }}"
   session-from="{{ sessionFrom }}"
   app-parameter="{{ appParameter }}"
diff --git a/dist/card/index.js b/dist/card/index.js
index 8174f9fb..47e9761f 100644
--- a/dist/card/index.js
+++ b/dist/card/index.js
@@ -16,7 +16,7 @@ VantComponent({
     originPrice: String,
     thumbMode: {
       type: String,
-      value: 'scaleToFill'
+      value: 'aspectFit'
     },
     currency: {
       type: String,
diff --git a/dist/card/index.wxml b/dist/card/index.wxml
index a5869519..a8416056 100644
--- a/dist/card/index.wxml
+++ b/dist/card/index.wxml
@@ -7,7 +7,7 @@
       lazy-load="{{ lazyLoad }}"
       class="van-card__img thumb-class"
     />
-    <slot wx:else name="thumb" />
+    <slot name="thumb" />
     <van-tag
       wx:if="{{ tag }}"
       mark
@@ -19,16 +19,15 @@
   </view>
 
   <view class="van-card__content">
-    <view class="van-card__left">
-      <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
-      <slot wx:else name="title" />
+    <view wx:if="{{ title }}" class="van-card__title van-multi-ellipsis--l2 title-class">{{ title }}</view>
+    <slot wx:else name="title" />
 
-      <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
-      <slot wx:else name="desc" />
+    <view wx:if="{{ desc }}" class="van-card__desc van-ellipsis desc-class">{{ desc }}</view>
+    <slot wx:else name="desc" />
 
-      <slot name="tags" />
-    </view>
-    <view class="van-card__right">
+    <slot name="tags" />
+
+    <view class="van-card__bottom">
       <view wx:if="{{ price || price === 0 }}" class="van-card__price price-class">{{ currency }} {{ price }}</view>
       <view wx:if="{{ originPrice || originPrice === 0 }}" class="van-card__origin-price origin-price-class">{{ currency }} {{ originPrice }}</view>
       <view wx:if="{{ num }}" class="van-card__num num-class">x {{ num }}</view>
diff --git a/dist/card/index.wxss b/dist/card/index.wxss
index ef76adf1..24738e2c 100644
--- a/dist/card/index.wxss
+++ b/dist/card/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-card{box-sizing:border-box;position:relative;height:100px;font-size:12px;color:#333;padding:5px 15px 5px 115px;background:#fafafa}.van-card--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:absolute;top:5px;left:15px;width:90px;height:90px}.van-card__img{width:100%;height:100%}.van-card,.van-card__content{display:-webkit-flex;display:flex}.van-card__content{width:100%}.van-card__desc,.van-card__title{line-height:20px;word-break:break-all}.van-card__title{max-height:40px}.van-card__desc{max-height:20px;color:#7d7e80}.van-card__left{-webkit-flex:1;flex:1;min-width:0}.van-card__right{-webkit-flex:none;flex:none;padding-left:10px;line-height:20px;text-align:right}.van-card__origin-price{color:#7d7e80;text-decoration:line-through}.van-card__num{color:#7d7e80}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{position:absolute;right:15px;bottom:5px}.van-card__footer .van-button{margin-left:5px}
\ No newline at end of file
+@import '../common/index.wxss';.van-card{position:relative;display:-webkit-flex;display:flex;padding:5px 15px;font-size:12px;color:#333;background:#fafafa;box-sizing:border-box;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-card--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-card__thumb{position:relative;width:90px;height:90px;margin-right:10px;-webkit-flex:none;flex:none}.van-card__thumb:empty{display:none}.van-card__img{width:100%;height:100%}.van-card__content{position:relative;height:90px;-webkit-flex:1;flex:1}.van-card__desc,.van-card__title{line-height:17px;word-break:break-all}.van-card__title{max-height:34px;font-weight:700}.van-card__desc{max-height:17px;color:#7d7e80}.van-card__bottom{position:absolute;bottom:0;left:0;width:100%;line-height:17px}.van-card__price{display:inline-block;font-weight:700;color:#f44}.van-card__origin-price{display:inline-block;margin-left:5px;font-size:10px;color:#7d7e80;text-decoration:line-through}.van-card__num{float:right}.van-card__tag{position:absolute;top:2px;left:0}.van-card__footer{width:100%;text-align:right;-webkit-flex:none;flex:none}
\ No newline at end of file
diff --git a/dist/cell/index.js b/dist/cell/index.js
index 3e39a9ee..26d2f015 100644
--- a/dist/cell/index.js
+++ b/dist/cell/index.js
@@ -21,22 +21,6 @@ VantComponent({
       value: true
     }
   },
-  computed: {
-    cellClass: function cellClass() {
-      var data = this.data;
-      return this.classNames('van-cell', {
-        'van-cell--center': data.center,
-        'van-cell--required': data.required,
-        'van-cell--borderless': !data.border,
-        'van-cell--clickable': data.isLink || data.clickable,
-        ["van-cell--" + data.size]: data.size
-      });
-    },
-    titleStyle: function titleStyle() {
-      var titleWidth = this.data.titleWidth;
-      return titleWidth ? "max-width: " + titleWidth + ";min-width: " + titleWidth : '';
-    }
-  },
   methods: {
     onClick: function onClick(event) {
       this.$emit('click', event.detail);
diff --git a/dist/cell/index.wxml b/dist/cell/index.wxml
index bdea77b0..caee22b6 100644
--- a/dist/cell/index.wxml
+++ b/dist/cell/index.wxml
@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ cellClass }}"
+  class="custom-class {{ utils.bem('cell', [size, { center, required, borderless: !border, clickable: isLink || clickable }]) }}"
   style="{{ customStyle }}"
   bind:tap="onClick"
 >
@@ -12,7 +14,7 @@
   <slot wx:else name="icon" />
 
   <view
-    style="{{ titleStyle }}"
+    style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
     class="van-cell__title title-class"
   >
     <block wx:if="{{ title }}">
diff --git a/dist/checkbox-group/index.js b/dist/checkbox-group/index.js
index 21bc5225..354468b1 100644
--- a/dist/checkbox-group/index.js
+++ b/dist/checkbox-group/index.js
@@ -15,9 +15,9 @@ VantComponent({
     }
   },
   props: {
+    max: Number,
     value: Array,
-    disabled: Boolean,
-    max: Number
+    disabled: Boolean
   },
   watch: {
     value: function value(_value) {
diff --git a/dist/checkbox/index.js b/dist/checkbox/index.js
index e4ca564d..b3d82e29 100644
--- a/dist/checkbox/index.js
+++ b/dist/checkbox/index.js
@@ -18,30 +18,6 @@ VantComponent({
       value: 'round'
     }
   },
-  computed: {
-    iconClass: function iconClass() {
-      var _this$data = this.data,
-          disabled = _this$data.disabled,
-          value = _this$data.value,
-          shape = _this$data.shape;
-      return this.classNames('van-checkbox__icon', "van-checkbox__icon--" + shape, {
-        'van-checkbox__icon--disabled': disabled,
-        'van-checkbox__icon--checked': value
-      });
-    },
-    iconStyle: function iconStyle() {
-      var _this$data2 = this.data,
-          value = _this$data2.value,
-          disabled = _this$data2.disabled,
-          checkedColor = _this$data2.checkedColor;
-
-      if (checkedColor && value && !disabled) {
-        return "border-color: " + checkedColor + "; background-color: " + checkedColor;
-      }
-
-      return '';
-    }
-  },
   methods: {
     emitChange: function emitChange(value) {
       var parent = this.getRelationNodes('../checkbox-group/index')[0];
diff --git a/dist/checkbox/index.wxml b/dist/checkbox/index.wxml
index ab5637a9..1659ba43 100644
--- a/dist/checkbox/index.wxml
+++ b/dist/checkbox/index.wxml
@@ -1,16 +1,18 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-checkbox custom-class">
   <view class="van-checkbox__icon-wrap" bindtap="toggle">
     <slot wx:if="{{ useIconSlot }}" name="icon" />
     <van-icon
       wx:else
       name="success"
-      class="{{ iconClass }}"
-      style="{{ iconStyle }}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
+      style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"
     />
   </view>
-  <view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
+  <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
     <slot />
   </view>
 </view>
diff --git a/dist/checkbox/index.wxss b/dist/checkbox/index.wxss
index 33b90986..9ead73ea 100644
--- a/dist/checkbox/index.wxss
+++ b/dist/checkbox/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-checkbox{overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox__icon-wrap,.van-checkbox__label{display:inline-block;line-height:20px;vertical-align:middle}.van-checkbox__icon{box-sizing:border-box;display:block;width:20px;height:20px;border:1px solid #e5e5e5;color:transparent;font-size:14px;text-align:center;transition:.2s}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;border-color:#1989fa;background-color:#1989fa}.van-checkbox__icon--disabled{border-color:#eee;background-color:currentColor;color:#f8f8f8}.van-checkbox__icon--disabled.van-checkbox__icon--checked{border-color:#eee;background-color:#eee}.van-checkbox__label{margin-left:10px}.van-checkbox__label--left{margin:0 10px 0 0;float:left}.van-checkbox__label:empty{margin:0}
\ No newline at end of file
+@import '../common/index.wxss';.van-checkbox{overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox__icon-wrap,.van-checkbox__label{display:inline-block;line-height:20px;vertical-align:middle}.van-checkbox__icon{display:block;font-size:14px;width:20px;height:20px;color:transparent;text-align:center;box-sizing:border-box;border:1px solid #e5e5e5;transition:.2s}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;border-color:#1989fa;background-color:#1989fa}.van-checkbox__icon--disabled{border-color:#c9c9c9;background-color:#eee}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:#c9c9c9}.van-checkbox__label{color:#333;margin-left:10px}.van-checkbox__label--left{float:left;margin:0 10px 0 0}.van-checkbox__label--disabled{color:#c9c9c9}.van-checkbox__label:empty{margin:0}
\ No newline at end of file
diff --git a/dist/col/index.js b/dist/col/index.js
index 13a890c9..7b8b85b2 100644
--- a/dist/col/index.js
+++ b/dist/col/index.js
@@ -11,17 +11,6 @@ VantComponent({
   data: {
     style: ''
   },
-  computed: {
-    classes: function classes() {
-      var _this$data = this.data,
-          span = _this$data.span,
-          offset = _this$data.offset;
-      return this.classNames('van-col', {
-        ["van-col--" + span]: span,
-        ["van-col--offset-" + offset]: offset
-      });
-    }
-  },
   methods: {
     setGutter: function setGutter(gutter) {
       var padding = gutter / 2 + "px";
diff --git a/dist/col/index.wxml b/dist/col/index.wxml
index 69e74b16..a759aac5 100644
--- a/dist/col/index.wxml
+++ b/dist/col/index.wxml
@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'van-col--offset-' + offset : '' }}"
   style="{{ style }}"
 >
   <slot />
diff --git a/dist/collapse-item/index.js b/dist/collapse-item/index.js
index 594e4a9e..a218e377 100644
--- a/dist/collapse-item/index.js
+++ b/dist/collapse-item/index.js
@@ -9,11 +9,11 @@ VantComponent({
     }
   },
   props: {
-    name: [String, Number],
+    name: null,
+    title: null,
+    value: null,
     icon: String,
     label: String,
-    title: [String, Number],
-    value: [String, Number],
     disabled: Boolean,
     border: {
       type: Boolean,
@@ -28,17 +28,6 @@ VantComponent({
     contentHeight: 0,
     expanded: false
   },
-  computed: {
-    titleClass: function titleClass() {
-      var _this$data = this.data,
-          disabled = _this$data.disabled,
-          expanded = _this$data.expanded;
-      return this.classNames('van-collapse-item__title', {
-        'van-collapse-item__title--disabled': disabled,
-        'van-collapse-item__title--expanded': expanded
-      });
-    }
-  },
   methods: {
     updateExpanded: function updateExpanded() {
       if (!this.parent) {
@@ -65,13 +54,9 @@ VantComponent({
       });
     },
     updateStyle: function updateStyle(expanded) {
-      var _this = this;
-
       if (expanded) {
-        this.getRect('.van-collapse-item__content').then(function (res) {
-          _this.set({
-            contentHeight: res.height ? res.height + 'px' : null
-          });
+        this.set({
+          contentHeight: 'auto'
         });
       } else {
         this.set({
@@ -84,9 +69,9 @@ VantComponent({
         return;
       }
 
-      var _this$data2 = this.data,
-          name = _this$data2.name,
-          expanded = _this$data2.expanded;
+      var _this$data = this.data,
+          name = _this$data.name,
+          expanded = _this$data.expanded;
       var index = this.parent.data.items.indexOf(this);
       var currentName = name == null ? index : name;
       this.parent.switch(currentName, !expanded);
diff --git a/dist/collapse-item/index.wxml b/dist/collapse-item/index.wxml
index 6bf5ff10..4f51da13 100644
--- a/dist/collapse-item/index.wxml
+++ b/dist/collapse-item/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-collapse-item van-hairline--top custom-class">
   <van-cell
     title="{{ title }}"
@@ -6,7 +8,7 @@
     value="{{ value }}"
     label="{{ label }}"
     border="{{ border && expanded }}"
-    class="{{ titleClass }}"
+    class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
     right-icon-class="van-cell__right-icon"
     custom-class="van-cell"
     bind:click="onClick"
diff --git a/dist/collapse-item/index.wxss b/dist/collapse-item/index.wxss
index f7fdb515..693cdc52 100644
--- a/dist/collapse-item/index.wxss
+++ b/dist/collapse-item/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled:active{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden;will-change:max-height;transition:max-height .3s ease-in-out}.van-collapse-item__content{padding:15px;background-color:#fff}
\ No newline at end of file
+@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:.3s}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c9c9c9!important}.van-collapse-item__title--disabled .van-cell:active{background-color:#fff!important}.van-collapse-item__wrapper{overflow:hidden;will-change:max-height;transition:max-height .3s ease-in-out}.van-collapse-item__content{color:#999;padding:15px;font-size:13px;line-height:1.5;background-color:#fff}
\ No newline at end of file
diff --git a/dist/common/class-names.js b/dist/common/class-names.js
deleted file mode 100644
index 7e1d0507..00000000
--- a/dist/common/class-names.js
+++ /dev/null
@@ -1,29 +0,0 @@
-var hasOwn = {}.hasOwnProperty;
-export function classNames() {
-  var classes = [];
-
-  for (var i = 0; i < arguments.length; i++) {
-    var arg = arguments[i];
-    if (!arg) continue;
-    var argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg) && arg.length) {
-      var inner = classNames.apply(null, arg);
-
-      if (inner) {
-        classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (var key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-}
-;
\ No newline at end of file
diff --git a/dist/common/utils.js b/dist/common/utils.js
index 47f27a59..a3455a38 100644
--- a/dist/common/utils.js
+++ b/dist/common/utils.js
@@ -11,4 +11,8 @@ function isNumber(value) {
   return /^\d+$/.test(value);
 }
 
-export { isObj, isDef, isNumber };
\ No newline at end of file
+function range(num, min, max) {
+  return Math.min(Math.max(num, min), max);
+}
+
+export { isObj, isDef, isNumber, range };
\ No newline at end of file
diff --git a/dist/common/utils.wxs b/dist/common/utils.wxs
deleted file mode 100644
index 6435ac9e..00000000
--- a/dist/common/utils.wxs
+++ /dev/null
@@ -1,5 +0,0 @@
-function isSrc(url) {
-  return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
-}
-
-module.exports.isSrc = isSrc;
diff --git a/dist/dialog/dialog.js b/dist/dialog/dialog.js
index 58649c5d..fedfe376 100644
--- a/dist/dialog/dialog.js
+++ b/dist/dialog/dialog.js
@@ -33,6 +33,7 @@ Dialog.defaultOptions = {
   zIndex: 100,
   overlay: true,
   asyncClose: false,
+  messageAlign: '',
   transition: 'scale',
   selector: '#van-dialog',
   confirmButtonText: '确认',
diff --git a/dist/dialog/index.js b/dist/dialog/index.js
index f1cb31d0..a8e3327e 100644
--- a/dist/dialog/index.js
+++ b/dist/dialog/index.js
@@ -8,6 +8,7 @@ VantComponent({
     message: String,
     useSlot: Boolean,
     asyncClose: Boolean,
+    messageAlign: String,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,
@@ -84,8 +85,11 @@ VantComponent({
         this.close();
       }
 
-      this.$emit('close', action);
-      this.$emit(action);
+      this.$emit('close', action); //把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
+
+      this.$emit(action, {
+        dialog: this
+      });
       var callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
 
       if (callback) {
diff --git a/dist/dialog/index.wxml b/dist/dialog/index.wxml
index 71edae7a..fe890fd0 100644
--- a/dist/dialog/index.wxml
+++ b/dist/dialog/index.wxml
@@ -17,7 +17,7 @@
   <slot wx:if="{{ useSlot }}" />
   <view
     wx:elif="{{ message }}"
-    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }}"
+    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
   >
     <text>{{ message }}</text>
   </view>
diff --git a/dist/dialog/index.wxss b/dist/dialog/index.wxss
index bb1c5fb8..97ee8923 100644
--- a/dist/dialog/index.wxss
+++ b/dist/dialog/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-dialog{width:85%;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff}.van-dialog__header{font-weight:500;padding-top:25px;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{padding:25px;font-size:14px;line-height:1.5;max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog__confirm,.van-dialog__confirm:active{color:#1989fa!important}.van-dialog-bounce-enter{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-dialog-bounce-leave-active{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9)}
\ No newline at end of file
+@import '../common/index.wxss';.van-dialog{width:85%;font-size:16px;overflow:hidden;border-radius:4px;background-color:#fff}.van-dialog__header{font-weight:500;padding-top:25px;text-align:center}.van-dialog__header--isolated{padding:25px 0}.van-dialog__message{padding:25px;font-size:14px;line-height:1.5;max-height:60vh;overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:12px;color:#7d7e80}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog__confirm,.van-dialog__confirm:active{color:#1989fa!important}.van-dialog-bounce-enter{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7)}.van-dialog-bounce-leave-active{opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9)}
\ No newline at end of file
diff --git a/dist/field/index.js b/dist/field/index.js
index 6a3b31b0..4a04edb5 100644
--- a/dist/field/index.js
+++ b/dist/field/index.js
@@ -26,6 +26,10 @@ VantComponent({
     customStyle: String,
     useIconSlot: Boolean,
     useButtonSlot: Boolean,
+    showConfirmBar: {
+      type: Boolean,
+      value: true
+    },
     placeholderStyle: String,
     adjustPosition: {
       type: Boolean,
@@ -55,17 +59,6 @@ VantComponent({
   data: {
     showClear: false
   },
-  computed: {
-    inputClass: function inputClass() {
-      var data = this.data;
-      return this.classNames('input-class', 'van-field__input', {
-        'van-field--error': data.error,
-        'van-field__textarea': data.type === 'textarea',
-        'van-field__input--disabled': data.disabled,
-        ["van-field__input--" + data.inputAlign]: data.inputAlign
-      });
-    }
-  },
   beforeCreate: function beforeCreate() {
     this.focused = false;
   },
diff --git a/dist/field/index.wxml b/dist/field/index.wxml
index 61cd6985..e1205906 100644
--- a/dist/field/index.wxml
+++ b/dist/field/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-cell
   icon="{{ leftIcon }}"
   title="{{ label }}"
@@ -14,7 +16,7 @@
   <view class="van-field__body {{ type === 'textarea' ? 'van-field__body--textarea' : '' }}">
     <textarea
       wx:if="{{ type === 'textarea' }}"
-      class="{{ inputClass }}"
+      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
       fixed="{{ fixed }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -23,9 +25,10 @@
       auto-height="{{ autosize }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field--error' : '' }}"
+      placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
       cursor-spacing="{{ cursorSpacing }}"
       adjust-position="{{ adjustPosition }}"
+      show-confirm-bar="{{ showConfirmBar }}"
       bindinput="onInput"
       bind:blur="onBlur"
       bind:focus="onFocus"
@@ -33,7 +36,7 @@
     />
     <input
       wx:else
-      class="{{ inputClass }}"
+      class="input-class {{ utils.bem('field__input', [inputAlign, { disabled, error }]) }}"
       type="{{ type }}"
       focus="{{ focus }}"
       value="{{ value }}"
@@ -41,7 +44,7 @@
       maxlength="{{ maxlength }}"
       placeholder="{{ placeholder }}"
       placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ error ? 'van-field--error' : '' }}"
+      placeholder-class="{{ error ? 'van-field__input--error' : '' }}"
       confirm-type="{{ confirmType }}"
       confirm-hold="{{ confirmHold }}"
       cursor-spacing="{{ cursorSpacing }}"
diff --git a/dist/field/index.wxss b/dist/field/index.wxss
index 9b86848e..fdd253fa 100644
--- a/dist/field/index.wxss
+++ b/dist/field/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{min-height:24px}.van-field__input{border:0;margin:0;padding:0;width:100%;height:24px;resize:none;display:block;text-align:left;min-height:24px;line-height:inherit;box-sizing:border-box;background-color:transparent}.van-field__input--disabled{opacity:1;color:#7d7e80;background-color:transparent}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__clear-root{height:24px}.van-field__button,.van-field__clear,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;line-height:inherit;margin-right:-10px;vertical-align:middle}.van-field__clear{color:#c9c9c9}.van-field__icon-container{color:#999}.van-field__icon{display:block!important}.van-field__button{padding-left:10px}.van-field__error-message{color:#f44;font-size:12px;text-align:left}.van-field--error{color:#f44}
\ No newline at end of file
+@import '../common/index.wxss';.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{min-height:24px}.van-field__input{border:0;margin:0;padding:0;width:100%;height:24px;resize:none;display:block;text-align:left;min-height:24px;line-height:inherit;box-sizing:border-box;background-color:transparent}.van-field__input--disabled{opacity:1;color:#7d7e80;background-color:transparent}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__input--error{color:#f44}.van-field__clear-root{height:24px}.van-field__button,.van-field__clear,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__icon-container{padding:0 10px;line-height:inherit;margin-right:-10px;vertical-align:middle}.van-field__clear{color:#c9c9c9}.van-field__icon-container{color:#999}.van-field__icon{display:block!important}.van-field__button{padding-left:10px}.van-field__error-message{color:#f44;font-size:12px;text-align:left}
\ No newline at end of file
diff --git a/dist/goods-action/index.js b/dist/goods-action/index.js
index ce123ad1..3f875b99 100644
--- a/dist/goods-action/index.js
+++ b/dist/goods-action/index.js
@@ -1,19 +1,5 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 VantComponent({
-  props: {
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-  computed: {
-    rootClass: function rootClass() {
-      var _this$data = this.data,
-          safeAreaInsetBottom = _this$data.safeAreaInsetBottom,
-          isIPhoneX = _this$data.isIPhoneX;
-      return this.classNames('van-goods-action', 'custom-class', {
-        ["van-goods-action--safe"]: isIPhoneX && safeAreaInsetBottom
-      });
-    }
-  }
+  mixins: [iphonex]
 });
\ No newline at end of file
diff --git a/dist/goods-action/index.wxml b/dist/goods-action/index.wxml
index cfc009c7..6e61cc9e 100644
--- a/dist/goods-action/index.wxml
+++ b/dist/goods-action/index.wxml
@@ -1,3 +1,5 @@
-<view class="{{ rootClass }}">
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class {{ utils.bem('goods-action', { safe: isIPhoneX && safeAreaInsetBottom }) }}">
   <slot />
 </view>
diff --git a/dist/icon/index.json b/dist/icon/index.json
index 467ce294..bf0ebe00 100644
--- a/dist/icon/index.json
+++ b/dist/icon/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
 }
diff --git a/dist/icon/index.wxml b/dist/icon/index.wxml
index aefcdebf..0c37bcd3 100644
--- a/dist/icon/index.wxml
+++ b/dist/icon/index.wxml
@@ -1,18 +1,16 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="custom-class {{ classPrefix }} {{ utils.isSrc(name) ? 'van-icon--image' : classPrefix + '-' + name }}"
   style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
   bind:tap="onClick"
 >
-  <view
+  <van-info
     wx:if="{{ info !== null }}"
-    class="van-icon__info"
-  >
-    {{ info }}
-  </view>
+    info="{{ info }}"
+  />
   <image
     wx:if="{{ utils.isSrc(name) }}"
     src="{{ name }}"
   />
 </view>
-
-<wxs src="../common/utils.wxs" module="utils" />
diff --git a/dist/icon/index.wxss b/dist/icon/index.wxss
index c775a420..d67654a5 100644
--- a/dist/icon/index.wxss
+++ b/dist/icon/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';@font-face{font-style:normal;font-weight:400;font-family:vant-icon;src:url(https://img.yzcdn.cn/vant/vant-icon-ccd101.ttf) format('truetype')}.van-icon{position:relative;display:inline-block;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto}.van-icon--image{width:1em;height:1em}.van-icon--image image{top:0;left:0;right:0;bottom:0;margin:auto;max-width:100%;max-height:100%;position:absolute}.van-icon__info{position:absolute;right:0;top:-8px;color:#fff;font-size:12px;font-weight:500;font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;text-align:center;box-sizing:border-box;padding:0 3px;min-width:16px;line-height:14px;border:1px solid #fff;border-radius:16px;background-color:#f44;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%}.van-icon::before{display:inline-block}.van-icon-add-o::before{content:"\F000"}.van-icon-add::before{content:"\F001"}.van-icon-add2::before{content:"\F002"}.van-icon-after-sale::before{content:"\F003"}.van-icon-aim::before{content:"\F004"}.van-icon-alipay::before{content:"\F005"}.van-icon-arrow-down::before{content:"\F006"}.van-icon-arrow-left::before{content:"\F007"}.van-icon-arrow-up::before{content:"\F008"}.van-icon-arrow::before{content:"\F009"}.van-icon-balance-pay::before{content:"\F00A"}.van-icon-browsing-history::before{content:"\F00B"}.van-icon-card::before{content:"\F00C"}.van-icon-cart-o::before{content:"\F00D"}.van-icon-cart::before{content:"\F00E"}.van-icon-cash-back-record::before{content:"\F00F"}.van-icon-cash-on-deliver::before{content:"\F010"}.van-icon-certificate::before{content:"\F011"}.van-icon-chat::before{content:"\F012"}.van-icon-check::before{content:"\F013"}.van-icon-checked::before{content:"\F014"}.van-icon-clear::before{content:"\F015"}.van-icon-clock::before{content:"\F016"}.van-icon-close::before{content:"\F017"}.van-icon-completed::before{content:"\F018"}.van-icon-contact::before{content:"\F019"}.van-icon-coupon::before{content:"\F01A"}.van-icon-credit-pay::before{content:"\F01B"}.van-icon-cross::before{content:"\F01C"}.van-icon-debit-pay::before{content:"\F01D"}.van-icon-delete::before{content:"\F01E"}.van-icon-description::before{content:"\F01F"}.van-icon-discount::before{content:"\F020"}.van-icon-ecard-pay::before{content:"\F021"}.van-icon-edit-data::before{content:"\F022"}.van-icon-edit::before{content:"\F023"}.van-icon-exchange-record::before{content:"\F024"}.van-icon-exchange::before{content:"\F025"}.van-icon-fail::before{content:"\F026"}.van-icon-free-postage::before{content:"\F027"}.van-icon-gift-card-pay::before{content:"\F028"}.van-icon-gift-card::before{content:"\F029"}.van-icon-gift::before{content:"\F02A"}.van-icon-gold-coin::before{content:"\F02B"}.van-icon-goods-collect::before{content:"\F02C"}.van-icon-home::before{content:"\F02D"}.van-icon-hot-sale::before{content:"\F02E"}.van-icon-hot::before{content:"\F02F"}.van-icon-idcard::before{content:"\F030"}.van-icon-info-o::before{content:"\F031"}.van-icon-like-o::before{content:"\F032"}.van-icon-like::before{content:"\F033"}.van-icon-location::before{content:"\F034"}.van-icon-logistics::before{content:"\F035"}.van-icon-more-o::before{content:"\F036"}.van-icon-more::before{content:"\F037"}.van-icon-new-arrival::before{content:"\F038"}.van-icon-new::before{content:"\F039"}.van-icon-other-pay::before{content:"\F03A"}.van-icon-passed::before{content:"\F03B"}.van-icon-password-not-view::before{content:"\F03C"}.van-icon-password-view::before{content:"\F03D"}.van-icon-pause::before{content:"\F03E"}.van-icon-peer-pay::before{content:"\F03F"}.van-icon-pending-deliver::before{content:"\F040"}.van-icon-pending-evaluate::before{content:"\F041"}.van-icon-pending-orders::before{content:"\F042"}.van-icon-pending-payment::before{content:"\F043"}.van-icon-phone::before{content:"\F044"}.van-icon-photo::before{content:"\F045"}.van-icon-photograph::before{content:"\F046"}.van-icon-play::before{content:"\F047"}.van-icon-point-gift::before{content:"\F048"}.van-icon-points-mall::before{content:"\F049"}.van-icon-points::before{content:"\F04A"}.van-icon-qr-invalid::before{content:"\F04B"}.van-icon-qr::before{content:"\F04C"}.van-icon-question::before{content:"\F04D"}.van-icon-question2::before{content:"\F04E"}.van-icon-receive-gift::before{content:"\F04F"}.van-icon-records::before{content:"\F050"}.van-icon-search::before{content:"\F051"}.van-icon-send-gift::before{content:"\F052"}.van-icon-setting::before{content:"\F053"}.van-icon-share::before{content:"\F054"}.van-icon-shop-collect::before{content:"\F055"}.van-icon-shop::before{content:"\F056"}.van-icon-shopping-cart::before{content:"\F057"}.van-icon-sign::before{content:"\F058"}.van-icon-star-o::before{content:"\F059"}.van-icon-star::before{content:"\F05A"}.van-icon-stop::before{content:"\F05B"}.van-icon-success::before{content:"\F05C"}.van-icon-tosend::before{content:"\F05D"}.van-icon-underway::before{content:"\F05E"}.van-icon-upgrade::before{content:"\F05F"}.van-icon-value-card::before{content:"\F060"}.van-icon-wap-home::before{content:"\F061"}.van-icon-wap-nav::before{content:"\F062"}.van-icon-warn::before{content:"\F063"}.van-icon-wechat::before{content:"\F064"}
\ No newline at end of file
+@import '../common/index.wxss';@font-face{font-style:normal;font-weight:400;font-family:vant-icon;src:url(https://img.yzcdn.cn/vant/vant-icon-ccd101.ttf) format('truetype')}.van-icon{position:relative;display:inline-block;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto}.van-icon--image{width:1em;height:1em}.van-icon--image image{top:0;left:0;right:0;bottom:0;margin:auto;max-width:100%;max-height:100%;position:absolute}.van-icon::before{display:inline-block}.van-icon-add-o::before{content:"\F000"}.van-icon-add::before{content:"\F001"}.van-icon-add2::before{content:"\F002"}.van-icon-after-sale::before{content:"\F003"}.van-icon-aim::before{content:"\F004"}.van-icon-alipay::before{content:"\F005"}.van-icon-arrow-down::before{content:"\F006"}.van-icon-arrow-left::before{content:"\F007"}.van-icon-arrow-up::before{content:"\F008"}.van-icon-arrow::before{content:"\F009"}.van-icon-balance-pay::before{content:"\F00A"}.van-icon-browsing-history::before{content:"\F00B"}.van-icon-card::before{content:"\F00C"}.van-icon-cart-o::before{content:"\F00D"}.van-icon-cart::before{content:"\F00E"}.van-icon-cash-back-record::before{content:"\F00F"}.van-icon-cash-on-deliver::before{content:"\F010"}.van-icon-certificate::before{content:"\F011"}.van-icon-chat::before{content:"\F012"}.van-icon-check::before{content:"\F013"}.van-icon-checked::before{content:"\F014"}.van-icon-clear::before{content:"\F015"}.van-icon-clock::before{content:"\F016"}.van-icon-close::before{content:"\F017"}.van-icon-completed::before{content:"\F018"}.van-icon-contact::before{content:"\F019"}.van-icon-coupon::before{content:"\F01A"}.van-icon-credit-pay::before{content:"\F01B"}.van-icon-cross::before{content:"\F01C"}.van-icon-debit-pay::before{content:"\F01D"}.van-icon-delete::before{content:"\F01E"}.van-icon-description::before{content:"\F01F"}.van-icon-discount::before{content:"\F020"}.van-icon-ecard-pay::before{content:"\F021"}.van-icon-edit-data::before{content:"\F022"}.van-icon-edit::before{content:"\F023"}.van-icon-exchange-record::before{content:"\F024"}.van-icon-exchange::before{content:"\F025"}.van-icon-fail::before{content:"\F026"}.van-icon-free-postage::before{content:"\F027"}.van-icon-gift-card-pay::before{content:"\F028"}.van-icon-gift-card::before{content:"\F029"}.van-icon-gift::before{content:"\F02A"}.van-icon-gold-coin::before{content:"\F02B"}.van-icon-goods-collect::before{content:"\F02C"}.van-icon-home::before{content:"\F02D"}.van-icon-hot-sale::before{content:"\F02E"}.van-icon-hot::before{content:"\F02F"}.van-icon-idcard::before{content:"\F030"}.van-icon-info-o::before{content:"\F031"}.van-icon-like-o::before{content:"\F032"}.van-icon-like::before{content:"\F033"}.van-icon-location::before{content:"\F034"}.van-icon-logistics::before{content:"\F035"}.van-icon-more-o::before{content:"\F036"}.van-icon-more::before{content:"\F037"}.van-icon-new-arrival::before{content:"\F038"}.van-icon-new::before{content:"\F039"}.van-icon-other-pay::before{content:"\F03A"}.van-icon-passed::before{content:"\F03B"}.van-icon-password-not-view::before{content:"\F03C"}.van-icon-password-view::before{content:"\F03D"}.van-icon-pause::before{content:"\F03E"}.van-icon-peer-pay::before{content:"\F03F"}.van-icon-pending-deliver::before{content:"\F040"}.van-icon-pending-evaluate::before{content:"\F041"}.van-icon-pending-orders::before{content:"\F042"}.van-icon-pending-payment::before{content:"\F043"}.van-icon-phone::before{content:"\F044"}.van-icon-photo::before{content:"\F045"}.van-icon-photograph::before{content:"\F046"}.van-icon-play::before{content:"\F047"}.van-icon-point-gift::before{content:"\F048"}.van-icon-points-mall::before{content:"\F049"}.van-icon-points::before{content:"\F04A"}.van-icon-qr-invalid::before{content:"\F04B"}.van-icon-qr::before{content:"\F04C"}.van-icon-question::before{content:"\F04D"}.van-icon-question2::before{content:"\F04E"}.van-icon-receive-gift::before{content:"\F04F"}.van-icon-records::before{content:"\F050"}.van-icon-search::before{content:"\F051"}.van-icon-send-gift::before{content:"\F052"}.van-icon-setting::before{content:"\F053"}.van-icon-share::before{content:"\F054"}.van-icon-shop-collect::before{content:"\F055"}.van-icon-shop::before{content:"\F056"}.van-icon-shopping-cart::before{content:"\F057"}.van-icon-sign::before{content:"\F058"}.van-icon-star-o::before{content:"\F059"}.van-icon-star::before{content:"\F05A"}.van-icon-stop::before{content:"\F05B"}.van-icon-success::before{content:"\F05C"}.van-icon-tosend::before{content:"\F05D"}.van-icon-underway::before{content:"\F05E"}.van-icon-upgrade::before{content:"\F05F"}.van-icon-value-card::before{content:"\F060"}.van-icon-wap-home::before{content:"\F061"}.van-icon-wap-nav::before{content:"\F062"}.van-icon-warn::before{content:"\F063"}.van-icon-wechat::before{content:"\F064"}
\ No newline at end of file
diff --git a/dist/info/index.js b/dist/info/index.js
new file mode 100644
index 00000000..1357bbf1
--- /dev/null
+++ b/dist/info/index.js
@@ -0,0 +1,7 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+  props: {
+    info: null,
+    customStyle: String
+  }
+});
\ No newline at end of file
diff --git a/dist/info/index.json b/dist/info/index.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/dist/info/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/dist/info/index.wxml b/dist/info/index.wxml
new file mode 100644
index 00000000..7deb39b0
--- /dev/null
+++ b/dist/info/index.wxml
@@ -0,0 +1,7 @@
+<view
+  wx:if="{{ info !== null }}"
+  class="custom-class van-info"
+  style="{{ customStyle }}"
+>
+  {{ info }}
+</view>
diff --git a/dist/info/index.wxss b/dist/info/index.wxss
new file mode 100644
index 00000000..fda67e87
--- /dev/null
+++ b/dist/info/index.wxss
@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-info{position:absolute;right:0;top:-8px;color:#fff;font-size:12px;font-weight:500;font-family:PingFang SC,Helvetica Neue,Arial,sans-serif;text-align:center;box-sizing:border-box;padding:0 3px;min-width:16px;line-height:14px;border:1px solid #fff;border-radius:16px;background-color:#f44;-webkit-transform:translateX(50%);transform:translateX(50%);-webkit-transform-origin:100%;transform-origin:100%}
\ No newline at end of file
diff --git a/dist/mixins/basic.js b/dist/mixins/basic.js
index 1f92000c..db7087e5 100644
--- a/dist/mixins/basic.js
+++ b/dist/mixins/basic.js
@@ -1,33 +1,13 @@
-import { classNames } from '../common/class-names';
 export var basic = Behavior({
-  created: function created() {
-    var _this = this;
-
-    wx.getSystemInfo({
-      success: function success(_ref) {
-        var model = _ref.model,
-            screenHeight = _ref.screenHeight;
-        var isIphoneX = /iphone x/i.test(model);
-        var isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
-
-        if (isIphoneX || isIphoneNew) {
-          _this.set({
-            isIPhoneX: true
-          });
-        }
-      }
-    });
-  },
   methods: {
-    classNames: classNames,
     $emit: function $emit() {
       this.triggerEvent.apply(this, arguments);
     },
     getRect: function getRect(selector, all) {
-      var _this2 = this;
+      var _this = this;
 
       return new Promise(function (resolve) {
-        wx.createSelectorQuery().in(_this2)[all ? 'selectAll' : 'select'](selector).boundingClientRect(function (rect) {
+        wx.createSelectorQuery().in(_this)[all ? 'selectAll' : 'select'](selector).boundingClientRect(function (rect) {
           if (all && Array.isArray(rect) && rect.length) {
             resolve(rect);
           }
diff --git a/dist/mixins/iphonex.js b/dist/mixins/iphonex.js
new file mode 100644
index 00000000..e33fb52b
--- /dev/null
+++ b/dist/mixins/iphonex.js
@@ -0,0 +1,39 @@
+var isIPhoneX = null;
+
+function getIsIPhoneX() {
+  return new Promise(function (resolve, reject) {
+    if (isIPhoneX !== null) {
+      resolve(isIPhoneX);
+    } else {
+      wx.getSystemInfo({
+        success: function success(_ref) {
+          var model = _ref.model,
+              screenHeight = _ref.screenHeight;
+          var iphoneX = /iphone x/i.test(model);
+          var iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+          isIPhoneX = iphoneX || iphoneNew;
+          resolve(isIPhoneX);
+        },
+        fail: reject
+      });
+    }
+  });
+}
+
+export var iphonex = Behavior({
+  properties: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+  created: function created() {
+    var _this = this;
+
+    getIsIPhoneX().then(function (isIPhoneX) {
+      _this.set({
+        isIPhoneX: isIPhoneX
+      });
+    });
+  }
+});
\ No newline at end of file
diff --git a/dist/picker-column/index.js b/dist/picker-column/index.js
new file mode 100644
index 00000000..b2f8ecff
--- /dev/null
+++ b/dist/picker-column/index.js
@@ -0,0 +1,132 @@
+import { VantComponent } from '../common/component';
+import { isObj, range } from '../common/utils';
+var DEFAULT_DURATION = 200;
+VantComponent({
+  classes: ['active-class'],
+  props: {
+    valueKey: String,
+    className: String,
+    itemHeight: Number,
+    visibleItemCount: Number,
+    initialOptions: {
+      type: Array,
+      value: []
+    },
+    defaultIndex: {
+      type: Number,
+      value: 0
+    }
+  },
+  data: {
+    startY: 0,
+    offset: 0,
+    duration: 0,
+    startOffset: 0,
+    options: [],
+    currentIndex: 0
+  },
+  created: function created() {
+    var _this$data = this.data,
+        defaultIndex = _this$data.defaultIndex,
+        initialOptions = _this$data.initialOptions;
+    this.set({
+      currentIndex: defaultIndex,
+      options: initialOptions
+    });
+  },
+  computed: {
+    count: function count() {
+      return this.data.options.length;
+    },
+    baseOffset: function baseOffset() {
+      var data = this.data;
+      return data.itemHeight * (data.visibleItemCount - 1) / 2;
+    },
+    wrapperStyle: function wrapperStyle() {
+      var data = this.data;
+      return ["transition: " + data.duration + "ms", "transform: translate3d(0, " + (data.offset + data.baseOffset) + "px, 0)", "line-height: " + data.itemHeight + "px"].join('; ');
+    }
+  },
+  watch: {
+    defaultIndex: function defaultIndex(value) {
+      this.setIndex(value);
+    }
+  },
+  methods: {
+    onTouchStart: function onTouchStart(event) {
+      this.set({
+        startY: event.touches[0].clientY,
+        startOffset: this.data.offset,
+        duration: 0
+      });
+    },
+    onTouchMove: function onTouchMove(event) {
+      var data = this.data;
+      var deltaY = event.touches[0].clientY - data.startY;
+      this.set({
+        offset: range(data.startOffset + deltaY, -(data.count * data.itemHeight), data.itemHeight)
+      });
+    },
+    onTouchEnd: function onTouchEnd() {
+      var data = this.data;
+
+      if (data.offset !== data.startOffset) {
+        this.set({
+          duration: DEFAULT_DURATION
+        });
+        var index = range(Math.round(-data.offset / data.itemHeight), 0, data.count - 1);
+        this.setIndex(index, true);
+      }
+    },
+    onClickItem: function onClickItem(event) {
+      var index = event.currentTarget.dataset.index;
+      this.setIndex(index, true);
+    },
+    adjustIndex: function adjustIndex(index) {
+      var data = this.data;
+      index = range(index, 0, data.count);
+
+      for (var i = index; i < data.count; i++) {
+        if (!this.isDisabled(data.options[i])) return i;
+      }
+
+      for (var _i = index - 1; _i >= 0; _i--) {
+        if (!this.isDisabled(data.options[_i])) return _i;
+      }
+    },
+    isDisabled: function isDisabled(option) {
+      return isObj(option) && option.disabled;
+    },
+    getOptionText: function getOptionText(option) {
+      var data = this.data;
+      return isObj(option) && data.valueKey in option ? option[data.valueKey] : option;
+    },
+    setIndex: function setIndex(index, userAction) {
+      var data = this.data;
+      index = this.adjustIndex(index) || 0;
+      this.set({
+        offset: -index * data.itemHeight
+      });
+
+      if (index !== data.currentIndex) {
+        this.set({
+          currentIndex: index
+        });
+        userAction && this.$emit('change', index);
+      }
+    },
+    setValue: function setValue(value) {
+      var options = this.data.options;
+
+      for (var i = 0; i < options.length; i++) {
+        if (this.getOptionText(options[i]) === value) {
+          return this.setIndex(i);
+        }
+      }
+    },
+    getValue: function getValue() {
+      var data = this.data;
+      return data.options[data.currentIndex];
+    }
+  }
+});
\ No newline at end of file
diff --git a/dist/picker-column/index.json b/dist/picker-column/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/dist/picker-column/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/dist/picker-column/index.wxml b/dist/picker-column/index.wxml
new file mode 100644
index 00000000..d0ecb33c
--- /dev/null
+++ b/dist/picker-column/index.wxml
@@ -0,0 +1,31 @@
+<view
+  class="van-picker-column custom-class"
+  style="height: {{ itemHeight * visibleItemCount }}px"
+  bind:touchstart="onTouchStart"
+  catch:touchmove="onTouchMove"
+  bind:touchend="onTouchEnd"
+  bind:touchcancel="onTouchEnd"
+>
+  <view style="{{ wrapperStyle }}">
+    <view
+      wx:for="{{ options }}"
+      wx:for-item="option"
+      wx:key="index"
+      data-index="{{ index }}"
+      style="height: {{ itemHeight }}px"
+      class="van-ellipsis van-picker-column__item {{ option && option.disabled ? 'van-picker-column__item--disabled' : '' }} {{ index === currentIndex ? 'van-picker-column__item--selected active-class' : '' }}"
+      bindtap="onClickItem"
+    >{{ getOptionText(option, valueKey) }}</view>
+  </view>
+</view>
+
+<wxs module="getOptionText">
+function isObj(x) {
+  var type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
+}
+
+module.exports = function (option, valueKey) {
+  return isObj(option) && option[valueKey] ? option[valueKey] : option;
+}
+</wxs>
diff --git a/dist/picker-column/index.wxss b/dist/picker-column/index.wxss
new file mode 100644
index 00000000..b39acdc8
--- /dev/null
+++ b/dist/picker-column/index.wxss
@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-picker-column{overflow:hidden;font-size:16px;text-align:center}.van-picker-column__item{padding:0 5px;color:#999}.van-picker-column__item--selected{font-weight:500;color:#333}.van-picker-column__item--disabled{opacity:.3}
\ No newline at end of file
diff --git a/dist/picker/index.js b/dist/picker/index.js
new file mode 100644
index 00000000..39251e74
--- /dev/null
+++ b/dist/picker/index.js
@@ -0,0 +1,155 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+  classes: ['active-class', 'toolbar-class', 'column-class'],
+  props: {
+    title: String,
+    loading: Boolean,
+    showToolbar: Boolean,
+    confirmButtonText: String,
+    cancelButtonText: String,
+    visibleItemCount: {
+      type: Number,
+      value: 5
+    },
+    valueKey: {
+      type: String,
+      value: 'text'
+    },
+    itemHeight: {
+      type: Number,
+      value: 44
+    },
+    columns: {
+      type: Array,
+      value: [],
+      observer: function observer(columns) {
+        var _this = this;
+
+        if (columns === void 0) {
+          columns = [];
+        }
+
+        this.set({
+          simple: columns.length && !columns[0].values
+        }, function () {
+          var children = _this.children = _this.selectAllComponents('.van-picker__column');
+
+          if (Array.isArray(children) && children.length) {
+            _this.setColumns();
+          }
+        });
+      }
+    }
+  },
+  methods: {
+    noop: function noop() {},
+    setColumns: function setColumns() {
+      var _this2 = this;
+
+      var data = this.data;
+      var columns = data.simple ? [{
+        values: data.columns
+      }] : data.columns;
+      columns.forEach(function (columns, index) {
+        _this2.setColumnValues(index, columns.values);
+      });
+    },
+    emit: function emit(event) {
+      var type = event.currentTarget.dataset.type;
+
+      if (this.data.simple) {
+        this.$emit(type, {
+          value: this.getColumnValue(0),
+          index: this.getColumnIndex(0)
+        });
+      } else {
+        this.$emit(type, {
+          value: this.getValues(),
+          index: this.getIndexes()
+        });
+      }
+    },
+    onChange: function onChange(event) {
+      if (this.data.simple) {
+        this.$emit('change', {
+          picker: this,
+          value: this.getColumnValue(0),
+          index: this.getColumnIndex(0)
+        });
+      } else {
+        this.$emit('change', {
+          picker: this,
+          value: this.getValues(),
+          index: event.currentTarget.dataset.index
+        });
+      }
+    },
+    // get column instance by index
+    getColumn: function getColumn(index) {
+      return this.children[index];
+    },
+    // get column value by index
+    getColumnValue: function getColumnValue(index) {
+      var column = this.getColumn(index);
+      return column && column.getValue();
+    },
+    // set column value by index
+    setColumnValue: function setColumnValue(index, value) {
+      var column = this.getColumn(index);
+      column && column.setValue(value);
+    },
+    // get column option index by column index
+    getColumnIndex: function getColumnIndex(columnIndex) {
+      return (this.getColumn(columnIndex) || {}).data.currentIndex;
+    },
+    // set column option index by column index
+    setColumnIndex: function setColumnIndex(columnIndex, optionIndex) {
+      var column = this.getColumn(columnIndex);
+      column && column.setIndex(optionIndex);
+    },
+    // get options of column by index
+    getColumnValues: function getColumnValues(index) {
+      return (this.children[index] || {}).data.options;
+    },
+    // set options of column by index
+    setColumnValues: function setColumnValues(index, options) {
+      var column = this.children[index];
+
+      if (column && JSON.stringify(column.data.options) !== JSON.stringify(options)) {
+        column.set({
+          options: options
+        }, function () {
+          column.setIndex(0);
+        });
+      }
+    },
+    // get values of all columns
+    getValues: function getValues() {
+      return this.children.map(function (child) {
+        return child.getValue();
+      });
+    },
+    // set values of all columns
+    setValues: function setValues(values) {
+      var _this3 = this;
+
+      values.forEach(function (value, index) {
+        _this3.setColumnValue(index, value);
+      });
+    },
+    // get indexes of all columns
+    getIndexes: function getIndexes() {
+      return this.children.map(function (child) {
+        return child.data.currentIndex;
+      });
+    },
+    // set indexes of all columns
+    setIndexes: function setIndexes(indexes) {
+      var _this4 = this;
+
+      indexes.forEach(function (optionIndex, columnIndex) {
+        _this4.setColumnIndex(columnIndex, optionIndex);
+      });
+    }
+  }
+});
\ No newline at end of file
diff --git a/dist/picker/index.json b/dist/picker/index.json
new file mode 100644
index 00000000..2fcec899
--- /dev/null
+++ b/dist/picker/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "picker-column": "../picker-column/index",
+    "loading": "../loading/index"
+  }
+}
diff --git a/dist/picker/index.wxml b/dist/picker/index.wxml
new file mode 100644
index 00000000..fa778f3c
--- /dev/null
+++ b/dist/picker/index.wxml
@@ -0,0 +1,41 @@
+<view class="van-picker custom-class">
+  <view
+    wx:if="{{ showToolbar }}"
+    class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
+  >
+    <view class="van-picker__cancel" data-type="cancel" bindtap="emit">
+      {{ cancelButtonText || '取消' }}
+    </view>
+    <view wx:if="{{ title }}" class="van-picker__title van-ellipsis">{{ title }}</view>
+    <view class="van-picker__confirm" data-type="confirm" bindtap="emit">
+      {{ confirmButtonText || '确认' }}
+    </view>
+  </view>
+  <view wx:if="{{ loading }}" class="van-picker__loading">
+    <loading color="#1989fa"/>
+  </view>
+  <view
+    class="van-picker__columns"
+    style="height: {{ itemHeight * visibleItemCount }}px"
+    catch:touchmove="noop"
+  >
+    <picker-column
+      class="van-picker__column"
+      wx:for="{{ simple ? [columns] : columns }}"
+      wx:key="index"
+      data-index="{{ index }}"
+      custom-class="column-class"
+      value-key="{{ valueKey }}"
+      initial-options="{{ simple ? item : item.values }}"
+      default-index="{{ item.defaultIndex }}"
+      item-height="{{ itemHeight }}"
+      visible-item-count="{{ visibleItemCount }}"
+      active-class="active-class"
+      bind:change="onChange"
+    />
+    <view
+      class="van-picker__frame van-hairline--top-bottom"
+      style="height: {{ itemHeight }}px"
+    />
+  </view>
+</view>
diff --git a/dist/picker/index.wxss b/dist/picker/index.wxss
new file mode 100644
index 00000000..7dbd66fb
--- /dev/null
+++ b/dist/picker/index.wxss
@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;background-color:#fff;-webkit-user-select:none;user-select:none}.van-picker__toolbar{display:-webkit-flex;display:flex;height:44px;line-height:44px;-webkit-justify-content:space-between;justify-content:space-between}.van-picker__cancel,.van-picker__confirm{padding:0 15px;font-size:14px;color:#1989fa}.van-picker__cancel:active,.van-picker__confirm:active{background-color:#e8e8e8}.van-picker__title{max-width:50%;font-size:16px;font-weight:500;text-align:center}.van-picker__columns{position:relative;display:-webkit-flex;display:flex}.van-picker__column{-webkit-flex:1;flex:1}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:-webkit-flex;display:flex;background-color:rgba(255,255,255,.9);-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-picker__frame,.van-picker__loading .van-loading{position:absolute;top:50%;left:0;z-index:1;width:100%;pointer-events:none;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
\ No newline at end of file
diff --git a/dist/popup/index.js b/dist/popup/index.js
index a814b4cb..46926c32 100644
--- a/dist/popup/index.js
+++ b/dist/popup/index.js
@@ -1,7 +1,8 @@
 import { VantComponent } from '../common/component';
 import { transition } from '../mixins/transition';
+import { iphonex } from '../mixins/iphonex';
 VantComponent({
-  mixins: [transition(false)],
+  mixins: [transition(false), iphonex],
   props: {
     transition: String,
     customStyle: String,
@@ -21,22 +22,6 @@ VantComponent({
     position: {
       type: String,
       value: 'center'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-  computed: {
-    popupClass: function popupClass() {
-      var _this$data = this.data,
-          position = _this$data.position,
-          safeAreaInsetBottom = _this$data.safeAreaInsetBottom,
-          isIPhoneX = _this$data.isIPhoneX;
-      return this.classNames('custom-class', 'van-popup', {
-        ["van-popup--" + position]: position,
-        ["van-popup--safe"]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
-      });
     }
   },
   methods: {
diff --git a/dist/popup/index.wxml b/dist/popup/index.wxml
index 07bd1ae1..bafbfecb 100644
--- a/dist/popup/index.wxml
+++ b/dist/popup/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <van-overlay
   wx:if="{{ inited && overlay }}"
   mask
@@ -8,7 +10,7 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="{{ popupClass }}"
+  class="custom-class {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom && position === 'bottom' }]) }}"
   style="z-index: {{ zIndex }}; -webkit-animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; animation: van-{{ transition || position }}-{{ type }} {{ duration }}ms both; {{ display ? '' : 'display: none;' }}{{ customStyle }}"
   bind:animationend="onAnimationEnd"
 >
diff --git a/dist/radio/index.js b/dist/radio/index.js
index 8c4e9bc0..b66313a6 100644
--- a/dist/radio/index.js
+++ b/dist/radio/index.js
@@ -14,19 +14,6 @@ VantComponent({
     labelPosition: String,
     checkedColor: String
   },
-  computed: {
-    iconClass: function iconClass() {
-      var _this$data = this.data,
-          disabled = _this$data.disabled,
-          name = _this$data.name,
-          value = _this$data.value;
-      return this.classNames('van-radio__icon', {
-        'van-radio__icon--disabled': disabled,
-        'van-radio__icon--checked': !disabled && name === value,
-        'van-radio__icon--check': !disabled && name !== value
-      });
-    }
-  },
   methods: {
     emitChange: function emitChange(value) {
       var instance = this.getRelationNodes('../radio-group/index')[0] || this;
diff --git a/dist/radio/index.wxml b/dist/radio/index.wxml
index 29d73956..dc61d3fb 100644
--- a/dist/radio/index.wxml
+++ b/dist/radio/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-radio custom-class">
   <view class="van-radio__input">
     <radio-group bindchange="onChange">
@@ -9,7 +11,7 @@
       />
     </radio-group>
     <van-icon
-      class="{{ iconClass }}"
+      class="{{ utils.bem('radio__icon', { disabled, checked: !disabled && name === value, check: !disabled && name !== value }) }}"
       custom-class="icon-class"
       color="{{ value === name ? checkedColor : '' }}"
       name="{{ value === name ? 'checked' : 'check' }}"
diff --git a/dist/stepper/index.js b/dist/stepper/index.js
index 2230ff74..56a366f9 100644
--- a/dist/stepper/index.js
+++ b/dist/stepper/index.js
@@ -38,12 +38,20 @@ VantComponent({
       });
     }
   },
+  data: {
+    focus: false
+  },
   created: function created() {
     this.set({
       value: this.range(this.data.value)
     });
   },
   methods: {
+    onFocus: function onFocus() {
+      this.setData({
+        focus: true
+      });
+    },
     // limit value range
     range: function range(value) {
       return Math.max(Math.min(this.data.max, value), this.data.min);
diff --git a/dist/stepper/index.wxml b/dist/stepper/index.wxml
index b7363152..b31068f4 100644
--- a/dist/stepper/index.wxml
+++ b/dist/stepper/index.wxml
@@ -3,14 +3,17 @@
     class="minus-class van-stepper__minus {{ minusDisabled ? 'van-stepper__minus--disabled' : '' }}"
     bind:tap="onMinus"
   />
-  <input
-    type="{{ integer ? 'number' : 'digit' }}"
-    class="input-class van-stepper__input {{ disabled || disableInput ? 'van-stepper__input--disabled' : '' }}"
-    value="{{ value }}"
-    disabled="{{ disabled || disableInput }}"
-    bindinput="onInput"
-    bind:blur="onBlur"
-  />
+  <view class="input-class van-stepper__input-wrapper {{ disabled || disableInput ? 'van-stepper__input-wrapper--disabled' : '' }}" bindtap="onFocus">
+    <input
+      type="{{ integer ? 'number' : 'digit' }}"
+      class="van-stepper__input"
+      value="{{ value }}"
+      focus="{{ focus }}"
+      disabled="{{ disabled || disableInput }}"
+      bindinput="onInput"
+      bind:blur="onBlur"
+    />
+  </view>
   <view
     class="plus-class van-stepper__plus {{ plusDisabled ? 'van-stepper__plus--disabled' : '' }}"
     bind:tap="onPlus"
diff --git a/dist/stepper/index.wxss b/dist/stepper/index.wxss
index 1596b848..167b3f41 100644
--- a/dist/stepper/index.wxss
+++ b/dist/stepper/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-stepper{font-size:0}.van-stepper__input,.van-stepper__minus,.van-stepper__plus{display:inline-block;vertical-align:middle;background-color:#fff}.van-stepper__minus,.van-stepper__plus{width:40px;height:30px;box-sizing:border-box;border:1px solid #eee;position:relative;padding:5px}.van-stepper__minus::before,.van-stepper__plus::before{width:9px;height:1px}.van-stepper__minus::after,.van-stepper__plus::after{width:1px;height:9px}.van-stepper__minus::after,.van-stepper__minus::before,.van-stepper__plus::after,.van-stepper__plus::before{content:'';position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;background-color:#7d7e80}.van-stepper__minus:active,.van-stepper__plus:active{background-color:#e8e8e8}.van-stepper__minus--disabled,.van-stepper__plus--disabled{background-color:#f8f8f8}.van-stepper__minus--disabled::after,.van-stepper__minus--disabled::before,.van-stepper__plus--disabled::after,.van-stepper__plus--disabled::before{background-color:#c9c9c9}.van-stepper__minus--disabled:active,.van-stepper__plus--disabled:active{background-color:#f8f8f8}.van-stepper__minus{border-radius:2px 0 0 2px}.van-stepper__minus::after{display:none}.van-stepper__plus{border-radius:0 2px 2px 0}.van-stepper__input{width:33px;height:26px;padding:1px;min-height:0;border:1px solid #eee;border-width:1px 0;border-radius:0;box-sizing:content-box;color:#7d7e80;font-size:14px;text-align:center;-webkit-appearance:none}.van-stepper__input--disabled{color:#c9c9c9;background-color:#f8f8f8}
\ No newline at end of file
+@import '../common/index.wxss';.van-stepper{font-size:0}.van-stepper__input-wrapper,.van-stepper__minus,.van-stepper__plus{display:inline-block;vertical-align:middle;background-color:#fff}.van-stepper__minus,.van-stepper__plus{position:relative;width:40px;height:30px;padding:5px;border:1px solid #eee;box-sizing:border-box}.van-stepper__minus::before,.van-stepper__plus::before{width:9px;height:1px}.van-stepper__minus::after,.van-stepper__plus::after{width:1px;height:9px}.van-stepper__minus::after,.van-stepper__minus::before,.van-stepper__plus::after,.van-stepper__plus::before{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:#7d7e80;content:''}.van-stepper__minus:active,.van-stepper__plus:active{background-color:#e8e8e8}.van-stepper__minus--disabled,.van-stepper__plus--disabled{background-color:#f8f8f8}.van-stepper__minus--disabled::after,.van-stepper__minus--disabled::before,.van-stepper__plus--disabled::after,.van-stepper__plus--disabled::before{background-color:#c9c9c9}.van-stepper__minus--disabled:active,.van-stepper__plus--disabled:active{background-color:#f8f8f8}.van-stepper__minus{border-radius:2px 0 0 2px}.van-stepper__minus::after{display:none}.van-stepper__plus{border-radius:0 2px 2px 0}.van-stepper__input-wrapper{position:relative;width:35px;height:30px;padding:1px;font-size:14px;color:#7d7e80;text-align:center;border:1px solid #eee;border-width:1px 0;border-radius:0;box-sizing:border-box}.van-stepper__input-wrapper--disabled{color:#c9c9c9;background-color:#f8f8f8}.van-stepper__input{position:absolute;top:50%;left:50%;width:100%;min-height:0;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-appearance:none;appearance:none}
\ No newline at end of file
diff --git a/dist/submit-bar/index.js b/dist/submit-bar/index.js
index 738eecd5..6c47d5fe 100644
--- a/dist/submit-bar/index.js
+++ b/dist/submit-bar/index.js
@@ -1,5 +1,7 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 VantComponent({
+  mixins: [iphonex],
   classes: ['bar-class', 'price-class', 'button-class'],
   props: {
     tip: null,
@@ -16,10 +18,6 @@ VantComponent({
     buttonType: {
       type: String,
       value: 'danger'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
   computed: {
@@ -32,14 +30,6 @@ VantComponent({
     tipStr: function tipStr() {
       var tip = this.data.tip;
       return typeof tip === 'string' ? tip : '';
-    },
-    barClass: function barClass() {
-      var _this$data = this.data,
-          isIPhoneX = _this$data.isIPhoneX,
-          safeAreaInsetBottom = _this$data.safeAreaInsetBottom;
-      return this.classNames('van-submit-bar__bar', 'bar-class', {
-        'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
-      });
     }
   },
   methods: {
diff --git a/dist/submit-bar/index.wxml b/dist/submit-bar/index.wxml
index a2bc998d..42fc9516 100644
--- a/dist/submit-bar/index.wxml
+++ b/dist/submit-bar/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view class="van-submit-bar custom-class">
   <slot name="top" />
 
@@ -5,7 +7,7 @@
     {{ tipStr }}<slot name="tip" />
   </view>
 
-  <view class="{{ barClass }}">
+  <view class="bar-class {{ utils.bem('submit-bar__bar', { safe: safeAreaInsetBottom && isIPhoneX }) }}">
     <slot />
     <view class="van-submit-bar__text">
       <block wx:if="{{ hasPrice }}">
diff --git a/dist/switch-cell/index.js b/dist/switch-cell/index.js
index a8bb6c41..b4dba70b 100644
--- a/dist/switch-cell/index.js
+++ b/dist/switch-cell/index.js
@@ -7,9 +7,11 @@ VantComponent({
     checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     size: {
       type: String,
-      value: '26px'
+      value: '24px'
     }
   },
   watch: {
diff --git a/dist/switch-cell/index.wxml b/dist/switch-cell/index.wxml
index 273d0f6d..38877c26 100644
--- a/dist/switch-cell/index.wxml
+++ b/dist/switch-cell/index.wxml
@@ -9,6 +9,8 @@
     checked="{{ checked }}"
     loading="{{ loading }}"
     disabled="{{ disabled }}"
+    active-color="{{ activeColor }}"
+    inactive-color="{{ inactiveColor }}"
     custom-class="van-switch-cell__switch"
     bind:change="onChange"
   />
diff --git a/dist/switch-cell/index.wxss b/dist/switch-cell/index.wxss
index 154d9ab7..2ad612ee 100644
--- a/dist/switch-cell/index.wxss
+++ b/dist/switch-cell/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-switch-cell{padding-top:8px;padding-bottom:8px}.van-switch-cell__switch{vertical-align:middle}
\ No newline at end of file
+@import '../common/index.wxss';.van-switch-cell{padding-top:9px;padding-bottom:9px}.van-switch-cell__switch{vertical-align:middle}
\ No newline at end of file
diff --git a/dist/switch/index.js b/dist/switch/index.js
index 3e74eacc..b1035a16 100644
--- a/dist/switch/index.js
+++ b/dist/switch/index.js
@@ -20,18 +20,6 @@ VantComponent({
       });
     }
   },
-  computed: {
-    classes: function classes() {
-      return this.classNames('van-switch', {
-        'van-switch--on': this.data.checked,
-        'van-switch--disabled': this.data.disabled
-      });
-    },
-    style: function style() {
-      var backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
-      return "font-size: " + this.data.size + "; " + (backgroundColor ? "background-color: " + backgroundColor : '');
-    }
-  },
   created: function created() {
     this.set({
       value: this.data.checked
diff --git a/dist/switch/index.wxml b/dist/switch/index.wxml
index 6d0a3287..e215473c 100644
--- a/dist/switch/index.wxml
+++ b/dist/switch/index.wxml
@@ -1,6 +1,8 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  style="{{ style }}"
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
+  style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">
diff --git a/dist/switch/index.wxss b/dist/switch/index.wxss
index 7a3bd16d..653db340 100644
--- a/dist/switch/index.wxss
+++ b/dist/switch/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-switch{height:1em;width:1.8em;display:inline-block;position:relative;border-radius:1em;box-sizing:content-box;border:1px solid rgba(0,0,0,.1);background-color:#fff;transition:background-color .3s}.van-switch__node{top:0;left:0;z-index:1;width:1em;height:1em;transition:.3s;position:absolute;border-radius:100%;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05)}.van-switch__loading{top:25%;left:25%;position:absolute!important}.van-switch--on{background-color:#1989fa}.van-switch--on .van-switch__node{-webkit-transform:translateX(.8em);transform:translateX(.8em)}.van-switch--disabled{opacity:.4}
\ No newline at end of file
+@import '../common/index.wxss';.van-switch{display:inline-block;position:relative;width:2em;height:1em;border:1px solid rgba(0,0,0,.1);border-radius:1em;box-sizing:content-box;background-color:#fff;transition:background-color .3s}.van-switch__node{top:0;left:0;position:absolute;border-radius:100%;width:1em;height:1em;z-index:1;transition:.3s;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);background-color:#fff}.van-switch__loading{top:25%;left:25%;position:absolute!important}.van-switch--on{background-color:#1989fa}.van-switch--on .van-switch__node{-webkit-transform:translateX(1em);transform:translateX(1em)}.van-switch--disabled{opacity:.4}
\ No newline at end of file
diff --git a/dist/tabbar-item/index.json b/dist/tabbar-item/index.json
index 0a336c08..16f174c5 100644
--- a/dist/tabbar-item/index.json
+++ b/dist/tabbar-item/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-icon": "../icon/index"
+    "van-icon": "../icon/index",
+    "van-info": "../info/index"
   }
 }
diff --git a/dist/tabbar-item/index.wxml b/dist/tabbar-item/index.wxml
index e1da8a18..6f7251f1 100644
--- a/dist/tabbar-item/index.wxml
+++ b/dist/tabbar-item/index.wxml
@@ -6,14 +6,20 @@
     <van-icon
       wx:if="{{ icon }}"
       name="{{ icon }}"
-      info="{{ info }}"
       customStyle="display: block"
     />
     <block wx:else>
-      <slot wx:if="{{ active }}" name="icon-active" />
+      <slot
+        wx:if="{{ active }}"
+        name="icon-active"
+      />
       <slot wx:else name="icon" />
-      <view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
     </block>
+    <van-info
+      wx:if="{{ info !== null }}"
+      info="{{ info }}"
+      custom-style="margin-top: 2px"
+    />
   </view>
   <view class="van-tabbar-item__text">
     <slot />
diff --git a/dist/tabbar-item/index.wxss b/dist/tabbar-item/index.wxss
index 4f5c143a..6d480ee7 100644
--- a/dist/tabbar-item/index.wxss
+++ b/dist/tabbar-item/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-tabbar-item{color:#7d7e80;height:100%;display:-webkit-flex;display:flex;line-height:1;font-size:12px;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.van-tabbar-item__icon{font-size:18px;margin-bottom:5px;position:relative}.van-tabbar-item__icon .van-icon{display:block}.van-tabbar-item__icon .van-icon__info{color:#fff;left:100%;top:-.5em;font-size:.6em;padding:0 .25em;text-align:center;min-width:1.4em;line-height:1.4;position:absolute;border-radius:.6em;box-sizing:border-box;background-color:#f44;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif}.van-tabbar-item__icon--dot::after{top:0;right:-8px;width:8px;height:8px;content:' ';position:absolute;border-radius:100%;background-color:#f44}.van-tabbar-item__icon image{width:50px;height:18px}.van-tabbar-item--active{color:#1989fa}
\ No newline at end of file
+@import '../common/index.wxss';:host{-webkit-flex:1;flex:1}.van-tabbar-item{color:#7d7e80;height:100%;display:-webkit-flex;display:flex;line-height:1;font-size:12px;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center}.van-tabbar-item__icon{font-size:18px;margin-bottom:5px;position:relative}.van-tabbar-item__icon--dot::after{top:0;right:-8px;width:8px;height:8px;content:' ';position:absolute;border-radius:100%;background-color:#f44}.van-tabbar-item__icon image{width:30px;height:18px;display:block}.van-tabbar-item--active{color:#1989fa}
\ No newline at end of file
diff --git a/dist/tabbar/index.js b/dist/tabbar/index.js
index aed91f0a..b14afdd6 100644
--- a/dist/tabbar/index.js
+++ b/dist/tabbar/index.js
@@ -1,5 +1,7 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 VantComponent({
+  mixins: [iphonex],
   relation: {
     name: 'tabbar-item',
     type: 'descendant',
@@ -31,28 +33,12 @@ VantComponent({
     zIndex: {
       type: Number,
       value: 1
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
   data: {
     items: [],
     currentActive: -1
   },
-  computed: {
-    tabbarClass: function tabbarClass() {
-      var _this$data = this.data,
-          fixed = _this$data.fixed,
-          isIPhoneX = _this$data.isIPhoneX,
-          safeAreaInsetBottom = _this$data.safeAreaInsetBottom;
-      return this.classNames('custom-class', 'van-tabbar', 'van-hairline--top-bottom', {
-        'van-tabbar--fixed': fixed,
-        'van-tabbar--safe': isIPhoneX && safeAreaInsetBottom
-      });
-    }
-  },
   watch: {
     active: function active(_active) {
       this.set({
diff --git a/dist/tabbar/index.wxml b/dist/tabbar/index.wxml
index b8eb8e47..f05228e2 100644
--- a/dist/tabbar/index.wxml
+++ b/dist/tabbar/index.wxml
@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="{{ tabbarClass }}"
+  class="custom-class van-hairline--top-bottom {{ utils.bem('tabbar', { fixed, safe: isIPhoneX && safeAreaInsetBottom }) }}"
   style="{{ zIndex ? 'z-index: ' + zIndex : '' }}"
 >
   <slot />
diff --git a/dist/tag/index.js b/dist/tag/index.js
index 17510a08..eb24754d 100644
--- a/dist/tag/index.js
+++ b/dist/tag/index.js
@@ -13,23 +13,24 @@ VantComponent({
     mark: Boolean,
     color: String,
     plain: Boolean,
-    round: Boolean
+    round: Boolean,
+    textColor: String
   },
   computed: {
-    classes: function classes() {
-      var data = this.data;
-      return this.classNames('van-tag', {
-        'van-tag--mark': data.mark,
-        'van-tag--plain': data.plain,
-        'van-tag--round': data.round,
-        ["van-tag--" + data.size]: data.size,
-        'van-hairline--surround': data.plain
-      });
-    },
     style: function style() {
       var color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
       var key = this.data.plain ? 'color' : 'background-color';
-      return key + ": " + color;
+      var style = {
+        [key]: color
+      };
+
+      if (this.data.textColor) {
+        style.color = this.data.textColor;
+      }
+
+      return Object.keys(style).map(function (key) {
+        return key + ": " + style[key];
+      }).join(';');
     }
   }
 });
\ No newline at end of file
diff --git a/dist/tag/index.wxml b/dist/tag/index.wxml
index 69e74b16..e66580cd 100644
--- a/dist/tag/index.wxml
+++ b/dist/tag/index.wxml
@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  class="custom-class {{ classes }}"
+  class="custom-class {{ utils.bem('tag', [size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
   style="{{ style }}"
 >
   <slot />
diff --git a/dist/toast/index.wxss b/dist/toast/index.wxss
index f04fefff..c6a02470 100644
--- a/dist/toast/index.wxss
+++ b/dist/toast/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-toast{display:-webkit-flex;display:flex;color:#fff;font-size:14px;line-height:20px;border-radius:4px;word-break:break-all;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;background-color:rgba(0,0,0,.7)}.van-toast__container{position:fixed;top:50%;left:50%;max-width:70%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast--text{padding:8px 12px;min-width:96px}.van-toast--icon{width:90px;padding:15px;min-height:90px}.van-toast--icon .van-toast__icon{font-size:50px}.van-toast--icon .van-toast__text{padding-top:5px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}
\ No newline at end of file
+@import '../common/index.wxss';.van-toast{display:-webkit-flex;display:flex;color:#fff;font-size:14px;line-height:20px;border-radius:4px;word-break:break-all;-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:center;justify-content:center;box-sizing:content-box;background-color:rgba(0,0,0,.7)}.van-toast__container{position:fixed;top:50%;left:50%;max-width:70%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.van-toast--text{padding:8px 12px;min-width:96px}.van-toast--icon{width:90px;padding:15px;min-height:90px}.van-toast--icon .van-toast__icon{font-size:48px}.van-toast--icon .van-toast__text{padding-top:5px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translate(0,-30vh);transform:translate(0,-30vh)}.van-toast--bottom{-webkit-transform:translate(0,30vh);transform:translate(0,30vh)}
\ No newline at end of file
diff --git a/dist/tree-select/index.js b/dist/tree-select/index.js
index da1dbdd0..5840e5e3 100644
--- a/dist/tree-select/index.js
+++ b/dist/tree-select/index.js
@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 var ITEM_HEIGHT = 44;
 VantComponent({
+  classes: ['main-item-class', 'content-item-class', 'main-active-class', 'content-active-class', 'main-disabled-class', 'content-disabled-class'],
   props: {
     items: Array,
     mainActiveIndex: {
@@ -8,8 +9,7 @@ VantComponent({
       value: 0
     },
     activeId: {
-      type: Number,
-      value: 0
+      type: [Number, String]
     },
     maxHeight: {
       type: Number,
@@ -44,9 +44,13 @@ VantComponent({
     // 当一个导航被点击时
     onClickNav: function onClickNav(event) {
       var index = event.currentTarget.dataset.index;
-      this.$emit('click-nav', {
-        index: index
-      });
+      var item = this.data.items[index];
+
+      if (!item.disabled) {
+        this.$emit('click-nav', {
+          index: index
+        });
+      }
     },
     // 更新子项列表
     updateSubItems: function updateSubItems() {
diff --git a/dist/tree-select/index.json b/dist/tree-select/index.json
index 0a336c08..d2a8d90e 100644
--- a/dist/tree-select/index.json
+++ b/dist/tree-select/index.json
@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-icon": "../icon/index"
+    "van-icon": "../icon/index",
+    "van-cell": "../cell/index"
   }
 }
diff --git a/dist/tree-select/index.wxml b/dist/tree-select/index.wxml
index 8260da0b..124d5d6a 100644
--- a/dist/tree-select/index.wxml
+++ b/dist/tree-select/index.wxml
@@ -1,3 +1,5 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
   class="van-tree-select"
   style="height: {{ mainHeight }}px"
@@ -6,7 +8,7 @@
     <view
       wx:for="{{ items }}"
       wx:key="index"
-      class="van-tree-select__nitem van-ellipsis {{ mainActiveIndex === index ? 'van-tree-select__nitem--active' : '' }}"
+      class="van-ellipsis main-item-class {{ utils.bem('tree-select__nitem', { active: mainActiveIndex === index, disabled: item.disabled }) }} {{ mainActiveIndex === index ? 'main-active-class' : '' }} {{ item.disabled ? 'main-disabled-class' : '' }}"
       data-index="{{ index }}"
       bind:tap="onClickNav"
     >
@@ -21,14 +23,15 @@
     <view
       wx:for="{{ subItems }}"
       wx:key="item.id"
-      class="van-tree-select__item van-ellipsis {{ activeId === item.id ? 'van-tree-select__item--active' : '' }} {{ item.disabled ? 'van-tree-select__item--disabled' : '' }}"
+      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: activeId === item.id, disabled: item.disabled }) }} {{ activeId === item.id ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
       data-item="{{ item }}"
       bind:tap="onSelectItem"
     >
       {{ item.text }}
       <van-icon
         wx:if="{{ activeId === item.id }}"
-        name="success"
+        name="checked"
+        size="16px"
         class="van-tree-select__selected"
       />
     </view>
diff --git a/dist/tree-select/index.wxss b/dist/tree-select/index.wxss
index 54b766de..358c8e05 100644
--- a/dist/tree-select/index.wxss
+++ b/dist/tree-select/index.wxss
@@ -1 +1 @@
-@import '../common/index.wxss';.van-tree-select{-webkit-user-select:none;user-select:none;position:relative;font-size:16px}.van-tree-select__nav{width:35%;position:absolute;left:0;top:0;bottom:0;background-color:#fff}.van-tree-select__nitem{line-height:44px;padding:0 15px;background-color:#fff}.van-tree-select__nitem--active,.van-tree-select__nitem:active{background-color:#f8f8f8}.van-tree-select__nitem--active{font-weight:500}.van-tree-select__content{width:65%;padding:0 15px;margin-left:35%;box-sizing:border-box}.van-tree-select__item{position:relative;line-height:44px;padding-left:5px;padding-right:18px}.van-tree-select__item--active,.van-tree-select__item:active{color:#f44}.van-tree-select__item--disabled,.van-tree-select__item--disabled:active{color:#c9c9c9}.van-tree-select__selected{float:right;position:absolute;right:0;top:0;bottom:0;line-height:inherit}
\ No newline at end of file
+@import '../common/index.wxss';.van-tree-select{position:relative;font-size:14px;-webkit-user-select:none;user-select:none}.van-tree-select__nav{position:absolute;top:0;bottom:0;left:0;width:35%;min-width:120px;background-color:#fafafa}.van-tree-select__nitem{position:relative;padding:0 9px 0 15px;line-height:44px}.van-tree-select__nitem--active::after,.van-tree-select__nitem:active::after{position:absolute;top:0;bottom:0;left:0;width:3.6px;background-color:#f44;content:''}.van-tree-select__nitem--active{font-weight:700;background-color:#fff}.van-tree-select__nitem--disabled{color:#999}.van-tree-select__nitem--disabled:active::after{display:none}.van-tree-select__content{width:65%;padding-left:15px;margin-left:35%;background-color:#fff;box-sizing:border-box}.van-tree-select__item{position:relative;font-weight:700;line-height:44px}.van-tree-select__item--active,.van-tree-select__item:active{color:#f44}.van-tree-select__item--disabled,.van-tree-select__item--disabled:active{color:#999}.van-tree-select__selected{position:absolute;top:0;right:15px;bottom:0;height:24px;margin:auto 0;line-height:24px}
\ No newline at end of file
diff --git a/dist/wxs/array.wxs b/dist/wxs/array.wxs
new file mode 100644
index 00000000..610089cd
--- /dev/null
+++ b/dist/wxs/array.wxs
@@ -0,0 +1,5 @@
+function isArray(array) {
+  return array && array.constructor === 'Array';
+}
+
+module.exports.isArray = isArray;
diff --git a/dist/wxs/bem.wxs b/dist/wxs/bem.wxs
new file mode 100644
index 00000000..93b2777b
--- /dev/null
+++ b/dist/wxs/bem.wxs
@@ -0,0 +1,38 @@
+var array = require('./array.wxs');
+var object = require('./object.wxs');
+var PREFIX = 'van-';
+
+function join(name, mods) {
+  name = PREFIX + name;
+  mods = mods.map(function(mod) {
+    return name + '--' + mod;
+  });
+  mods.unshift(name);
+  return mods.join(' ');
+}
+
+function traversing(mods, conf) {
+  if (!conf) {
+    return;
+  }
+
+  if (typeof conf === 'string' || typeof conf === 'number') {
+    mods.push(conf);
+  } else if (array.isArray(conf)) {
+    conf.forEach(function(item) {
+      traversing(mods, item);
+    });
+  } else if (typeof conf === 'object') {
+    object.keys(conf).forEach(function(key) {
+      conf[key] && mods.push(key);
+    });
+  }
+}
+
+function bem(name, conf) {
+  var mods = [];
+  traversing(mods, conf);
+  return join(name, mods);
+}
+
+module.exports.bem = bem;
diff --git a/dist/wxs/memoize.wxs b/dist/wxs/memoize.wxs
new file mode 100644
index 00000000..261ae67d
--- /dev/null
+++ b/dist/wxs/memoize.wxs
@@ -0,0 +1,54 @@
+/**
+ * Simple memoize
+ * wxs doesn't support fn.apply, so this memoize only support up to 2 args
+ */
+
+function isPrimitive(value) {
+  var type = typeof value;
+  return (
+    type === 'boolean' ||
+    type === 'number' ||
+    type === 'string' ||
+    type === 'undefined' ||
+    value === null
+  );
+}
+
+// mock simple fn.call in wxs
+function call(fn, args) {
+  if (args.length === 2) {
+    return fn(args[0], args[1]);
+  }
+
+  if (args.length === 1) {
+    return fn(args[0]);
+  }
+
+  return fn();
+}
+
+function serializer(args) {
+  if (args.length === 1 && isPrimitive(args[0])) {
+    return args[0];
+  }
+  var obj = {};
+  for (var i = 0; i < args.length; i++) {
+    obj['key' + i] = args[i];
+  }
+  return JSON.stringify(obj);
+}
+
+function memoize(fn) {
+  var cache = {};
+
+  return function() {
+    var key = serializer(arguments);
+    if (cache[key] === undefined) {
+      cache[key] = call(fn, arguments);
+    }
+
+    return cache[key];
+  };
+}
+
+module.exports.memoize = memoize;
diff --git a/dist/wxs/object.wxs b/dist/wxs/object.wxs
new file mode 100644
index 00000000..e0771077
--- /dev/null
+++ b/dist/wxs/object.wxs
@@ -0,0 +1,13 @@
+/* eslint-disable */
+var REGEXP = getRegExp('{|}|"', 'g');
+
+function keys(obj) {
+  return JSON.stringify(obj)
+    .replace(REGEXP, '')
+    .split(',')
+    .map(function(item) {
+      return item.split(':')[0];
+    });
+}
+
+module.exports.keys = keys;
diff --git a/dist/wxs/utils.wxs b/dist/wxs/utils.wxs
new file mode 100644
index 00000000..5deffee0
--- /dev/null
+++ b/dist/wxs/utils.wxs
@@ -0,0 +1,12 @@
+var bem = require('./bem.wxs').bem;
+var memoize = require('./memoize.wxs').memoize;
+
+function isSrc(url) {
+  return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
+}
+
+module.exports = {
+  bem: memoize(bem),
+  isSrc: isSrc,
+  memoize: memoize
+};