build: compile 1.6.3

dist/area/index.js

@@ -1,7 +1,7 @@
 import { VantComponent } from '../common/component';
 import { pickerProps } from '../picker/shared';
 import { requestAnimationFrame } from '../common/utils';
-const COLUMNSPLACEHOLDERCODE = '000000';
+const EMPTY_CODE = '000000';
 VantComponent({
   classes: ['active-class', 'toolbar-class', 'column-class'],
   props: Object.assign(Object.assign({}, pickerProps), {
@@ -20,11 +20,6 @@ VantComponent({
     columnsNum: {
       type: null,
       value: 3,
-      observer(value) {
-        this.setData({
-          displayColumns: this.data.columns.slice(0, +value),
-        });
-      },
     },
     columnsPlaceholder: {
       type: Array,
@@ -41,7 +36,6 @@ VantComponent({
   }),
   data: {
     columns: [{ values: [] }, { values: [] }, { values: [] }],
-    displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
     typeToColumnsPlaceholder: {},
   },
   mounted() {
@@ -62,7 +56,7 @@ VantComponent({
     onConfirm(event) {
       const { index } = event.detail;
       let { value } = event.detail;
-      value = this.parseOutputValues(value);
+      value = this.parseValues(value);
       this.emit('confirm', { value, index });
     },
     emit(type, detail) {
@@ -70,16 +64,17 @@ VantComponent({
       delete detail.value;
       this.$emit(type, detail);
     },
-    // parse output columns data
+    parseValues(values) {
-    parseOutputValues(values) {
       const { columnsPlaceholder } = this.data;
       return values.map((value, index) => {
-        // save undefined value
+        if (
-        if (!value) return value;
+          value &&
-        value = JSON.parse(JSON.stringify(value));
+          (!value.code || value.name === columnsPlaceholder[index])
-        if (!value.code || value.name === columnsPlaceholder[index]) {
+        ) {
-          value.code = '';
+          return Object.assign(Object.assign({}, value), {
-          value.name = '';
+            code: '',
+            name: '',
+          });
         }
         return value;
       });
@@ -90,7 +85,7 @@ VantComponent({
       this.setValues().then(() => {
         this.$emit('change', {
           picker,
-          values: this.parseOutputValues(picker.getValues()),
+          values: this.parseValues(picker.getValues()),
           index,
         });
       });
@@ -100,13 +95,12 @@ VantComponent({
       return (areaList && areaList[`${type}_list`]) || {};
     },
     getList(type, code) {
-      const { typeToColumnsPlaceholder } = this.data;
-      let result = [];
       if (type !== 'province' && !code) {
-        return result;
+        return [];
       }
+      const { typeToColumnsPlaceholder } = this.data;
       const list = this.getConfig(type);
-      result = Object.keys(list).map((code) => ({
+      let result = Object.keys(list).map((code) => ({
         code,
         name: list[code],
       }));
@@ -123,8 +117,8 @@ VantComponent({
           type === 'province'
             ? ''
             : type === 'city'
-            ? COLUMNSPLACEHOLDERCODE.slice(2, 4)
+            ? EMPTY_CODE.slice(2, 4)
-            : COLUMNSPLACEHOLDERCODE.slice(4, 6);
+            : EMPTY_CODE.slice(4, 6);
         result.unshift({
           code: `${code}${codeFill}`,
           name: typeToColumnsPlaceholder[type],
@@ -148,35 +142,25 @@ VantComponent({
       return 0;
     },
     setValues() {
-      const county = this.getConfig('county');
-      let { code } = this;
-      if (!code) {
-        if (this.data.columnsPlaceholder.length) {
-          code = COLUMNSPLACEHOLDERCODE;
-        } else if (Object.keys(county)[0]) {
-          code = Object.keys(county)[0];
-        } else {
-          code = '';
-        }
-      }
-      const province = this.getList('province');
-      const city = this.getList('city', code.slice(0, 2));
       const picker = this.getPicker();
       if (!picker) {
         return;
       }
+      let code = this.code || this.getDefaultCode();
+      const provinceList = this.getList('province');
+      const cityList = this.getList('city', code.slice(0, 2));
       const stack = [];
       const indexes = [];
       const { columnsNum } = this.data;
       if (columnsNum >= 1) {
-        stack.push(picker.setColumnValues(0, province, false));
+        stack.push(picker.setColumnValues(0, provinceList, false));
         indexes.push(this.getIndex('province', code));
       }
       if (columnsNum >= 2) {
-        stack.push(picker.setColumnValues(1, city, false));
+        stack.push(picker.setColumnValues(1, cityList, false));
         indexes.push(this.getIndex('city', code));
-        if (city.length && code.slice(2, 4) === '00') {
+        if (cityList.length && code.slice(2, 4) === '00') {
-          [{ code }] = city;
+          [{ code }] = cityList;
         }
       }
       if (columnsNum === 3) {
@@ -194,9 +178,27 @@ VantComponent({
         .then(() => picker.setIndexes(indexes))
         .catch(() => {});
     },
+    getDefaultCode() {
+      const { columnsPlaceholder } = this.data;
+      if (columnsPlaceholder.length) {
+        return EMPTY_CODE;
+      }
+      const countyCodes = Object.keys(this.getConfig('county'));
+      if (countyCodes[0]) {
+        return countyCodes[0];
+      }
+      const cityCodes = Object.keys(this.getConfig('city'));
+      if (cityCodes[0]) {
+        return cityCodes[0];
+      }
+      return '';
+    },
     getValues() {
       const picker = this.getPicker();
-      return picker ? picker.getValues().filter((value) => !!value) : [];
+      if (!picker) {
+        return [];
+      }
+      return this.parseValues(picker.getValues().filter((value) => !!value));
     },
     getDetail() {
       const values = this.getValues();

dist/area/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="./index.wxs" module="computed" />
+
 <van-picker
   class="van-area__picker"
   active-class="active-class"
@@ -7,7 +9,7 @@
   value-key="name"
   title="{{ title }}"
   loading="{{ loading }}"
-  columns="{{ displayColumns }}"
+  columns="{{ computed.displayColumns(columns, columnsNum) }}"
   item-height="{{ itemHeight }}"
   visible-item-count="{{ visibleItemCount }}"
   cancel-button-text="{{ cancelButtonText }}"

dist/area/index.wxs

@@ -0,0 +1,8 @@
+/* eslint-disable */
+function displayColumns(columns, columnsNum) {
+  return columns.slice(0, +columnsNum);
+}
+
+module.exports = {
+  displayColumns: displayColumns,
+};

dist/collapse-item/animate.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="miniprogram-api-typings" />
+export declare function setContentAnimate(
+  context: WechatMiniprogram.Component.TrivialInstance,
+  expanded: boolean,
+  mounted: boolean
+): void;

dist/collapse-item/animate.js

@@ -0,0 +1,71 @@
+import { canIUseAnimate } from '../common/version';
+import { getRect } from '../common/utils';
+function useAnimate(context, expanded, mounted, height) {
+  const selector = '.van-collapse-item__wrapper';
+  if (expanded) {
+    context.animate(
+      selector,
+      [
+        { height: 0, ease: 'ease-in-out', offset: 0 },
+        { height: `${height}px`, ease: 'ease-in-out', offset: 1 },
+        { height: `auto`, ease: 'ease-in-out', offset: 1 },
+      ],
+      mounted ? 300 : 0,
+      () => {
+        context.clearAnimation(selector);
+      }
+    );
+    return;
+  }
+  context.animate(
+    selector,
+    [
+      { height: `${height}px`, ease: 'ease-in-out', offset: 0 },
+      { height: 0, ease: 'ease-in-out', offset: 1 },
+    ],
+    300,
+    () => {
+      context.clearAnimation(selector);
+    }
+  );
+}
+function useAnimation(context, expanded, mounted, height) {
+  const animation = wx.createAnimation({
+    duration: 0,
+    timingFunction: 'ease-in-out',
+  });
+  if (expanded) {
+    if (height === 0) {
+      animation.height('auto').top(1).step();
+    } else {
+      animation
+        .height(height)
+        .top(1)
+        .step({
+          duration: mounted ? 300 : 1,
+        })
+        .height('auto')
+        .step();
+    }
+    context.setData({
+      animation: animation.export(),
+    });
+    return;
+  }
+  animation.height(height).top(0).step({ duration: 1 }).height(0).step({
+    duration: 300,
+  });
+  context.setData({
+    animation: animation.export(),
+  });
+}
+export function setContentAnimate(context, expanded, mounted) {
+  getRect
+    .call(context, '.van-collapse-item__content')
+    .then((rect) => rect.height)
+    .then((height) => {
+      canIUseAnimate()
+        ? useAnimate(context, expanded, mounted, height)
+        : useAnimation(context, expanded, mounted, height);
+    });
+}

dist/collapse-item/index.js

@@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { setContentAnimate } from './animate';
 VantComponent({
   classes: ['title-class', 'content-class'],
   relation: {
@@ -26,20 +27,14 @@ VantComponent({
   data: {
     expanded: false,
   },
-  created() {
-    this.animation = wx.createAnimation({
-      duration: 0,
-      timingFunction: 'ease-in-out',
-    });
-  },
   mounted() {
     this.updateExpanded();
-    this.inited = true;
+    this.mounted = true;
   },
   methods: {
     updateExpanded() {
       if (!this.parent) {
-        return Promise.resolve();
+        return;
       }
       const { value, accordion } = this.parent.data;
       const { children = [] } = this.parent;
@@ -50,42 +45,10 @@ VantComponent({
         ? value === currentName
         : (value || []).some((name) => name === currentName);
       if (expanded !== this.data.expanded) {
-        this.updateStyle(expanded);
+        setContentAnimate(this, expanded, this.mounted);
       }
       this.setData({ index, expanded });
     },
-    updateStyle(expanded) {
-      const { inited } = this;
-      this.getRect('.van-collapse-item__content')
-        .then((rect) => rect.height)
-        .then((height) => {
-          const { animation } = this;
-          if (expanded) {
-            if (height === 0) {
-              animation.height('auto').top(1).step();
-            } else {
-              animation
-                .height(height)
-                .top(1)
-                .step({
-                  duration: inited ? 300 : 1,
-                })
-                .height('auto')
-                .step();
-            }
-            this.setData({
-              animation: animation.export(),
-            });
-            return;
-          }
-          animation.height(height).top(0).step({ duration: 1 }).height(0).step({
-            duration: 300,
-          });
-          this.setData({
-            animation: animation.export(),
-          });
-        });
-    },
     onClick() {
       if (this.data.disabled) {
         return;

dist/common/utils.d.ts

@@ -17,3 +17,6 @@ export declare function getAllRect(
   this: WechatMiniprogram.Component.TrivialInstance,
   selector: string
 ): Promise<WechatMiniprogram.BoundingClientRectCallbackResult[]>;
+export declare function toPromise(
+  promiseLike: Promise<unknown> | unknown
+): Promise<unknown>;

dist/common/utils.js

@@ -1,4 +1,4 @@
-import { isNumber, isPlainObject } from './validator';
+import { isNumber, isPlainObject, isPromise } from './validator';
 export function isDef(value) {
   return value !== undefined && value !== null;
 }
@@ -70,3 +70,9 @@ export function getAllRect(selector) {
       .exec((rect = []) => resolve(rect[0]));
   });
 }
+export function toPromise(promiseLike) {
+  if (isPromise(promiseLike)) {
+    return promiseLike;
+  }
+  return Promise.resolve(promiseLike);
+}

dist/common/version.d.ts

@@ -1,2 +1,3 @@
 export declare function canIUseModel(): boolean;
 export declare function canIUseFormFieldButton(): boolean;
+export declare function canIUseAnimate(): boolean;

dist/common/version.js

@@ -29,3 +29,7 @@ export function canIUseFormFieldButton() {
   const system = getSystemInfoSync();
   return compareVersion(system.SDKVersion, '2.10.3') >= 0;
 }
+export function canIUseAnimate() {
+  const system = getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.9.0') >= 0;
+}

dist/dialog/dialog.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="miniprogram-api-typings" />
+export declare type Action = 'confirm' | 'cancel' | 'overlay';
 interface DialogOptions {
   lang?: string;
   show?: boolean;
@@ -16,7 +17,11 @@ interface DialogOptions {
   className?: string;
   customStyle?: string;
   transition?: string;
+  /**
+   * @deprecated use beforeClose instead
+   */
   asyncClose?: boolean;
+  beforeClose?: null | (() => Promise<void> | void);
   businessId?: number;
   sessionFrom?: string;
   overlayStyle?: string;

dist/dialog/dialog.js

@@ -10,6 +10,7 @@ const defaultOptions = {
   selector: '#van-dialog',
   className: '',
   asyncClose: false,
+  beforeClose: null,
   transition: 'scale',
   customStyle: '',
   messageAlign: '',
@@ -35,7 +36,14 @@ const Dialog = (options) => {
     delete options.selector;
     if (dialog) {
       dialog.setData(
-        Object.assign({ onCancel: reject, onConfirm: resolve }, options)
+        Object.assign(
+          {
+            callback: (action, instance) => {
+              action === 'confirm' ? resolve(instance) : reject(instance);
+            },
+          },
+          options
+        )
       );
       wx.nextTick(() => {
         dialog.setData({ show: true });

dist/dialog/index.js

@@ -2,6 +2,7 @@ import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
 import { GRAY, RED } from '../common/color';
+import { toPromise } from '../common/utils';
 VantComponent({
   mixins: [button, openType],
   props: {
@@ -22,6 +23,7 @@ VantComponent({
     customStyle: String,
     asyncClose: Boolean,
     messageAlign: String,
+    beforeClose: null,
     overlayStyle: String,
     useTitleSlot: Boolean,
     showCancelButton: Boolean,
@@ -77,17 +79,14 @@ VantComponent({
     onClickOverlay() {
       this.onClose('overlay');
     },
-    handleAction(action) {
+    close(action) {
-      if (this.data.asyncClose) {
+      this.setData({ show: false });
-        this.setData({
+      wx.nextTick(() => {
-          [`loading.${action}`]: true,
+        this.$emit('close', action);
-        });
+        const { callback } = this.data;
-      }
+        if (callback) {
-      this.onClose(action);
+          callback(action, this);
-    },
+        }
-    close() {
-      this.setData({
-        show: false,
       });
     },
     stopLoading() {
@@ -98,18 +97,24 @@ VantComponent({
         },
       });
     },
-    onClose(action) {
+    handleAction(action) {
-      if (!this.data.asyncClose) {
-        this.close();
-      }
-      this.$emit('close', action);
-      // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
       this.$emit(action, { dialog: this });
-      const callback = this.data[
+      const { asyncClose, beforeClose } = this.data;
-        action === 'confirm' ? 'onConfirm' : 'onCancel'
+      if (!asyncClose && !beforeClose) {
-      ];
+        this.close(action);
-      if (callback) {
+        return;
-        callback(this);
+      }
+      this.setData({
+        [`loading.${action}`]: true,
+      });
+      if (beforeClose) {
+        toPromise(beforeClose(action)).then((value) => {
+          if (value) {
+            this.close(action);
+          } else {
+            this.stopLoading();
+          }
+        });
       }
     },
   },

dist/dialog/index.json

@@ -3,7 +3,7 @@
   "usingComponents": {
     "van-popup": "../popup/index",
     "van-button": "../button/index",
-    "van-goods-action": "../goods-action//index",
+    "van-goods-action": "../goods-action/index",
     "van-goods-action-button": "../goods-action-button/index"
   }
 }

dist/dropdown-menu/index.js

@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
+import { addUnit, getRect } from '../common/utils';
 let ARRAY = [];
 VantComponent({
   field: true,
@@ -87,7 +87,7 @@ VantComponent({
     },
     getChildWrapperStyle() {
       const { zIndex, direction } = this.data;
-      return this.getRect('.van-dropdown-menu').then((rect) => {
+      return getRect.call(this, '.van-dropdown-menu').then((rect) => {
         const { top = 0, bottom = 0 } = rect;
         const offset = direction === 'down' ? bottom : this.windowHeight - top;
         let wrapperStyle = `z-index: ${zIndex};`;

dist/field/index.wxml

@@ -99,7 +99,7 @@
     </view>
   </view>
   <view wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
-    <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length }}</view>/{{ maxlength }}
+    <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
   </view>
   <view wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
     {{ errorMessage }}

dist/index-anchor/index.js

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 VantComponent({
   relation: {
@@ -16,15 +17,12 @@ VantComponent({
   },
   methods: {
     scrollIntoView(scrollTop) {
-      this.getBoundingClientRect().then((rect) => {
+      getRect.call(this, '.van-index-anchor-wrapper').then((rect) => {
         wx.pageScrollTo({
           duration: 0,
           scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
         });
       });
     },
-    getBoundingClientRect() {
-      return this.getRect('.van-index-anchor-wrapper');
-    },
   },
 });

dist/info/index.wxml

@@ -2,6 +2,6 @@
 
 <view
   wx:if="{{ info !== null && info !== '' || dot }}"
-  class="custom-class van-info {{ utils.bem('info', { dot }) }}"
+  class="van-info {{ utils.bem('info', { dot }) }} custom-class"
   style="{{ customStyle }}"
 >{{ dot ? '' : info }}</view>

dist/info/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;height:16px;height:var(--info-size,16px);min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}
+@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;white-space:nowrap;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;height:16px;height:var(--info-size,16px);min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}

dist/mixins/basic.js

@@ -7,21 +7,5 @@ export const basic = Behavior({
       this.setData(data, callback);
       return new Promise((resolve) => wx.nextTick(resolve));
     },
-    getRect(selector, all) {
-      return new Promise((resolve) => {
-        wx.createSelectorQuery()
-          .in(this)
-          [all ? 'selectAll' : 'select'](selector)
-          .boundingClientRect((rect) => {
-            if (all && Array.isArray(rect) && rect.length) {
-              resolve(rect);
-            }
-            if (!all && rect) {
-              resolve(rect);
-            }
-          })
-          .exec();
-      });
-    },
   },
 });

dist/mixins/link.js

@@ -10,7 +10,14 @@ export const link = Behavior({
     jumpLink(urlKey = 'url') {
       const url = this.data[urlKey];
       if (url) {
-        wx[this.data.linkType]({ url });
+        if (
+          this.data.linkType === 'navigateTo' &&
+          getCurrentPages().length > 9
+        ) {
+          wx.redirectTo({ url });
+        } else {
+          wx[this.data.linkType]({ url });
+        }
       }
     },
   },

dist/nav-bar/index.js

@@ -55,7 +55,9 @@ VantComponent({
       }
       wx.nextTick(() => {
         getRect.call(this, '.van-nav-bar').then((res) => {
-          this.setData({ height: res.height });
+          if (res && 'height' in res) {
+            this.setData({ height: res.height });
+          }
         });
       });
     },

dist/nav-bar/index.wxs

@@ -1,15 +1,11 @@
 /* eslint-disable */
-function barStyle(data) {
+var style = require('../wxs/style.wxs');
-  var styles = [
-    ['z-index', data.zIndex],
-    ['padding-top', data.safeAreaInsetTop ? data.statusBarHeight + 'px' : 0],
-  ];
 
-  return styles
+function barStyle(data) {
-    .map(function (item) {
+  return style({
-      return item.join(':');
+    'z-index': data.zIndex,
-    })
+    'padding-top': data.safeAreaInsetTop ? data.statusBarHeight + 'px' : 0,
-    .join(';');
+  });
 }
 
 module.exports = {

dist/popup/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <van-overlay
   wx:if="{{ overlay }}"
@@ -11,7 +12,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]) }}"
-  style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }};{{ customStyle }}"
+  style="{{ computed.popupClass({ zIndex, currentDuration, display, customStyle }) }}"
   bind:transitionend="onTransitionEnd"
 >
   <slot />

dist/popup/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function popupClass(data) {
+  return style([
+    {
+      'z-index': data.zIndex,
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  popupClass: popupClass,
+};

dist/progress/index.js

@@ -1,9 +1,13 @@
 import { VantComponent } from '../common/component';
 import { BLUE } from '../common/color';
+import { getRect } from '../common/utils';
 VantComponent({
   props: {
     inactive: Boolean,
-    percentage: Number,
+    percentage: {
+      type: Number,
+      observer: 'setLeft',
+    },
     pivotText: String,
     pivotColor: String,
     trackColor: String,
@@ -24,4 +28,24 @@ VantComponent({
       value: 4,
     },
   },
+  data: {
+    right: 0,
+  },
+  mounted() {
+    this.setLeft();
+  },
+  methods: {
+    setLeft() {
+      Promise.all([
+        getRect.call(this, '.van-progress'),
+        getRect.call(this, '.van-progress__pivot'),
+      ]).then(([portion, pivot]) => {
+        if (portion && pivot) {
+          this.setData({
+            right: (pivot.width * (this.data.percentage - 100)) / 100,
+          });
+        }
+      });
+    },
+  },
 });

dist/progress/index.wxml

@@ -1,20 +1,20 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="getters" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="van-progress custom-class"
-  style="height: {{ utils.addUnit(strokeWidth) }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
+  style="{{ computed.rootStyle({ strokeWidth, trackColor }) }}"
 >
   <view
     class="van-progress__portion"
-    style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
+    style="{{ computed.portionStyle({ percentage, inactive, color }) }}"
   >
     <view
-      wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
+      wx:if="{{ showPivot && computed.pivotText(pivotText, percentage) }}"
-      style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
+      style="{{ computed.pivotStyle({ textColor, pivotColor, inactive, color, right }) }}"
       class="van-progress__pivot"
     >
-      {{ getters.text(pivotText, percentage) }}
+      {{ computed.pivotText(pivotText, percentage) }}
     </view>
   </view>
 </view>

dist/progress/index.wxs

@@ -1,5 +1,36 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function pivotText(pivotText, percentage) {
+  return pivotText || percentage + '%';
+}
+
+function rootStyle(data) {
+  return style({
+    'height': data.strokeWidth ? utils.addUnit(data.strokeWidth) : '',
+    'background': data.trackColor,
+  });
+}
+
+function portionStyle(data) {
+  return style({
+    background: data.inactive ? '#cacaca' : data.color,
+    width: data.percentage ? data.percentage + '%' : '',
+  });
+}
+
+function pivotStyle(data) {
+  return style({
+    color: data.textColor,
+    right: data.right + 'px',
+    background: data.pivotColor ? data.pivotColor : data.inactive ? '#cacaca' : data.color,
+  });
+}
+
 module.exports = {
-  text: function(pivotText, percentage) {
+  pivotText: pivotText,
-    return pivotText || percentage + '%';
+  rootStyle: rootStyle,
-  }
+  portionStyle: portionStyle,
+  pivotStyle: pivotStyle,
 };

dist/progress/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-progress{position:relative;height:4px;height:var(--progress-height,4px);border-radius:4px;border-radius:var(--progress-height,4px);background:#ebedf0;background:var(--progress-background-color,#ebedf0)}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit;background:#1989fa;background:var(--progress-color,#1989fa)}.van-progress__pivot{position:absolute;top:50%;right:0;box-sizing:border-box;min-width:2em;text-align:center;word-break:keep-all;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;color:var(--progress-pivot-text-color,#fff);padding:0 5px;padding:var(--progress-pivot-padding,0 5px);font-size:10px;font-size:var(--progress-pivot-font-size,10px);line-height:1.6;line-height:var(--progress-pivot-line-height,1.6);background-color:#1989fa;background-color:var(--progress-pivot-background-color,#1989fa)}
+@import '../common/index.wxss';.van-progress{position:relative;height:4px;height:var(--progress-height,4px);border-radius:4px;border-radius:var(--progress-height,4px);background:#ebedf0;background:var(--progress-background-color,#ebedf0)}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit;background:#1989fa;background:var(--progress-color,#1989fa)}.van-progress__pivot{position:absolute;top:50%;box-sizing:border-box;min-width:3.6em;text-align:center;word-break:keep-all;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;color:var(--progress-pivot-text-color,#fff);padding:0 5px;padding:var(--progress-pivot-padding,0 5px);font-size:10px;font-size:var(--progress-pivot-font-size,10px);line-height:1.6;line-height:var(--progress-pivot-line-height,1.6);background-color:#1989fa;background-color:var(--progress-pivot-background-color,#1989fa)}

dist/rate/index.js

@@ -1,3 +1,4 @@
+import { getAllRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { canIUseModel } from '../common/version';
 VantComponent({
@@ -72,7 +73,7 @@ VantComponent({
       const { touchable } = this.data;
       if (!touchable) return;
       const { clientX } = event.touches[0];
-      this.getRect('.van-rate__icon', true).then((list) => {
+      getAllRect.call(this, '.van-rate__icon').then((list) => {
         const target = list
           .sort((item) => item.right - item.left)
           .find((item) => clientX >= item.left && clientX <= item.right);

dist/slider/index.js

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { canIUseModel } from '../common/version';
+import { getRect } from '../common/utils';
 VantComponent({
   mixins: [touch],
   props: {
@@ -51,7 +52,7 @@ VantComponent({
       }
       this.touchMove(event);
       this.dragStatus = 'draging';
-      this.getRect('.van-slider').then((rect) => {
+      getRect.call(this, '.van-slider').then((rect) => {
         const diff = (this.deltaX / rect.width) * 100;
         this.newValue = this.startValue + diff;
         this.updateValue(this.newValue, false, true);
@@ -67,7 +68,7 @@ VantComponent({
     onClick(event) {
       if (this.data.disabled) return;
       const { min } = this.data;
-      this.getRect('.van-slider').then((rect) => {
+      getRect.call(this, '.van-slider').then((rect) => {
         const value =
           ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
         this.updateValue(value, true);

dist/sticky/index.js

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { pageScrollMixin } from '../mixins/page-scroll';
 const ROOT_ELEMENT = '.van-sticky';
@@ -55,27 +56,28 @@ VantComponent({
       }
       this.scrollTop = scrollTop || this.scrollTop;
       if (typeof container === 'function') {
-        Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(
+        Promise.all([
-          ([root, container]) => {
+          getRect.call(this, ROOT_ELEMENT),
-            if (offsetTop + root.height > container.height + container.top) {
+          this.getContainerRect(),
-              this.setDataAfterDiff({
+        ]).then(([root, container]) => {
-                fixed: false,
+          if (offsetTop + root.height > container.height + container.top) {
-                transform: container.height - root.height,
+            this.setDataAfterDiff({
-              });
+              fixed: false,
-            } else if (offsetTop >= root.top) {
+              transform: container.height - root.height,
-              this.setDataAfterDiff({
+            });
-                fixed: true,
+          } else if (offsetTop >= root.top) {
-                height: root.height,
+            this.setDataAfterDiff({
-                transform: 0,
+              fixed: true,
-              });
+              height: root.height,
-            } else {
+              transform: 0,
-              this.setDataAfterDiff({ fixed: false, transform: 0 });
+            });
-            }
+          } else {
+            this.setDataAfterDiff({ fixed: false, transform: 0 });
           }
-        );
+        });
         return;
       }
-      this.getRect(ROOT_ELEMENT).then((root) => {
+      getRect.call(this, ROOT_ELEMENT).then((root) => {
         if (offsetTop >= root.top) {
           this.setDataAfterDiff({ fixed: true, height: root.height });
           this.transform = 0;

dist/sticky/index.wxs

@@ -1,37 +1,24 @@
 /* eslint-disable */
+var style = require('../wxs/style.wxs');
+
 function wrapStyle(data) {
-  var style = '';
+  return style({
-
+    transform: data.transform
-  if (data.transform) {
+      ? 'translate3d(0, ' + data.transform + 'px, 0)'
-    style += 'transform: translate3d(0, ' + data.transform + 'px, 0);';
+      : '',
-  }
+    top: data.fixed ? data.offsetTop + 'px' : '',
-
+    'z-index': data.zIndex,
-  if (data.fixed) {
+  });
-    style += 'top: ' + data.offsetTop + 'px;';
-  }
-
-  if (data.zIndex) {
-    style += 'z-index: ' + data.zIndex + ';';
-  }
-
-  return style;
 }
 
 function containerStyle(data) {
-  var style = '';
+  return style({
-
+    height: data.fixed ? data.height + 'px' : '',
-  if (data.fixed) {
+    'z-index': data.zIndex,
-    style += 'height: ' + data.height + 'px;';
+  });
-  }
-
-  if (data.zIndex) {
-    style += 'z-index: ' + data.zIndex + ';';
-  }
-
-  return style;
 }
 
 module.exports = {
   wrapStyle: wrapStyle,
-  containerStyle: containerStyle
+  containerStyle: containerStyle,
 };

dist/tabs/index.js

@@ -38,7 +38,7 @@ VantComponent({
     lineWidth: {
       type: [String, Number],
       value: 40,
-      observer: 'setLine',
+      observer: 'resize',
     },
     lineHeight: {
       type: [String, Number],
@@ -100,7 +100,7 @@ VantComponent({
   },
   mounted() {
     wx.nextTick(() => {
-      this.setLine(true);
+      this.resize(true);
       this.scrollIntoView();
     });
   },
@@ -174,7 +174,7 @@ VantComponent({
       const shouldEmitChange = data.currentIndex !== null;
       this.setData({ currentIndex });
       wx.nextTick(() => {
-        this.setLine();
+        this.resize();
         this.scrollIntoView();
         this.updateContainer();
         this.trigger('input');
@@ -189,7 +189,7 @@ VantComponent({
         return activeTab.getComputedName();
       }
     },
-    setLine(skipTransition = false) {
+    resize(skipTransition = false) {
       if (this.data.type !== 'line') {
         return;
       }

dist/tabs/index.wxml

@@ -1,5 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="getters" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="custom-class {{ utils.bem('tabs', [type]) }}">
   <van-sticky
@@ -19,14 +19,14 @@
         class="{{ utils.bem('tabs__scroll', [type]) }}"
         style="{{ color ? 'border-color: ' + color : '' }}"
       >
-        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
+        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
-          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ getters.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
+          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"
             data-index="{{ index }}"
-            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
+            class="{{ computed.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
-            style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
+            style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
             bind:tap="onTap"
           >
             <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
@@ -55,7 +55,7 @@
   >
     <view
       class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track"
-      style="{{ getters.trackStyle({ duration, currentIndex, animated }) }}"
+      style="{{ computed.trackStyle({ duration, currentIndex, animated }) }}"
     >
       <slot />
     </view>

dist/tabs/index.wxs

@@ -1,5 +1,6 @@
 /* eslint-disable */
 var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
 
 function tabClass(active, ellipsis) {
   var classes = ['tab-class'];
@@ -15,51 +16,33 @@ function tabClass(active, ellipsis) {
   return classes.join(' ');
 }
 
-function tabStyle(
+function tabStyle(data) {
-  active,
+  var titleColor = data.active
-  ellipsis,
+    ? data.titleActiveColor
-  color,
+    : data.titleInactiveColor;
-  type,
+
-  disabled,
+  var ellipsis = data.scrollable && data.ellipsis;
-  activeColor,
+
-  inactiveColor,
-  swipeThreshold,
-  scrollable
-) {
-  var styles = [];
-  var isCard = type === 'card';
   // card theme color
-  if (color && isCard) {
+  if (data.type === 'card') {
-    styles.push('border-color:' + color);
+    return style({
-
+      'border-color': data.color,
-    if (!disabled) {
+      'background-color': !data.disabled && data.active ? data.color : null,
-      if (active) {
+      color: titleColor || (!data.disabled && !data.active ? data.color : null),
-        styles.push('background-color:' + color);
+      'flex-basis': ellipsis ? 88 / data.swipeThreshold + '%' : null,
-      } else {
+    });
-        styles.push('color:' + color);
-      }
-    }
   }
 
-  var titleColor = active ? activeColor : inactiveColor;
+  return style({
-  if (titleColor) {
+    color: titleColor,
-    styles.push('color:' + titleColor);
+    'flex-basis': ellipsis ? 88 / data.swipeThreshold + '%' : null,
-  }
+  });
-
-  if (scrollable && ellipsis) {
-    styles.push('flex-basis:' + 88 / swipeThreshold + '%');
-  }
-
-  return styles.join(';');
 }
 
-function tabCardTypeBorderStyle(color, type) {
+function navStyle(color, type) {
-  var isCard = type === 'card';
+  return style({
-  var styles = [];
+    'border-color': type === 'card' && color ? color : null,
-  if (isCard && color) {
+  });
-    styles.push('border-color:' + color);
-  }
-  return styles.join(';');
 }
 
 function trackStyle(data) {
@@ -67,43 +50,27 @@ function trackStyle(data) {
     return '';
   }
 
-  return [
+  return style({
-    ['left', -100 * data.currentIndex + '%'],
+    left: -100 * data.currentIndex + '%',
-    ['-webkit-transition-duration', data.duration + 's'],
+    'transition-duration': data.duration + 's',
-    ['transition-duration: ', data.duration + 's'],
+    '-webkit-transition-duration': data.duration + 's',
-  ]
+  });
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
 }
 
 function lineStyle(data) {
-  var styles = [
+  return style({
-    ['width', utils.addUnit(data.lineWidth)],
+    width: utils.addUnit(data.lineWidth),
-    ['transform', 'translateX(' + data.lineOffsetLeft + 'px)'],
+    transform: 'translateX(' + data.lineOffsetLeft + 'px)',
-    ['-webkit-transform', 'translateX(' + data.lineOffsetLeft + 'px)'],
+    '-webkit-transform': 'translateX(' + data.lineOffsetLeft + 'px)',
-  ];
+    'background-color': data.color,
-
+    height: data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
-  if (data.color) {
+    'border-radius':
-    styles.push(['background-color', data.color]);
+      data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
-  }
+    'transition-duration': !data.skipTransition ? data.duration + 's' : null,
-
+    '-webkit-transition-duration': !data.skipTransition
-  if (data.lineHeight !== -1) {
+      ? data.duration + 's'
-    styles.push(['height', utils.addUnit(data.lineHeight)]);
+      : null,
-    styles.push(['border-radius', utils.addUnit(data.lineHeight)]);
+  });
-  }
-
-  if (!data.skipTransition) {
-    styles.push(['transition-duration', data.duration + 's']);
-    styles.push(['-webkit-transition-duration', data.duration + 's']);
-  }
-
-  return styles
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
 }
 
 module.exports = {
@@ -111,5 +78,5 @@ module.exports = {
   tabStyle: tabStyle,
   trackStyle: trackStyle,
   lineStyle: lineStyle,
-  tabCardTypeBorderStyle: tabCardTypeBorderStyle,
+  navStyle: navStyle,
 };

dist/tree-select/index.js

@@ -62,7 +62,7 @@ VantComponent({
     updateSubItems() {
       const { items, mainActiveIndex } = this.data;
       const { children = [] } = items[mainActiveIndex] || {};
-      return this.set({ subItems: children });
+      this.setData({ subItems: children });
     },
   },
 });

dist/uploader/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f7f8fa}.van-uploader__upload:active{background-color:#f2f3f5}.van-uploader__upload-icon{color:#dcdee0;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.van-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:14px;height:14px;padding:0 0 8px 8px}.van-uploader__preview-delete:after{position:absolute;top:0;right:0;width:14px;height:14px;background-color:rgba(0,0,0,.7);border-radius:0 0 0 12px;content:""}.van-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;z-index:1;color:#fff;font-size:16px;-webkit-transform:scale(.5);transform:scale(.5)}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa}.van-uploader__file-icon{color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88)}.van-uploader__mask-icon{font-size:22px}.van-uploader__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.van-uploader__loading{width:22px;height:22px;color:#fff!important}
+@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;width:var(--uploader-size,80px);height:80px;height:var(--uploader-size,80px);margin:0 8px 8px 0;margin:0 var(--padding-xs,8px) var(--padding-xs,8px) 0;background-color:#f7f8fa;background-color:var(--uploader-upload-background-color,#f7f8fa)}.van-uploader__upload:active{background-color:#f2f3f5;background-color:var(--uploader-upload-active-color,#f2f3f5)}.van-uploader__upload-icon{color:#dcdee0;color:var(--uploader-icon-color,#dcdee0);font-size:24px;font-size:var(--uploader-icon-size,24px)}.van-uploader__upload-text{margin-top:8px;margin-top:var(--padding-xs,8px);color:#969799;color:var(--uploader-text-color,#969799);font-size:12px;font-size:var(--uploader-text-font-size,12px)}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;cursor:pointer;margin:0 8px 8px 0;margin:0 var(--padding-xs,8px) var(--padding-xs,8px) 0}.van-uploader__preview-image{display:block;overflow:hidden;width:80px;width:var(--uploader-size,80px);height:80px;height:var(--uploader-size,80px)}.van-uploader__preview-delete{padding:0 0 8px 8px;padding:0 0 var(--padding-xs,8px) var(--padding-xs,8px)}.van-uploader__preview-delete,.van-uploader__preview-delete:after{position:absolute;top:0;right:0;width:14px;width:var(--uploader-delete-icon-size,14px);height:14px;height:var(--uploader-delete-icon-size,14px)}.van-uploader__preview-delete:after{content:"";background-color:rgba(0,0,0,.7);background-color:var(--uploader-delete-background-color,rgba(0,0,0,.7));border-radius:0 0 0 12px;border-radius:0 0 0 calc(var(--uploader-delete-icon-size, 14px) - 2px)}.van-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;z-index:1;-webkit-transform:scale(.5);transform:scale(.5);font-size:16px;font-size:calc(var(--uploader-delete-icon-size, 14px) + 2px);color:#fff;color:var(--uploader-delete-color,#fff)}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;width:var(--uploader-size,80px);height:80px;height:var(--uploader-size,80px);background-color:#f7f8fa;background-color:var(--uploader-file-background-color,#f7f8fa)}.van-uploader__file-icon{color:#646566;color:var(--uploader-file-icon-color,#646566);font-size:20px;font-size:var(--uploader-file-icon-size,20px)}.van-uploader__file-name{box-sizing:border-box;width:100%;text-align:center;margin-top:8px;margin-top:var(--uploader-file-name-margin-top,8px);padding:0 4px;padding:var(--uploader-file-name-padding,0 4px);color:#646566;color:var(--uploader-file-name-text-color,#646566);font-size:12px;font-size:var(--uploader-file-name-font-size,12px)}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;color:var(--white,#fff);background-color:rgba(50,50,51,.88);background-color:var(--uploader-mask-background-color,rgba(50,50,51,.88))}.van-uploader__mask-icon{font-size:22px;font-size:var(--uploader-mask-icon-size,22px)}.van-uploader__mask-message{margin-top:6px;padding:0 4px;padding:0 var(--padding-base,4px);font-size:12px;font-size:var(--uploader-mask-message-font-size,12px);line-height:14px;line-height:var(--uploader-mask-message-line-height,14px)}.van-uploader__loading{width:22px;width:var(--uploader-loading-icon-size,22px);height:22px;height:var(--uploader-loading-icon-size,22px);color:#fff!important;color:var(--uploader-loading-icon-color,#fff)!important}

dist/wxs/add-unit.wxs

@@ -9,6 +9,4 @@ function addUnit(value) {
   return REGEXP.test('' + value) ? value + 'px' : value;
 }
 
-module.exports = {
+module.exports = addUnit;
-  addUnit: addUnit
-};

dist/wxs/bem.wxs

@@ -1,3 +1,4 @@
+/* eslint-disable */
 var array = require('./array.wxs');
 var object = require('./object.wxs');
 var PREFIX = 'van-';
@@ -35,4 +36,4 @@ function bem(name, conf) {
   return join(name, mods);
 }
 
-module.exports.bem = bem;
+module.exports = bem;

dist/wxs/memoize.wxs

@@ -2,6 +2,7 @@
  * Simple memoize
  * wxs doesn't support fn.apply, so this memoize only support up to 2 args
  */
+/* eslint-disable */
 
 function isPrimitive(value) {
   var type = typeof value;
@@ -51,4 +52,4 @@ function memoize(fn) {
   };
 }
 
-module.exports.memoize = memoize;
+module.exports = memoize;

dist/wxs/style.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var object = require('./object.wxs');
+var array = require('./array.wxs');
+
+function style(styles) {
+  if (array.isArray(styles)) {
+    return styles
+      .filter(function (item) {
+        return item != null;
+      })
+      .map(function (item) {
+        return style(item);
+      })
+      .join(';');
+  }
+
+  if ('Object' === styles.constructor) {
+    return object
+      .keys(styles)
+      .filter(function (key) {
+        return styles[key] != null;
+      })
+      .map(function (key) {
+        return [key, [styles[key]]].join(':');
+      })
+      .join(';');
+  }
+
+  return styles;
+}
+
+module.exports = style;

dist/wxs/utils.wxs

@@ -1,7 +1,7 @@
 /* eslint-disable */
-var bem = require('./bem.wxs').bem;
+var bem = require('./bem.wxs');
-var memoize = require('./memoize.wxs').memoize;
+var memoize = require('./memoize.wxs');
-var addUnit = require('./add-unit.wxs').addUnit;
+var addUnit = require('./add-unit.wxs');
 
 module.exports = {
   bem: memoize(bem),

lib/area/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
 var shared_1 = require('../picker/shared');
 var utils_1 = require('../common/utils');
-var COLUMNSPLACEHOLDERCODE = '000000';
+var EMPTY_CODE = '000000';
 component_1.VantComponent({
   classes: ['active-class', 'toolbar-class', 'column-class'],
   props: __assign(__assign({}, shared_1.pickerProps), {
@@ -37,11 +37,6 @@ component_1.VantComponent({
     columnsNum: {
       type: null,
       value: 3,
-      observer: function (value) {
-        this.setData({
-          displayColumns: this.data.columns.slice(0, +value),
-        });
-      },
     },
     columnsPlaceholder: {
       type: Array,
@@ -58,7 +53,6 @@ component_1.VantComponent({
   }),
   data: {
     columns: [{ values: [] }, { values: [] }, { values: [] }],
-    displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
     typeToColumnsPlaceholder: {},
   },
   mounted: function () {
@@ -80,7 +74,7 @@ component_1.VantComponent({
     onConfirm: function (event) {
       var index = event.detail.index;
       var value = event.detail.value;
-      value = this.parseOutputValues(value);
+      value = this.parseValues(value);
       this.emit('confirm', { value: value, index: index });
     },
     emit: function (type, detail) {
@@ -88,16 +82,14 @@ component_1.VantComponent({
       delete detail.value;
       this.$emit(type, detail);
     },
-    // parse output columns data
+    parseValues: function (values) {
-    parseOutputValues: function (values) {
       var columnsPlaceholder = this.data.columnsPlaceholder;
       return values.map(function (value, index) {
-        // save undefined value
+        if (
-        if (!value) return value;
+          value &&
-        value = JSON.parse(JSON.stringify(value));
+          (!value.code || value.name === columnsPlaceholder[index])
-        if (!value.code || value.name === columnsPlaceholder[index]) {
+        ) {
-          value.code = '';
+          return __assign(__assign({}, value), { code: '', name: '' });
-          value.name = '';
         }
         return value;
       });
@@ -112,7 +104,7 @@ component_1.VantComponent({
       this.setValues().then(function () {
         _this.$emit('change', {
           picker: picker,
-          values: _this.parseOutputValues(picker.getValues()),
+          values: _this.parseValues(picker.getValues()),
           index: index,
         });
       });
@@ -122,13 +114,12 @@ component_1.VantComponent({
       return (areaList && areaList[type + '_list']) || {};
     },
     getList: function (type, code) {
-      var typeToColumnsPlaceholder = this.data.typeToColumnsPlaceholder;
-      var result = [];
       if (type !== 'province' && !code) {
-        return result;
+        return [];
       }
+      var typeToColumnsPlaceholder = this.data.typeToColumnsPlaceholder;
       var list = this.getConfig(type);
-      result = Object.keys(list).map(function (code) {
+      var result = Object.keys(list).map(function (code) {
         return {
           code: code,
           name: list[code],
@@ -149,8 +140,8 @@ component_1.VantComponent({
           type === 'province'
             ? ''
             : type === 'city'
-            ? COLUMNSPLACEHOLDERCODE.slice(2, 4)
+            ? EMPTY_CODE.slice(2, 4)
-            : COLUMNSPLACEHOLDERCODE.slice(4, 6);
+            : EMPTY_CODE.slice(4, 6);
         result.unshift({
           code: '' + code + codeFill,
           name: typeToColumnsPlaceholder[type],
@@ -174,35 +165,25 @@ component_1.VantComponent({
       return 0;
     },
     setValues: function () {
-      var county = this.getConfig('county');
-      var code = this.code;
-      if (!code) {
-        if (this.data.columnsPlaceholder.length) {
-          code = COLUMNSPLACEHOLDERCODE;
-        } else if (Object.keys(county)[0]) {
-          code = Object.keys(county)[0];
-        } else {
-          code = '';
-        }
-      }
-      var province = this.getList('province');
-      var city = this.getList('city', code.slice(0, 2));
       var picker = this.getPicker();
       if (!picker) {
         return;
       }
+      var code = this.code || this.getDefaultCode();
+      var provinceList = this.getList('province');
+      var cityList = this.getList('city', code.slice(0, 2));
       var stack = [];
       var indexes = [];
       var columnsNum = this.data.columnsNum;
       if (columnsNum >= 1) {
-        stack.push(picker.setColumnValues(0, province, false));
+        stack.push(picker.setColumnValues(0, provinceList, false));
         indexes.push(this.getIndex('province', code));
       }
       if (columnsNum >= 2) {
-        stack.push(picker.setColumnValues(1, city, false));
+        stack.push(picker.setColumnValues(1, cityList, false));
         indexes.push(this.getIndex('city', code));
-        if (city.length && code.slice(2, 4) === '00') {
+        if (cityList.length && code.slice(2, 4) === '00') {
-          code = city[0].code;
+          code = cityList[0].code;
         }
       }
       if (columnsNum === 3) {
@@ -222,13 +203,31 @@ component_1.VantComponent({
         })
         .catch(function () {});
     },
+    getDefaultCode: function () {
+      var columnsPlaceholder = this.data.columnsPlaceholder;
+      if (columnsPlaceholder.length) {
+        return EMPTY_CODE;
+      }
+      var countyCodes = Object.keys(this.getConfig('county'));
+      if (countyCodes[0]) {
+        return countyCodes[0];
+      }
+      var cityCodes = Object.keys(this.getConfig('city'));
+      if (cityCodes[0]) {
+        return cityCodes[0];
+      }
+      return '';
+    },
     getValues: function () {
       var picker = this.getPicker();
-      return picker
+      if (!picker) {
-        ? picker.getValues().filter(function (value) {
+        return [];
-            return !!value;
+      }
-          })
+      return this.parseValues(
-        : [];
+        picker.getValues().filter(function (value) {
+          return !!value;
+        })
+      );
     },
     getDetail: function () {
       var values = this.getValues();

lib/area/index.wxml

@@ -1,3 +1,5 @@
+<wxs src="./index.wxs" module="computed" />
+
 <van-picker
   class="van-area__picker"
   active-class="active-class"
@@ -7,7 +9,7 @@
   value-key="name"
   title="{{ title }}"
   loading="{{ loading }}"
-  columns="{{ displayColumns }}"
+  columns="{{ computed.displayColumns(columns, columnsNum) }}"
   item-height="{{ itemHeight }}"
   visible-item-count="{{ visibleItemCount }}"
   cancel-button-text="{{ cancelButtonText }}"

lib/area/index.wxs

@@ -0,0 +1,8 @@
+/* eslint-disable */
+function displayColumns(columns, columnsNum) {
+  return columns.slice(0, +columnsNum);
+}
+
+module.exports = {
+  displayColumns: displayColumns,
+};

lib/collapse-item/animate.js

@@ -0,0 +1,77 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.setContentAnimate = void 0;
+var version_1 = require('../common/version');
+var utils_1 = require('../common/utils');
+function useAnimate(context, expanded, mounted, height) {
+  var selector = '.van-collapse-item__wrapper';
+  if (expanded) {
+    context.animate(
+      selector,
+      [
+        { height: 0, ease: 'ease-in-out', offset: 0 },
+        { height: height + 'px', ease: 'ease-in-out', offset: 1 },
+        { height: 'auto', ease: 'ease-in-out', offset: 1 },
+      ],
+      mounted ? 300 : 0,
+      function () {
+        context.clearAnimation(selector);
+      }
+    );
+    return;
+  }
+  context.animate(
+    selector,
+    [
+      { height: height + 'px', ease: 'ease-in-out', offset: 0 },
+      { height: 0, ease: 'ease-in-out', offset: 1 },
+    ],
+    300,
+    function () {
+      context.clearAnimation(selector);
+    }
+  );
+}
+function useAnimation(context, expanded, mounted, height) {
+  var animation = wx.createAnimation({
+    duration: 0,
+    timingFunction: 'ease-in-out',
+  });
+  if (expanded) {
+    if (height === 0) {
+      animation.height('auto').top(1).step();
+    } else {
+      animation
+        .height(height)
+        .top(1)
+        .step({
+          duration: mounted ? 300 : 1,
+        })
+        .height('auto')
+        .step();
+    }
+    context.setData({
+      animation: animation.export(),
+    });
+    return;
+  }
+  animation.height(height).top(0).step({ duration: 1 }).height(0).step({
+    duration: 300,
+  });
+  context.setData({
+    animation: animation.export(),
+  });
+}
+function setContentAnimate(context, expanded, mounted) {
+  utils_1.getRect
+    .call(context, '.van-collapse-item__content')
+    .then(function (rect) {
+      return rect.height;
+    })
+    .then(function (height) {
+      version_1.canIUseAnimate()
+        ? useAnimate(context, expanded, mounted, height)
+        : useAnimation(context, expanded, mounted, height);
+    });
+}
+exports.setContentAnimate = setContentAnimate;

lib/collapse-item/index.js

@@ -1,6 +1,7 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
+var animate_1 = require('./animate');
 component_1.VantComponent({
   classes: ['title-class', 'content-class'],
   relation: {
@@ -28,20 +29,14 @@ component_1.VantComponent({
   data: {
     expanded: false,
   },
-  created: function () {
-    this.animation = wx.createAnimation({
-      duration: 0,
-      timingFunction: 'ease-in-out',
-    });
-  },
   mounted: function () {
     this.updateExpanded();
-    this.inited = true;
+    this.mounted = true;
   },
   methods: {
     updateExpanded: function () {
       if (!this.parent) {
-        return Promise.resolve();
+        return;
       }
       var _a = this.parent.data,
         value = _a.value,
@@ -57,45 +52,10 @@ component_1.VantComponent({
             return name === currentName;
           });
       if (expanded !== this.data.expanded) {
-        this.updateStyle(expanded);
+        animate_1.setContentAnimate(this, expanded, this.mounted);
       }
       this.setData({ index: index, expanded: expanded });
     },
-    updateStyle: function (expanded) {
-      var _this = this;
-      var inited = this.inited;
-      this.getRect('.van-collapse-item__content')
-        .then(function (rect) {
-          return rect.height;
-        })
-        .then(function (height) {
-          var animation = _this.animation;
-          if (expanded) {
-            if (height === 0) {
-              animation.height('auto').top(1).step();
-            } else {
-              animation
-                .height(height)
-                .top(1)
-                .step({
-                  duration: inited ? 300 : 1,
-                })
-                .height('auto')
-                .step();
-            }
-            _this.setData({
-              animation: animation.export(),
-            });
-            return;
-          }
-          animation.height(height).top(0).step({ duration: 1 }).height(0).step({
-            duration: 300,
-          });
-          _this.setData({
-            animation: animation.export(),
-          });
-        });
-    },
     onClick: function () {
       if (this.data.disabled) {
         return;

lib/common/utils.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.getAllRect = exports.getRect = exports.pickExclude = exports.requestAnimationFrame = exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = exports.isObj = exports.isDef = void 0;
+exports.toPromise = exports.getAllRect = exports.getRect = exports.pickExclude = exports.requestAnimationFrame = exports.addUnit = exports.getSystemInfoSync = exports.nextTick = exports.range = exports.isObj = exports.isDef = void 0;
 var validator_1 = require('./validator');
 function isDef(value) {
   return value !== undefined && value !== null;
@@ -95,3 +95,10 @@ function getAllRect(selector) {
   });
 }
 exports.getAllRect = getAllRect;
+function toPromise(promiseLike) {
+  if (validator_1.isPromise(promiseLike)) {
+    return promiseLike;
+  }
+  return Promise.resolve(promiseLike);
+}
+exports.toPromise = toPromise;

lib/common/version.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-exports.canIUseFormFieldButton = exports.canIUseModel = void 0;
+exports.canIUseAnimate = exports.canIUseFormFieldButton = exports.canIUseModel = void 0;
 var utils_1 = require('./utils');
 function compareVersion(v1, v2) {
   v1 = v1.split('.');
@@ -34,3 +34,8 @@ function canIUseFormFieldButton() {
   return compareVersion(system.SDKVersion, '2.10.3') >= 0;
 }
 exports.canIUseFormFieldButton = canIUseFormFieldButton;
+function canIUseAnimate() {
+  var system = utils_1.getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.9.0') >= 0;
+}
+exports.canIUseAnimate = canIUseAnimate;

lib/dialog/dialog.js

@@ -27,6 +27,7 @@ var defaultOptions = {
   selector: '#van-dialog',
   className: '',
   asyncClose: false,
+  beforeClose: null,
   transition: 'scale',
   customStyle: '',
   messageAlign: '',
@@ -52,7 +53,14 @@ var Dialog = function (options) {
     delete options.selector;
     if (dialog) {
       dialog.setData(
-        __assign({ onCancel: reject, onConfirm: resolve }, options)
+        __assign(
+          {
+            callback: function (action, instance) {
+              action === 'confirm' ? resolve(instance) : reject(instance);
+            },
+          },
+          options
+        )
       );
       wx.nextTick(function () {
         dialog.setData({ show: true });

lib/dialog/index.js

@@ -4,6 +4,7 @@ var component_1 = require('../common/component');
 var button_1 = require('../mixins/button');
 var open_type_1 = require('../mixins/open-type');
 var color_1 = require('../common/color');
+var utils_1 = require('../common/utils');
 component_1.VantComponent({
   mixins: [button_1.button, open_type_1.openType],
   props: {
@@ -24,6 +25,7 @@ component_1.VantComponent({
     customStyle: String,
     asyncClose: Boolean,
     messageAlign: String,
+    beforeClose: null,
     overlayStyle: String,
     useTitleSlot: Boolean,
     showCancelButton: Boolean,
@@ -79,16 +81,15 @@ component_1.VantComponent({
     onClickOverlay: function () {
       this.onClose('overlay');
     },
-    handleAction: function (action) {
+    close: function (action) {
-      var _a;
+      var _this = this;
-      if (this.data.asyncClose) {
+      this.setData({ show: false });
-        this.setData(((_a = {}), (_a['loading.' + action] = true), _a));
+      wx.nextTick(function () {
-      }
+        _this.$emit('close', action);
-      this.onClose(action);
+        var callback = _this.data.callback;
-    },
+        if (callback) {
-    close: function () {
+          callback(action, _this);
-      this.setData({
+        }
-        show: false,
       });
     },
     stopLoading: function () {
@@ -99,16 +100,26 @@ component_1.VantComponent({
         },
       });
     },
-    onClose: function (action) {
+    handleAction: function (action) {
-      if (!this.data.asyncClose) {
+      var _a;
-        this.close();
+      var _this = this;
-      }
-      this.$emit('close', action);
-      // 把 dialog 实例传递出去，可以通过 stopLoading() 在外部关闭按钮的 loading
       this.$emit(action, { dialog: this });
-      var callback = this.data[action === 'confirm' ? 'onConfirm' : 'onCancel'];
+      var _b = this.data,
-      if (callback) {
+        asyncClose = _b.asyncClose,
-        callback(this);
+        beforeClose = _b.beforeClose;
+      if (!asyncClose && !beforeClose) {
+        this.close(action);
+        return;
+      }
+      this.setData(((_a = {}), (_a['loading.' + action] = true), _a));
+      if (beforeClose) {
+        utils_1.toPromise(beforeClose(action)).then(function (value) {
+          if (value) {
+            _this.close(action);
+          } else {
+            _this.stopLoading();
+          }
+        });
       }
     },
   },

lib/dialog/index.json

@@ -3,7 +3,7 @@
   "usingComponents": {
     "van-popup": "../popup/index",
     "van-button": "../button/index",
-    "van-goods-action": "../goods-action//index",
+    "van-goods-action": "../goods-action/index",
     "van-goods-action-button": "../goods-action-button/index"
   }
 }

lib/dropdown-menu/index.js

@@ -97,20 +97,22 @@ component_1.VantComponent({
       var _a = this.data,
         zIndex = _a.zIndex,
         direction = _a.direction;
-      return this.getRect('.van-dropdown-menu').then(function (rect) {
+      return utils_1.getRect
-        var _a = rect.top,
+        .call(this, '.van-dropdown-menu')
-          top = _a === void 0 ? 0 : _a,
+        .then(function (rect) {
-          _b = rect.bottom,
+          var _a = rect.top,
-          bottom = _b === void 0 ? 0 : _b;
+            top = _a === void 0 ? 0 : _a,
-        var offset = direction === 'down' ? bottom : _this.windowHeight - top;
+            _b = rect.bottom,
-        var wrapperStyle = 'z-index: ' + zIndex + ';';
+            bottom = _b === void 0 ? 0 : _b;
-        if (direction === 'down') {
+          var offset = direction === 'down' ? bottom : _this.windowHeight - top;
-          wrapperStyle += 'top: ' + utils_1.addUnit(offset) + ';';
+          var wrapperStyle = 'z-index: ' + zIndex + ';';
-        } else {
+          if (direction === 'down') {
-          wrapperStyle += 'bottom: ' + utils_1.addUnit(offset) + ';';
+            wrapperStyle += 'top: ' + utils_1.addUnit(offset) + ';';
-        }
+          } else {
-        return wrapperStyle;
+            wrapperStyle += 'bottom: ' + utils_1.addUnit(offset) + ';';
-      });
+          }
+          return wrapperStyle;
+        });
     },
     onTitleTap: function (event) {
       var _this = this;

lib/field/index.wxml

@@ -99,7 +99,7 @@
     </view>
   </view>
   <view wx:if="{{ showWordLimit && maxlength }}" class="van-field__word-limit">
-    <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length }}</view>/{{ maxlength }}
+    <view class="{{ utils.bem('field__word-num', { full: value.length >= maxlength }) }}">{{ value.length >= maxlength ? maxlength : value.length }}</view>/{{ maxlength }}
   </view>
   <view wx:if="{{ errorMessage }}" class="{{ utils.bem('field__error-message', [errorMessageAlign, { disabled, error }]) }}">
     {{ errorMessage }}

lib/index-anchor/index.js

@@ -1,5 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
+var utils_1 = require('../common/utils');
 var component_1 = require('../common/component');
 component_1.VantComponent({
   relation: {
@@ -19,15 +20,14 @@ component_1.VantComponent({
   methods: {
     scrollIntoView: function (scrollTop) {
       var _this = this;
-      this.getBoundingClientRect().then(function (rect) {
+      utils_1.getRect
-        wx.pageScrollTo({
+        .call(this, '.van-index-anchor-wrapper')
-          duration: 0,
+        .then(function (rect) {
-          scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
+          wx.pageScrollTo({
+            duration: 0,
+            scrollTop: scrollTop + rect.top - _this.parent.data.stickyOffsetTop,
+          });
         });
-      });
-    },
-    getBoundingClientRect: function () {
-      return this.getRect('.van-index-anchor-wrapper');
     },
   },
 });

lib/info/index.wxml

@@ -2,6 +2,6 @@
 
 <view
   wx:if="{{ info !== null && info !== '' || dot }}"
-  class="custom-class van-info {{ utils.bem('info', { dot }) }}"
+  class="van-info {{ utils.bem('info', { dot }) }} custom-class"
   style="{{ customStyle }}"
 >{{ dot ? '' : info }}</view>

lib/info/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;height:16px;height:var(--info-size,16px);min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}
+@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;white-space:nowrap;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;height:16px;height:var(--info-size,16px);min-width:16px;min-width:var(--info-size,16px);padding:0 3px;padding:var(--info-padding,0 3px);color:#fff;color:var(--info-color,#fff);font-weight:500;font-weight:var(--info-font-weight,500);font-size:12px;font-size:var(--info-font-size,12px);font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,-apple-system-font,Helvetica Neue,Arial,sans-serif);background-color:#ee0a24;background-color:var(--info-background-color,#ee0a24);border:1px solid #fff;border:var(--info-border-width,1px) solid var(--white,#fff);border-radius:16px;border-radius:var(--info-size,16px)}.van-info--dot{min-width:0;border-radius:100%;width:8px;width:var(--info-dot-size,8px);height:8px;height:var(--info-dot-size,8px);background-color:#ee0a24;background-color:var(--info-dot-color,#ee0a24)}

lib/mixins/basic.js

@@ -12,22 +12,5 @@ exports.basic = Behavior({
         return wx.nextTick(resolve);
       });
     },
-    getRect: function (selector, all) {
-      var _this = this;
-      return new Promise(function (resolve) {
-        wx.createSelectorQuery()
-          .in(_this)
-          [all ? 'selectAll' : 'select'](selector)
-          .boundingClientRect(function (rect) {
-            if (all && Array.isArray(rect) && rect.length) {
-              resolve(rect);
-            }
-            if (!all && rect) {
-              resolve(rect);
-            }
-          })
-          .exec();
-      });
-    },
   },
 });

lib/mixins/link.js

@@ -16,7 +16,14 @@ exports.link = Behavior({
       }
       var url = this.data[urlKey];
       if (url) {
-        wx[this.data.linkType]({ url: url });
+        if (
+          this.data.linkType === 'navigateTo' &&
+          getCurrentPages().length > 9
+        ) {
+          wx.redirectTo({ url: url });
+        } else {
+          wx[this.data.linkType]({ url: url });
+        }
       }
     },
   },

lib/nav-bar/index.js

@@ -58,7 +58,9 @@ component_1.VantComponent({
       }
       wx.nextTick(function () {
         utils_1.getRect.call(_this, '.van-nav-bar').then(function (res) {
-          _this.setData({ height: res.height });
+          if (res && 'height' in res) {
+            _this.setData({ height: res.height });
+          }
         });
       });
     },

lib/nav-bar/index.wxs

@@ -1,15 +1,11 @@
 /* eslint-disable */
-function barStyle(data) {
+var style = require('../wxs/style.wxs');
-  var styles = [
-    ['z-index', data.zIndex],
-    ['padding-top', data.safeAreaInsetTop ? data.statusBarHeight + 'px' : 0],
-  ];
 
-  return styles
+function barStyle(data) {
-    .map(function (item) {
+  return style({
-      return item.join(':');
+    'z-index': data.zIndex,
-    })
+    'padding-top': data.safeAreaInsetTop ? data.statusBarHeight + 'px' : 0,
-    .join(';');
+  });
 }
 
 module.exports = {

lib/popup/index.wxml

@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <van-overlay
   wx:if="{{ overlay }}"
@@ -11,7 +12,7 @@
 <view
   wx:if="{{ inited }}"
   class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]) }}"
-  style="z-index: {{ zIndex }}; -webkit-transition-duration:{{ currentDuration }}ms; transition-duration:{{ currentDuration }}ms; {{ display ? '' : 'display: none;' }};{{ customStyle }}"
+  style="{{ computed.popupClass({ zIndex, currentDuration, display, customStyle }) }}"
   bind:transitionend="onTransitionEnd"
 >
   <slot />

lib/popup/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+
+function popupClass(data) {
+  return style([
+    {
+      'z-index': data.zIndex,
+      '-webkit-transition-duration': data.currentDuration + 'ms',
+      'transition-duration': data.currentDuration + 'ms',
+    },
+    data.display ? null : 'display: none',
+    data.customStyle,
+  ]);
+}
+
+module.exports = {
+  popupClass: popupClass,
+};

lib/progress/index.js

@@ -2,10 +2,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
 var color_1 = require('../common/color');
+var utils_1 = require('../common/utils');
 component_1.VantComponent({
   props: {
     inactive: Boolean,
-    percentage: Number,
+    percentage: {
+      type: Number,
+      observer: 'setLeft',
+    },
     pivotText: String,
     pivotColor: String,
     trackColor: String,
@@ -26,4 +30,27 @@ component_1.VantComponent({
       value: 4,
     },
   },
+  data: {
+    right: 0,
+  },
+  mounted: function () {
+    this.setLeft();
+  },
+  methods: {
+    setLeft: function () {
+      var _this = this;
+      Promise.all([
+        utils_1.getRect.call(this, '.van-progress'),
+        utils_1.getRect.call(this, '.van-progress__pivot'),
+      ]).then(function (_a) {
+        var portion = _a[0],
+          pivot = _a[1];
+        if (portion && pivot) {
+          _this.setData({
+            right: (pivot.width * (_this.data.percentage - 100)) / 100,
+          });
+        }
+      });
+    },
+  },
 });

lib/progress/index.wxml

@@ -1,20 +1,20 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="getters" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="van-progress custom-class"
-  style="height: {{ utils.addUnit(strokeWidth) }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
+  style="{{ computed.rootStyle({ strokeWidth, trackColor }) }}"
 >
   <view
     class="van-progress__portion"
-    style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
+    style="{{ computed.portionStyle({ percentage, inactive, color }) }}"
   >
     <view
-      wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
+      wx:if="{{ showPivot && computed.pivotText(pivotText, percentage) }}"
-      style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
+      style="{{ computed.pivotStyle({ textColor, pivotColor, inactive, color, right }) }}"
       class="van-progress__pivot"
     >
-      {{ getters.text(pivotText, percentage) }}
+      {{ computed.pivotText(pivotText, percentage) }}
     </view>
   </view>
 </view>

lib/progress/index.wxs

@@ -1,5 +1,36 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function pivotText(pivotText, percentage) {
+  return pivotText || percentage + '%';
+}
+
+function rootStyle(data) {
+  return style({
+    'height': data.strokeWidth ? utils.addUnit(data.strokeWidth) : '',
+    'background': data.trackColor,
+  });
+}
+
+function portionStyle(data) {
+  return style({
+    background: data.inactive ? '#cacaca' : data.color,
+    width: data.percentage ? data.percentage + '%' : '',
+  });
+}
+
+function pivotStyle(data) {
+  return style({
+    color: data.textColor,
+    right: data.right + 'px',
+    background: data.pivotColor ? data.pivotColor : data.inactive ? '#cacaca' : data.color,
+  });
+}
+
 module.exports = {
-  text: function(pivotText, percentage) {
+  pivotText: pivotText,
-    return pivotText || percentage + '%';
+  rootStyle: rootStyle,
-  }
+  portionStyle: portionStyle,
+  pivotStyle: pivotStyle,
 };

lib/progress/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-progress{position:relative;height:4px;height:var(--progress-height,4px);border-radius:4px;border-radius:var(--progress-height,4px);background:#ebedf0;background:var(--progress-background-color,#ebedf0)}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit;background:#1989fa;background:var(--progress-color,#1989fa)}.van-progress__pivot{position:absolute;top:50%;right:0;box-sizing:border-box;min-width:2em;text-align:center;word-break:keep-all;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;color:var(--progress-pivot-text-color,#fff);padding:0 5px;padding:var(--progress-pivot-padding,0 5px);font-size:10px;font-size:var(--progress-pivot-font-size,10px);line-height:1.6;line-height:var(--progress-pivot-line-height,1.6);background-color:#1989fa;background-color:var(--progress-pivot-background-color,#1989fa)}
+@import '../common/index.wxss';.van-progress{position:relative;height:4px;height:var(--progress-height,4px);border-radius:4px;border-radius:var(--progress-height,4px);background:#ebedf0;background:var(--progress-background-color,#ebedf0)}.van-progress__portion{position:absolute;left:0;height:100%;border-radius:inherit;background:#1989fa;background:var(--progress-color,#1989fa)}.van-progress__pivot{position:absolute;top:50%;box-sizing:border-box;min-width:3.6em;text-align:center;word-break:keep-all;border-radius:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#fff;color:var(--progress-pivot-text-color,#fff);padding:0 5px;padding:var(--progress-pivot-padding,0 5px);font-size:10px;font-size:var(--progress-pivot-font-size,10px);line-height:1.6;line-height:var(--progress-pivot-line-height,1.6);background-color:#1989fa;background-color:var(--progress-pivot-background-color,#1989fa)}

lib/rate/index.js

@@ -15,6 +15,7 @@ var __assign =
     return __assign.apply(this, arguments);
   };
 Object.defineProperty(exports, '__esModule', { value: true });
+var utils_1 = require('../common/utils');
 var component_1 = require('../common/component');
 var version_1 = require('../common/version');
 component_1.VantComponent({
@@ -91,7 +92,7 @@ component_1.VantComponent({
       var touchable = this.data.touchable;
       if (!touchable) return;
       var clientX = event.touches[0].clientX;
-      this.getRect('.van-rate__icon', true).then(function (list) {
+      utils_1.getAllRect.call(this, '.van-rate__icon').then(function (list) {
         var target = list
           .sort(function (item) {
             return item.right - item.left;

lib/slider/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var component_1 = require('../common/component');
 var touch_1 = require('../mixins/touch');
 var version_1 = require('../common/version');
+var utils_1 = require('../common/utils');
 component_1.VantComponent({
   mixins: [touch_1.touch],
   props: {
@@ -54,7 +55,7 @@ component_1.VantComponent({
       }
       this.touchMove(event);
       this.dragStatus = 'draging';
-      this.getRect('.van-slider').then(function (rect) {
+      utils_1.getRect.call(this, '.van-slider').then(function (rect) {
         var diff = (_this.deltaX / rect.width) * 100;
         _this.newValue = _this.startValue + diff;
         _this.updateValue(_this.newValue, false, true);
@@ -71,7 +72,7 @@ component_1.VantComponent({
       var _this = this;
       if (this.data.disabled) return;
       var min = this.data.min;
-      this.getRect('.van-slider').then(function (rect) {
+      utils_1.getRect.call(this, '.van-slider').then(function (rect) {
         var value =
           ((event.detail.x - rect.left) / rect.width) * _this.getRange() + min;
         _this.updateValue(value, true);

lib/sticky/index.js

@@ -1,5 +1,6 @@
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
+var utils_1 = require('../common/utils');
 var component_1 = require('../common/component');
 var page_scroll_1 = require('../mixins/page-scroll');
 var ROOT_ELEMENT = '.van-sticky';
@@ -62,29 +63,30 @@ component_1.VantComponent({
       }
       this.scrollTop = scrollTop || this.scrollTop;
       if (typeof container === 'function') {
-        Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(
+        Promise.all([
-          function (_a) {
+          utils_1.getRect.call(this, ROOT_ELEMENT),
-            var root = _a[0],
+          this.getContainerRect(),
-              container = _a[1];
+        ]).then(function (_a) {
-            if (offsetTop + root.height > container.height + container.top) {
+          var root = _a[0],
-              _this.setDataAfterDiff({
+            container = _a[1];
-                fixed: false,
+          if (offsetTop + root.height > container.height + container.top) {
-                transform: container.height - root.height,
+            _this.setDataAfterDiff({
-              });
+              fixed: false,
-            } else if (offsetTop >= root.top) {
+              transform: container.height - root.height,
-              _this.setDataAfterDiff({
+            });
-                fixed: true,
+          } else if (offsetTop >= root.top) {
-                height: root.height,
+            _this.setDataAfterDiff({
-                transform: 0,
+              fixed: true,
-              });
+              height: root.height,
-            } else {
+              transform: 0,
-              _this.setDataAfterDiff({ fixed: false, transform: 0 });
+            });
-            }
+          } else {
+            _this.setDataAfterDiff({ fixed: false, transform: 0 });
           }
-        );
+        });
         return;
       }
-      this.getRect(ROOT_ELEMENT).then(function (root) {
+      utils_1.getRect.call(this, ROOT_ELEMENT).then(function (root) {
         if (offsetTop >= root.top) {
           _this.setDataAfterDiff({ fixed: true, height: root.height });
           _this.transform = 0;

lib/sticky/index.wxs

@@ -1,37 +1,24 @@
 /* eslint-disable */
+var style = require('../wxs/style.wxs');
+
 function wrapStyle(data) {
-  var style = '';
+  return style({
-
+    transform: data.transform
-  if (data.transform) {
+      ? 'translate3d(0, ' + data.transform + 'px, 0)'
-    style += 'transform: translate3d(0, ' + data.transform + 'px, 0);';
+      : '',
-  }
+    top: data.fixed ? data.offsetTop + 'px' : '',
-
+    'z-index': data.zIndex,
-  if (data.fixed) {
+  });
-    style += 'top: ' + data.offsetTop + 'px;';
-  }
-
-  if (data.zIndex) {
-    style += 'z-index: ' + data.zIndex + ';';
-  }
-
-  return style;
 }
 
 function containerStyle(data) {
-  var style = '';
+  return style({
-
+    height: data.fixed ? data.height + 'px' : '',
-  if (data.fixed) {
+    'z-index': data.zIndex,
-    style += 'height: ' + data.height + 'px;';
+  });
-  }
-
-  if (data.zIndex) {
-    style += 'z-index: ' + data.zIndex + ';';
-  }
-
-  return style;
 }
 
 module.exports = {
   wrapStyle: wrapStyle,
-  containerStyle: containerStyle
+  containerStyle: containerStyle,
 };

lib/tabs/index.js

@@ -41,7 +41,7 @@ component_1.VantComponent({
     lineWidth: {
       type: [String, Number],
       value: 40,
-      observer: 'setLine',
+      observer: 'resize',
     },
     lineHeight: {
       type: [String, Number],
@@ -104,7 +104,7 @@ component_1.VantComponent({
   mounted: function () {
     var _this = this;
     wx.nextTick(function () {
-      _this.setLine(true);
+      _this.resize(true);
       _this.scrollIntoView();
     });
   },
@@ -192,7 +192,7 @@ component_1.VantComponent({
       var shouldEmitChange = data.currentIndex !== null;
       this.setData({ currentIndex: currentIndex });
       wx.nextTick(function () {
-        _this.setLine();
+        _this.resize();
         _this.scrollIntoView();
         _this.updateContainer();
         _this.trigger('input');
@@ -207,7 +207,7 @@ component_1.VantComponent({
         return activeTab.getComputedName();
       }
     },
-    setLine: function (skipTransition) {
+    resize: function (skipTransition) {
       var _this = this;
       if (skipTransition === void 0) {
         skipTransition = false;

lib/tabs/index.wxml

@@ -1,5 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="getters" />
+<wxs src="./index.wxs" module="computed" />
 
 <view class="custom-class {{ utils.bem('tabs', [type]) }}">
   <van-sticky
@@ -19,14 +19,14 @@
         class="{{ utils.bem('tabs__scroll', [type]) }}"
         style="{{ color ? 'border-color: ' + color : '' }}"
       >
-        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
+        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ computed.navStyle(color, type) }}">
-          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ getters.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
+          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ computed.lineStyle({ color, lineOffsetLeft, lineHeight, skipTransition, duration, lineWidth }) }}" />
           <view
             wx:for="{{ tabs }}"
             wx:key="index"
             data-index="{{ index }}"
-            class="{{ getters.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
+            class="{{ computed.tabClass(index === currentIndex, ellipsis) }} {{ utils.bem('tab', { active: index === currentIndex, disabled: item.disabled, complete: !ellipsis }) }}"
-            style="{{ getters.tabStyle(index === currentIndex, ellipsis, color, type, item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable) }}"
+            style="{{ computed.tabStyle({ active: index === currentIndex, ellipsis, color, type, disabled: item.disabled, titleActiveColor, titleInactiveColor, swipeThreshold, scrollable }) }}"
             bind:tap="onTap"
           >
             <view class="{{ ellipsis ? 'van-ellipsis' : '' }}" style="{{ item.titleStyle }}">
@@ -55,7 +55,7 @@
   >
     <view
       class="{{ utils.bem('tabs__track', [{ animated }]) }} van-tabs__track"
-      style="{{ getters.trackStyle({ duration, currentIndex, animated }) }}"
+      style="{{ computed.trackStyle({ duration, currentIndex, animated }) }}"
     >
       <slot />
     </view>

lib/tabs/index.wxs

@@ -1,5 +1,6 @@
 /* eslint-disable */
 var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
 
 function tabClass(active, ellipsis) {
   var classes = ['tab-class'];
@@ -15,51 +16,33 @@ function tabClass(active, ellipsis) {
   return classes.join(' ');
 }
 
-function tabStyle(
+function tabStyle(data) {
-  active,
+  var titleColor = data.active
-  ellipsis,
+    ? data.titleActiveColor
-  color,
+    : data.titleInactiveColor;
-  type,
+
-  disabled,
+  var ellipsis = data.scrollable && data.ellipsis;
-  activeColor,
+
-  inactiveColor,
-  swipeThreshold,
-  scrollable
-) {
-  var styles = [];
-  var isCard = type === 'card';
   // card theme color
-  if (color && isCard) {
+  if (data.type === 'card') {
-    styles.push('border-color:' + color);
+    return style({
-
+      'border-color': data.color,
-    if (!disabled) {
+      'background-color': !data.disabled && data.active ? data.color : null,
-      if (active) {
+      color: titleColor || (!data.disabled && !data.active ? data.color : null),
-        styles.push('background-color:' + color);
+      'flex-basis': ellipsis ? 88 / data.swipeThreshold + '%' : null,
-      } else {
+    });
-        styles.push('color:' + color);
-      }
-    }
   }
 
-  var titleColor = active ? activeColor : inactiveColor;
+  return style({
-  if (titleColor) {
+    color: titleColor,
-    styles.push('color:' + titleColor);
+    'flex-basis': ellipsis ? 88 / data.swipeThreshold + '%' : null,
-  }
+  });
-
-  if (scrollable && ellipsis) {
-    styles.push('flex-basis:' + 88 / swipeThreshold + '%');
-  }
-
-  return styles.join(';');
 }
 
-function tabCardTypeBorderStyle(color, type) {
+function navStyle(color, type) {
-  var isCard = type === 'card';
+  return style({
-  var styles = [];
+    'border-color': type === 'card' && color ? color : null,
-  if (isCard && color) {
+  });
-    styles.push('border-color:' + color);
-  }
-  return styles.join(';');
 }
 
 function trackStyle(data) {
@@ -67,43 +50,27 @@ function trackStyle(data) {
     return '';
   }
 
-  return [
+  return style({
-    ['left', -100 * data.currentIndex + '%'],
+    left: -100 * data.currentIndex + '%',
-    ['-webkit-transition-duration', data.duration + 's'],
+    'transition-duration': data.duration + 's',
-    ['transition-duration: ', data.duration + 's'],
+    '-webkit-transition-duration': data.duration + 's',
-  ]
+  });
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
 }
 
 function lineStyle(data) {
-  var styles = [
+  return style({
-    ['width', utils.addUnit(data.lineWidth)],
+    width: utils.addUnit(data.lineWidth),
-    ['transform', 'translateX(' + data.lineOffsetLeft + 'px)'],
+    transform: 'translateX(' + data.lineOffsetLeft + 'px)',
-    ['-webkit-transform', 'translateX(' + data.lineOffsetLeft + 'px)'],
+    '-webkit-transform': 'translateX(' + data.lineOffsetLeft + 'px)',
-  ];
+    'background-color': data.color,
-
+    height: data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
-  if (data.color) {
+    'border-radius':
-    styles.push(['background-color', data.color]);
+      data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
-  }
+    'transition-duration': !data.skipTransition ? data.duration + 's' : null,
-
+    '-webkit-transition-duration': !data.skipTransition
-  if (data.lineHeight !== -1) {
+      ? data.duration + 's'
-    styles.push(['height', utils.addUnit(data.lineHeight)]);
+      : null,
-    styles.push(['border-radius', utils.addUnit(data.lineHeight)]);
+  });
-  }
-
-  if (!data.skipTransition) {
-    styles.push(['transition-duration', data.duration + 's']);
-    styles.push(['-webkit-transition-duration', data.duration + 's']);
-  }
-
-  return styles
-    .map(function (item) {
-      return item.join(':');
-    })
-    .join(';');
 }
 
 module.exports = {
@@ -111,5 +78,5 @@ module.exports = {
   tabStyle: tabStyle,
   trackStyle: trackStyle,
   lineStyle: lineStyle,
-  tabCardTypeBorderStyle: tabCardTypeBorderStyle,
+  navStyle: navStyle,
 };

lib/tree-select/index.js

@@ -67,7 +67,7 @@ component_1.VantComponent({
         mainActiveIndex = _a.mainActiveIndex;
       var _b = (items[mainActiveIndex] || {}).children,
         children = _b === void 0 ? [] : _b;
-      return this.set({ subItems: children });
+      this.setData({ subItems: children });
     },
   },
 });

lib/uploader/index.wxss

@@ -1 +1 @@
-@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;height:80px;margin:0 8px 8px 0;background-color:#f7f8fa}.van-uploader__upload:active{background-color:#f2f3f5}.van-uploader__upload-icon{color:#dcdee0;font-size:24px}.van-uploader__upload-text{margin-top:8px;color:#969799;font-size:12px}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;margin:0 8px 8px 0;cursor:pointer}.van-uploader__preview-image{display:block;width:80px;height:80px;overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:14px;height:14px;padding:0 0 8px 8px}.van-uploader__preview-delete:after{position:absolute;top:0;right:0;width:14px;height:14px;background-color:rgba(0,0,0,.7);border-radius:0 0 0 12px;content:""}.van-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;z-index:1;color:#fff;font-size:16px;-webkit-transform:scale(.5);transform:scale(.5)}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;height:80px;background-color:#f7f8fa}.van-uploader__file-icon{color:#646566;font-size:20px}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:8px;padding:0 4px;color:#646566;font-size:12px;text-align:center}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;background-color:rgba(50,50,51,.88)}.van-uploader__mask-icon{font-size:22px}.van-uploader__mask-message{margin-top:6px;padding:0 4px;font-size:12px;line-height:14px}.van-uploader__loading{width:22px;height:22px;color:#fff!important}
+@import '../common/index.wxss';.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}.van-uploader__slot:empty{display:none}.van-uploader__slot:not(:empty)+.van-uploader__upload{display:none!important}.van-uploader__upload{position:relative;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:80px;width:var(--uploader-size,80px);height:80px;height:var(--uploader-size,80px);margin:0 8px 8px 0;margin:0 var(--padding-xs,8px) var(--padding-xs,8px) 0;background-color:#f7f8fa;background-color:var(--uploader-upload-background-color,#f7f8fa)}.van-uploader__upload:active{background-color:#f2f3f5;background-color:var(--uploader-upload-active-color,#f2f3f5)}.van-uploader__upload-icon{color:#dcdee0;color:var(--uploader-icon-color,#dcdee0);font-size:24px;font-size:var(--uploader-icon-size,24px)}.van-uploader__upload-text{margin-top:8px;margin-top:var(--padding-xs,8px);color:#969799;color:var(--uploader-text-color,#969799);font-size:12px;font-size:var(--uploader-text-font-size,12px)}.van-uploader__upload--disabled{opacity:.5;opacity:var(--uploader-disabled-opacity,.5)}.van-uploader__preview{position:relative;cursor:pointer;margin:0 8px 8px 0;margin:0 var(--padding-xs,8px) var(--padding-xs,8px) 0}.van-uploader__preview-image{display:block;overflow:hidden;width:80px;width:var(--uploader-size,80px);height:80px;height:var(--uploader-size,80px)}.van-uploader__preview-delete{padding:0 0 8px 8px;padding:0 0 var(--padding-xs,8px) var(--padding-xs,8px)}.van-uploader__preview-delete,.van-uploader__preview-delete:after{position:absolute;top:0;right:0;width:14px;width:var(--uploader-delete-icon-size,14px);height:14px;height:var(--uploader-delete-icon-size,14px)}.van-uploader__preview-delete:after{content:"";background-color:rgba(0,0,0,.7);background-color:var(--uploader-delete-background-color,rgba(0,0,0,.7));border-radius:0 0 0 12px;border-radius:0 0 0 calc(var(--uploader-delete-icon-size, 14px) - 2px)}.van-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;z-index:1;-webkit-transform:scale(.5);transform:scale(.5);font-size:16px;font-size:calc(var(--uploader-delete-icon-size, 14px) + 2px);color:#fff;color:var(--uploader-delete-color,#fff)}.van-uploader__file{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;width:80px;width:var(--uploader-size,80px);height:80px;height:var(--uploader-size,80px);background-color:#f7f8fa;background-color:var(--uploader-file-background-color,#f7f8fa)}.van-uploader__file-icon{color:#646566;color:var(--uploader-file-icon-color,#646566);font-size:20px;font-size:var(--uploader-file-icon-size,20px)}.van-uploader__file-name{box-sizing:border-box;width:100%;text-align:center;margin-top:8px;margin-top:var(--uploader-file-name-margin-top,8px);padding:0 4px;padding:var(--uploader-file-name-padding,0 4px);color:#646566;color:var(--uploader-file-name-text-color,#646566);font-size:12px;font-size:var(--uploader-file-name-font-size,12px)}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;color:#fff;color:var(--white,#fff);background-color:rgba(50,50,51,.88);background-color:var(--uploader-mask-background-color,rgba(50,50,51,.88))}.van-uploader__mask-icon{font-size:22px;font-size:var(--uploader-mask-icon-size,22px)}.van-uploader__mask-message{margin-top:6px;padding:0 4px;padding:0 var(--padding-base,4px);font-size:12px;font-size:var(--uploader-mask-message-font-size,12px);line-height:14px;line-height:var(--uploader-mask-message-line-height,14px)}.van-uploader__loading{width:22px;width:var(--uploader-loading-icon-size,22px);height:22px;height:var(--uploader-loading-icon-size,22px);color:#fff!important;color:var(--uploader-loading-icon-color,#fff)!important}

lib/wxs/add-unit.wxs

@@ -9,6 +9,4 @@ function addUnit(value) {
   return REGEXP.test('' + value) ? value + 'px' : value;
 }
 
-module.exports = {
+module.exports = addUnit;
-  addUnit: addUnit
-};

lib/wxs/bem.wxs

@@ -1,3 +1,4 @@
+/* eslint-disable */
 var array = require('./array.wxs');
 var object = require('./object.wxs');
 var PREFIX = 'van-';
@@ -35,4 +36,4 @@ function bem(name, conf) {
   return join(name, mods);
 }
 
-module.exports.bem = bem;
+module.exports = bem;

lib/wxs/memoize.wxs

@@ -2,6 +2,7 @@
  * Simple memoize
  * wxs doesn't support fn.apply, so this memoize only support up to 2 args
  */
+/* eslint-disable */
 
 function isPrimitive(value) {
   var type = typeof value;
@@ -51,4 +52,4 @@ function memoize(fn) {
   };
 }
 
-module.exports.memoize = memoize;
+module.exports = memoize;

lib/wxs/style.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var object = require('./object.wxs');
+var array = require('./array.wxs');
+
+function style(styles) {
+  if (array.isArray(styles)) {
+    return styles
+      .filter(function (item) {
+        return item != null;
+      })
+      .map(function (item) {
+        return style(item);
+      })
+      .join(';');
+  }
+
+  if ('Object' === styles.constructor) {
+    return object
+      .keys(styles)
+      .filter(function (key) {
+        return styles[key] != null;
+      })
+      .map(function (key) {
+        return [key, [styles[key]]].join(':');
+      })
+      .join(';');
+  }
+
+  return styles;
+}
+
+module.exports = style;

lib/wxs/utils.wxs

@@ -1,7 +1,7 @@
 /* eslint-disable */
-var bem = require('./bem.wxs').bem;
+var bem = require('./bem.wxs');
-var memoize = require('./memoize.wxs').memoize;
+var memoize = require('./memoize.wxs');
-var addUnit = require('./add-unit.wxs').addUnit;
+var addUnit = require('./add-unit.wxs');
 
 module.exports = {
   bem: memoize(bem),