Merge branch 'dev' of https://github.com/youzan/vant-weapp into dev

example/pages/button/index.wxml

@@ -34,5 +34,4 @@
     <van-button size="small" class="demo-margin-right">小型按钮</van-button>
     <van-button size="mini">迷你按钮</van-button>
   </demo-block>
-
 </demo-section>

packages/action-sheet/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
+  mixins: [iphonex],
+
   props: {
     show: Boolean,
     title: String,
@@ -20,10 +23,6 @@ VantComponent({
     closeOnClickOverlay: {
       type: Boolean,
       value: true
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
 

packages/button/index.ts

@@ -24,21 +24,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    classes(): string {
-      const { type, size, block, plain, round, square, loading, disabled } = this.data;
-      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() {
       if (!this.data.disabled && !this.data.loading) {

packages/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 }}"

packages/card/README.md

@@ -24,7 +24,8 @@
 ```
 
 #### 高级用法
-可以通过具名`slot`添加定制内容
+
+可以通过插槽添加定制内容
 
 ```html
 <van-card
@@ -47,7 +48,7 @@
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
 | thumb | 左侧图片 | `String` | - |
-| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | `String` | `scaleToFill` |
+| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | `String` | `aspectFit` |
 | title | 标题 | `String` | - |
 | desc | 描述 | `String` | - |
 | tag | 标签 | `String` | - |

packages/card/index.ts

@@ -26,7 +26,7 @@ VantComponent({
     originPrice: String,
     thumbMode: {
       type: String,
-      value: 'scaleToFill'
+      value: 'aspectFit'
     },
     currency: {
       type: String,

packages/cell/index.ts

@@ -30,24 +30,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    cellClass(): string {
-      const { data } = this;
-      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(): string {
-      const { titleWidth } = this.data;
-      return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : '';
-    }
-  },
-
   methods: {
     onClick(event: Weapp.Event) {
       this.$emit('click', event.detail);

packages/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 }}">

packages/checkbox/index.ts

@@ -24,18 +24,6 @@ VantComponent({
   },
 
   computed: {
-    iconClass(): string {
-      const { disabled, value, shape } = this.data;
-      return this.classNames(
-        'van-checkbox__icon',
-        `van-checkbox__icon--${shape}`,
-        {
-          'van-checkbox__icon--disabled': disabled,
-          'van-checkbox__icon--checked': value
-        }
-      );
-    },
-
     iconStyle(): string {
       const { value, disabled, checkedColor } = this.data;
       if (checkedColor && value && !disabled) {

packages/checkbox/index.wxml

@@ -1,10 +1,12 @@
+<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 }}"
+      class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
       style="{{ iconStyle }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"

packages/col/index.ts

@@ -15,16 +15,6 @@ VantComponent({
     style: ''
   },
 
-  computed: {
-    classes(): string {
-      const { span, offset } = this.data;
-      return this.classNames('van-col', {
-        [`van-col--${span}`]: span,
-        [`van-col--offset-${offset}`]: offset
-      });
-    }
-  },
-
   methods: {
     setGutter(gutter: number) {
       const padding = `${gutter / 2}px`;

packages/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 />

packages/collapse-item/index.ts

@@ -12,11 +12,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,
@@ -33,16 +33,6 @@ VantComponent({
     expanded: false
   },
 
-  computed: {
-    titleClass() {
-      const { disabled, expanded } = this.data;
-      return this.classNames('van-collapse-item__title', {
-        'van-collapse-item__title--disabled': disabled,
-        'van-collapse-item__title--expanded': expanded
-      });
-    }
-  },
-
   methods: {
     updateExpanded() {
       if (!this.parent) {

packages/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"

packages/collapse/README.md

@@ -32,6 +32,11 @@
 Page({
   data: {
     activeNames: ['1']
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail
+    });
   }
 });
 ```
@@ -57,6 +62,11 @@ Page({
 Page({
   data: {
     activeName: '1'
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail
+    });
   }
 });
 ```
@@ -75,6 +85,19 @@ Page({
 </van-collapse>
 ```
 
+``` javascript
+Page({
+  data: {
+    activeName: ['1']
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail
+    });
+  }
+});
+```
+
 
 
 ### Collapse API

packages/common/class-names.ts

@@ -1,29 +0,0 @@
-const hasOwn = {}.hasOwnProperty;
-
-export function classNames(): string {
-  const classes = [];
-
-  for (let i = 0; i < arguments.length; i++) {
-    const arg = arguments[i];
-    if (!arg) continue;
-
-    const argType = typeof arg;
-
-    if (argType === 'string' || argType === 'number') {
-      classes.push(arg);
-    } else if (Array.isArray(arg) && arg.length) {
-      const inner = classNames.apply(null, arg);
-      if (inner) {
-        classes.push(inner);
-      }
-    } else if (argType === 'object') {
-      for (const key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes.push(key);
-        }
-      }
-    }
-  }
-
-  return classes.join(' ');
-};

packages/common/utils.wxs

@@ -1,5 +0,0 @@
-function isSrc(url) {
-  return url.indexOf('http') === 0 || url.indexOf('data:image') === 0;
-}
-
-module.exports.isSrc = isSrc;

packages/datetime-picker/README.md

@@ -13,6 +13,8 @@
 
 #### 选择完整时间
 
+`value` 为时间戳
+
 ```html
 <van-datetime-picker
   type="datetime"
@@ -43,6 +45,8 @@ Page({
 
 #### 选择日期（年月日）
 
+`value` 为时间戳
+
 ```html
 <van-datetime-picker
   type="date"
@@ -69,6 +73,8 @@ Page({
 
 #### 选择日期（年月）
 
+`value` 为时间戳
+
 ```html
 <van-datetime-picker
   type="year-month"
@@ -95,6 +101,8 @@ Page({
 
 #### 选择时间
 
+`value` 为字符串
+
 ```html
 <van-datetime-picker
   type="time"
@@ -125,7 +133,8 @@ Page({
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|------|------|------|
-| type | 类型，可选值为 `date` <br> `time` `year-month` | `String` | `datetime` |
+| value | 当前选中值 | `String | Number` | - |
+| type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | `String` | `datetime` |
 | min-date | 可选的最小时间，精确到分钟 | `Number` | 十年前 |
 | max-date | 可选的最大时间，精确到分钟 | `Number` | 十年后 |
 | min-hour | 可选的最小小时，针对 time 类型 | `Number` | `0` |

packages/dialog/index.ts

@@ -95,7 +95,9 @@ VantComponent({
         this.close();
       }
       this.$emit('close', action);
-      this.$emit(action);
+      
+      //把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
+      this.$emit(action, { dialog: this });
 
       const callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
       if (callback) {

packages/field/README.md

@@ -164,6 +164,7 @@ Page({
 | adjust-position | 键盘弹起时，是否自动上推页面 | `Boolean` | `true` |
 | use-icon-slot | 是否使用 icon slot  | `Boolean` | `false` |
 | use-button-slot | 是否使用 button slot  | `Boolean` | `false` |
+| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | `Boolean` | `true` |
 
 ### Event
 

packages/field/index.less

@@ -37,6 +37,10 @@
     &--right {
       text-align: right;
     }
+
+    &--error {
+      color: @red;
+    }
   }
 
   &__clear-root {
@@ -78,8 +82,4 @@
     font-size: 12px;
     text-align: left;
   }
-
-  &--error {
-    color: @red;
-  }
 }

packages/field/index.ts

@@ -29,6 +29,10 @@ VantComponent({
     customStyle: String,
     useIconSlot: Boolean,
     useButtonSlot: Boolean,
+    showConfirmBar: {
+      type: Boolean,
+      value: true
+    },
     placeholderStyle: String,
     adjustPosition: {
       type: Boolean,
@@ -60,18 +64,6 @@ VantComponent({
     showClear: false
   },
 
-  computed: {
-    inputClass(): string {
-      const { data } = this;
-      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() {
     this.focused = false;
   },

packages/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 }}"

packages/goods-action/index.ts

@@ -1,19 +1,6 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
-  props: {
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-
-  computed: {
-    rootClass() {
-      const { safeAreaInsetBottom, isIPhoneX } = this.data;
-      return this.classNames('van-goods-action', 'custom-class', {
-        [`van-goods-action--safe`]: isIPhoneX && safeAreaInsetBottom
-      });
-    }
-  }
+  mixins: [iphonex]
 });

packages/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>

packages/icon/index.wxml

@@ -1,3 +1,5 @@
+<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 }}"
@@ -14,5 +16,3 @@
     src="{{ name }}"
   />
 </view>
-
-<wxs src="../common/utils.wxs" module="utils" />

packages/mixins/basic.ts

@@ -1,24 +1,5 @@
-import { classNames } from '../common/class-names';
-
 export const basic = Behavior({
-  created() {
-    wx.getSystemInfo({
-      success: ({ model, screenHeight }) => {
-        const isIphoneX = /iphone x/i.test(model);
-        const isIphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
-
-        if (isIphoneX || isIphoneNew) {
-          this.set({
-            isIPhoneX: true
-          });
-        }
-      }
-    });
-  },
-
   methods: {
-    classNames,
-
     $emit() {
       this.triggerEvent.apply(this, arguments);
     },

packages/mixins/iphonex.ts

@@ -0,0 +1,34 @@
+let isIPhoneX = null;
+
+function getIsIPhoneX() {
+  return new Promise((resolve, reject) => {
+    if (isIPhoneX !== null) {
+      resolve(isIPhoneX);
+    } else {
+      wx.getSystemInfo({
+        success: ({ model, screenHeight }) => {
+          const iphoneX = /iphone x/i.test(model);
+          const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812;
+          isIPhoneX = iphoneX || iphoneNew;
+          resolve(isIPhoneX);
+        },
+        fail: reject
+      });
+    }
+  });
+}
+
+export const iphonex = Behavior({
+  properties: {
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  created() {
+    getIsIPhoneX().then(isIPhoneX => {
+      this.set({ isIPhoneX });
+    });
+  }
+});

packages/popup/index.ts

@@ -1,8 +1,9 @@
 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,
@@ -23,20 +24,6 @@ VantComponent({
     position: {
       type: String,
       value: 'center'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
-    }
-  },
-
-  computed: {
-    popupClass() {
-      const { position, safeAreaInsetBottom, isIPhoneX } = this.data;
-      return this.classNames('custom-class', 'van-popup', {
-        [`van-popup--${position}`]: position,
-        [`van-popup--safe`]: isIPhoneX && safeAreaInsetBottom && position === 'bottom'
-      });
     }
   },
 

packages/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"
 >

packages/radio/index.ts

@@ -19,17 +19,6 @@ VantComponent({
     checkedColor: String
   },
 
-  computed: {
-    iconClass(): string {
-      const { disabled, name, value } = this.data;
-      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(value) {
       const instance = this.getRelationNodes('../radio-group/index')[0] || this;

packages/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' }}"

packages/submit-bar/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
+  mixins: [iphonex],
+
   classes: [
     'bar-class',
     'price-class',
@@ -22,10 +25,6 @@ VantComponent({
     buttonType: {
       type: String,
       value: 'danger'
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
 
@@ -41,13 +40,6 @@ VantComponent({
     tipStr() {
       const { tip } = this.data;
       return typeof tip === 'string' ? tip : '';
-    },
-
-    barClass() {
-      const { isIPhoneX, safeAreaInsetBottom } = this.data;
-      return this.classNames('van-submit-bar__bar', 'bar-class', {
-        'van-submit-bar__bar--safe': safeAreaInsetBottom && isIPhoneX
-      });
     }
   },
 

packages/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 }}">

packages/switch/index.ts

@@ -24,13 +24,6 @@ VantComponent({
   },
 
   computed: {
-    classes(): string {
-      return this.classNames('van-switch', {
-        'van-switch--on': this.data.checked,
-        'van-switch--disabled': this.data.disabled
-      });
-    },
-
     style() {
       const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
       return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`

packages/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 }) }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">

packages/tab/README.md

@@ -116,7 +116,7 @@ Page({
 通过`sticky`属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶
 
 ```html
-<van-tabs sticky>
+<van-tabs sticky scroll-top="{{ scrollTop }}">
   <van-tab title="标签 1">内容 1</van-tab>
   <van-tab title="标签 2">内容 2</van-tab>
   <van-tab title="标签 3">内容 3</van-tab>
@@ -124,6 +124,19 @@ Page({
 </van-tabs>
 ```
 
+```javascript
+Page({
+  data: {
+    scrollTop: 0
+  },
+  onPageScroll(event) {
+    this.setData({
+      scrollTop: event.scrollTop
+    });
+  }
+});
+```
+
 #### 切换动画
 
 可以通过`animated`来设置是否启用切换tab时的动画。

packages/tabbar/index.ts

@@ -1,6 +1,9 @@
 import { VantComponent } from '../common/component';
+import { iphonex } from '../mixins/iphonex';
 
 VantComponent({
+  mixins: [iphonex],
+
   relation: {
     name: 'tabbar-item',
     type: 'descendant',
@@ -27,10 +30,6 @@ VantComponent({
     zIndex: {
       type: Number,
       value: 1
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      value: true
     }
   },
 
@@ -39,16 +38,6 @@ VantComponent({
     currentActive: -1
   },
 
-  computed: {
-    tabbarClass() {
-      const { fixed, isIPhoneX, safeAreaInsetBottom } = this.data;
-      return this.classNames('custom-class', 'van-tabbar', 'van-hairline--top-bottom', {
-        'van-tabbar--fixed': fixed,
-        'van-tabbar--safe': isIPhoneX && safeAreaInsetBottom
-      });
-    }
-  },
-
   watch: {
     active(active) {
       this.set({ currentActive: active });

packages/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 />

packages/tag/index.ts

@@ -19,17 +19,6 @@ VantComponent({
   },
 
   computed: {
-    classes() {
-      const { data } = this;
-      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() {
       const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
       const key = this.data.plain ? 'color' : 'background-color';

packages/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 />

packages/wxs/array.wxs

@@ -0,0 +1,5 @@
+function isArray(obj) {
+  return obj && obj.constructor === 'Array';
+}
+
+module.exports.isArray = isArray;

packages/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;

packages/wxs/memoize.wxs

@@ -0,0 +1,52 @@
+/**
+ * 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];
+  }
+
+  return JSON.stringify(args.length === 1 ? args[0] : args);
+}
+
+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;

packages/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;

packages/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
+};