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

2025-04-05 19:41:45 +08:00 · 2020-09-17 19:53:17 +08:00 · 2020-09-17 19:53:17 +08:00 · 790144616f
commit 790144616f
parent b43d9bad6c 50bf83a497
284 changed files with 3947 additions and 1338 deletions
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -1,3 +1,3 @@
 你好，请使用下面的链接创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。

-https://youzan.github.io/vant-issue-generater?repo=VantWeapp
+http://vant-contrib.gitee.io/vant-issue-generater?repo=VantWeapp
--- a/.github/workflows/sync.yml
+++ b/.github/workflows/sync.yml
@ -0,0 +1,30 @@
+name: Sync to Gitee
+
+on:
+  push:
+    branches: [dev]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Sync to Gitee
+        uses: wearerequired/git-mirror-action@master
+        env:
+          # 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
+          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
+        with:
+          # 注意替换为你的 GitHub 源仓库地址
+          source-repo: 'git@github.com:youzan/vant-weapp.git'
+          # 注意替换为你的 Gitee 目标仓库地址
+          destination-repo: 'git@gitee.com:vant-contrib/vant-weapp.git'
+
+      - name: Build Gitee Pages
+        uses: yanglbme/gitee-pages-action@master
+        with:
+          # 注意替换为你的 Gitee 用户名
+          gitee-username: chenjiahan
+          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
+          gitee-password: ${{ secrets.GITEE_PASSWORD }}
+          # 注意替换为你的 Gitee 仓库
+          gitee-repo: vant-contrib/vant-weapp
--- a/README.md
+++ b/README.md
@ -11,19 +11,19 @@
 </p>

 <p align="center">
-  🔥 <a href="https://youzan.github.io/vant-weapp">文档网站</a>
-  &nbsp;
-  &nbsp;
-  💡 <a href="https://vant-contrib.gitee.io/vant-weapp">国内镜像文档</a>
+  🔥 <a href="https://vant-contrib.gitee.io/vant-weapp">文档网站</a>
  &nbsp;
  &nbsp;
  🚀 <a href="https://github.com/youzan/vant" target="_blank">Vue 版</a>
 </p>
+
 ---

-## 介绍
+### 介绍

-Vant Weapp 是移动端 Vue 组件库 [Vant](https://github.com/youzan/vant) 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
+Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万前端开发者，是业界主流的移动端组件库之一。
+
+目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。

 ## 预览

@ -111,7 +111,7 @@ Vant Weapp 最低支持到小程序基础库 1.9.9 版本

 我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

- <a target="_blank" href="https://app.mokahr.com/apply/youzan/6252#/job/96f5d2c7-e657-4d31-9244-195edc443a7f?_k=jf2141">职位详情</a>（Base: 杭州/深圳）
+- <a target="_blank" href="https://app.mokahr.com/apply/youzan/3750#/jobs/?keyword=%E5%89%8D%E7%AB%AF&_k=tueqds">职位详情</a>（Base: 杭州/深圳）
 - <a target="_blank" href="https://tech.youzan.com/tag/front-end/">团队博客</a>
 - <a target="_blank" href="https://github.com/youzan">开源项目</a>

@ -120,7 +120,7 @@ Vant Weapp 最低支持到小程序基础库 1.9.9 版本
 * [更新日志](https://github.com/youzan/vant-weapp/blob/dev/docs/markdown/changelog.md)
 * [意见反馈](https://github.com/youzan/vant-weapp/issues)
 * [加入我们](https://job.youzan.com)
-* [Vant: 移动端 Vue UI](https://github.com/youzan/vant)
+* [Vant Vue 版](https://github.com/youzan/vant)

 ## 开源协议

--- a/dist/area/index.js
+++ b/dist/area/index.js
@ -1,5 +1,6 @@
 import { VantComponent } from '../common/component';
 import { pickerProps } from '../picker/shared';
+import { requestAnimationFrame } from '../common/utils';
 const COLUMNSPLACEHOLDERCODE = '000000';
 VantComponent({
  classes: ['active-class', 'toolbar-class', 'column-class'],
@ -44,9 +45,9 @@ VantComponent({
    typeToColumnsPlaceholder: {},
  },
  mounted() {
-    setTimeout(() => {
+    requestAnimationFrame(() => {
      this.setValues();
-    }, 0);
+    });
  },
  methods: {
    getPicker() {
@ -165,27 +166,32 @@ VantComponent({
        return;
      }
      const stack = [];
-      stack.push(picker.setColumnValues(0, province, false));
-      stack.push(picker.setColumnValues(1, city, false));
-      if (city.length && code.slice(2, 4) === '00') {
-        [{ code }] = city;
+      const indexes = [];
+      const { columnsNum } = this.data;
+      if (columnsNum >= 1) {
+        stack.push(picker.setColumnValues(0, province, false));
+        indexes.push(this.getIndex('province', code));
+      }
+      if (columnsNum >= 2) {
+        stack.push(picker.setColumnValues(1, city, false));
+        indexes.push(this.getIndex('city', code));
+        if (city.length && code.slice(2, 4) === '00') {
+          [{ code }] = city;
+        }
+      }
+      if (columnsNum === 3) {
+        stack.push(
+          picker.setColumnValues(
+            2,
+            this.getList('county', code.slice(0, 4)),
+            false
+          )
+        );
+        indexes.push(this.getIndex('county', code));
      }
-      stack.push(
-        picker.setColumnValues(
-          2,
-          this.getList('county', code.slice(0, 4)),
-          false
-        )
-      );
      return Promise.all(stack)
        .catch(() => {})
-        .then(() =>
-          picker.setIndexes([
-            this.getIndex('province', code),
-            this.getIndex('city', code),
-            this.getIndex('county', code),
-          ])
-        )
+        .then(() => picker.setIndexes(indexes))
        .catch(() => {});
    },
    getValues() {
--- a/dist/button/index.js
+++ b/dist/button/index.js
@ -1,13 +1,19 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
+import { canIUseFormFieldButton } from '../common/version';
+const mixins = [button, openType];
+if (canIUseFormFieldButton()) {
+  mixins.push('wx://form-field-button');
+}
 VantComponent({
-  mixins: [button, openType],
+  mixins,
  classes: ['hover-class', 'loading-class'],
  data: {
    baseStyle: '',
  },
  props: {
+    formType: String,
    icon: String,
    classPrefix: {
      type: String,
--- a/dist/button/index.wxml
+++ b/dist/button/index.wxml
@ -6,6 +6,7 @@
  class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
  hover-class="van-button--active hover-class"
  lang="{{ lang }}"
+  form-type="{{ formType }}"
  style="{{ baseStyle }} {{ customStyle }}"
  open-type="{{ disabled ? '' : openType }}"
  business-id="{{ businessId }}"
--- a/dist/calendar/index.js
+++ b/dist/calendar/index.js
@ -11,6 +11,7 @@ import {
  getDayByOffset,
 } from './utils';
 import Toast from '../toast/toast';
+import { requestAnimationFrame } from '../common/utils';
 VantComponent({
  props: {
    title: {
@ -152,12 +153,12 @@ VantComponent({
        ];
      }
      if (type === 'multiple') {
-        return [defaultDate || minDate];
+        return defaultDate || [minDate];
      }
      return defaultDate || minDate;
    },
    scrollIntoView() {
-      setTimeout(() => {
+      requestAnimationFrame(() => {
        const {
          currentDate,
          type,
@ -179,7 +180,7 @@ VantComponent({
          }
          return false;
        });
-      }, 100);
+      });
    },
    onOpen() {
      this.$emit('open');
@ -276,7 +277,10 @@ VantComponent({
      return true;
    },
    onConfirm() {
-      if (this.data.type === 'range' && !this.checkRange()) {
+      if (
+        this.data.type === 'range' &&
+        !this.checkRange(this.data.currentDate)
+      ) {
        return;
      }
      wx.nextTick(() => {
--- a/dist/calendar/index.json
+++ b/dist/calendar/index.json
@ -4,6 +4,7 @@
    "header": "./components/header/index",
    "month": "./components/month/index",
    "van-button": "../button/index",
-    "van-popup": "../popup/index"
+    "van-popup": "../popup/index",
+    "van-toast": "../toast/index"
  }
 }
--- a/dist/cell/index.js
+++ b/dist/cell/index.js
@ -27,6 +27,7 @@ VantComponent({
      type: Boolean,
      value: true,
    },
+    titleStyle: String,
  },
  methods: {
    onClick(event) {
--- a/dist/cell/index.wxml
+++ b/dist/cell/index.wxml
@ -16,7 +16,7 @@
  <slot wx:else name="icon" />

  <view
-    style="{{ titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth : '' }}"
+    style="{{ (titleWidth ? 'max-width:' + titleWidth + ';min-width:' + titleWidth + ';' : '') + titleStyle }}"
    class="van-cell__title title-class"
  >
    <block wx:if="{{ title }}">{{ title }}</block>
--- a/dist/cell/index.wxss
+++ b/dist/cell/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:auto;right:0;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:3px;margin-top:var(--cell-label-margin-top,3px);font-size:12px;font-size:var(--cell-label-font-size,12px);line-height:18px;line-height:var(--cell-label-line-height,18px);color:#969799;color:var(--cell-label-color,#969799)}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:24px;height:var(--cell-line-height,24px);font-size:16px;font-size:var(--cell-icon-size,16px)}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5;background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;content:"*";left:8px;left:var(--padding-xs,8px);font-size:14px;font-size:var(--cell-font-size,14px);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-top:var(--cell-large-vertical-padding,12px);padding-bottom:12px;padding-bottom:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:16px;font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:16px;font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:14px;font-size:var(--cell-large-label-font-size,14px)}
+@import '../common/index.wxss';.van-cell{position:relative;display:-webkit-flex;display:flex;box-sizing:border-box;width:100%;padding:10px 16px;padding:var(--cell-vertical-padding,10px) var(--cell-horizontal-padding,16px);font-size:14px;font-size:var(--cell-font-size,14px);line-height:24px;line-height:var(--cell-line-height,24px);color:#323233;color:var(--cell-text-color,#323233);background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;right:16px;bottom:0;left:16px;border-bottom:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-cell--borderless:after{display:none}.van-cell-group{background-color:#fff;background-color:var(--cell-background-color,#fff)}.van-cell__label{margin-top:3px;margin-top:var(--cell-label-margin-top,3px);font-size:12px;font-size:var(--cell-label-font-size,12px);line-height:18px;line-height:var(--cell-label-line-height,18px);color:#969799;color:var(--cell-label-color,#969799)}.van-cell__value{overflow:hidden;text-align:right;vertical-align:middle;color:#969799;color:var(--cell-value-color,#969799)}.van-cell__title,.van-cell__value{-webkit-flex:1;flex:1}.van-cell__title:empty,.van-cell__value:empty{display:none}.van-cell__left-icon-wrap,.van-cell__right-icon-wrap{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;height:24px;height:var(--cell-line-height,24px);font-size:16px;font-size:var(--cell-icon-size,16px)}.van-cell__left-icon-wrap{margin-right:5px}.van-cell__right-icon-wrap{margin-left:5px;color:#969799;color:var(--cell-right-icon-color,#969799)}.van-cell__left-icon{vertical-align:middle}.van-cell__left-icon,.van-cell__right-icon{line-height:24px;line-height:var(--cell-line-height,24px)}.van-cell--clickable.van-cell--hover{background-color:#f2f3f5;background-color:var(--cell-active-color,#f2f3f5)}.van-cell--required{overflow:visible}.van-cell--required:before{position:absolute;content:"*";left:8px;left:var(--padding-xs,8px);font-size:14px;font-size:var(--cell-font-size,14px);color:#ee0a24;color:var(--cell-required-color,#ee0a24)}.van-cell--center{-webkit-align-items:center;align-items:center}.van-cell--large{padding-top:12px;padding-top:var(--cell-large-vertical-padding,12px);padding-bottom:12px;padding-bottom:var(--cell-large-vertical-padding,12px)}.van-cell--large .van-cell__title{font-size:16px;font-size:var(--cell-large-title-font-size,16px)}.van-cell--large .van-cell__value{font-size:16px;font-size:var(--cell-large-value-font-size,16px)}.van-cell--large .van-cell__label{font-size:14px;font-size:var(--cell-large-label-font-size,14px)}
--- a/dist/circle/canvas.d.ts
+++ b/dist/circle/canvas.d.ts
@ -0,0 +1,6 @@
+/// <reference types="miniprogram-api-typings" />
+declare type CanvasContext = WechatMiniprogram.CanvasContext;
+export declare function adaptor(
+  ctx: CanvasRenderingContext2D
+): CanvasContext & CanvasRenderingContext2D;
+export {};
--- a/dist/circle/canvas.js
+++ b/dist/circle/canvas.js
@ -0,0 +1,43 @@
+export function adaptor(ctx) {
+  // @ts-ignore
+  return Object.assign(ctx, {
+    setStrokeStyle(val) {
+      ctx.strokeStyle = val;
+    },
+    setLineWidth(val) {
+      ctx.lineWidth = val;
+    },
+    setLineCap(val) {
+      ctx.lineCap = val;
+    },
+    setFillStyle(val) {
+      ctx.fillStyle = val;
+    },
+    setFontSize(val) {
+      ctx.font = String(val);
+    },
+    setGlobalAlpha(val) {
+      ctx.globalAlpha = val;
+    },
+    setLineJoin(val) {
+      ctx.lineJoin = val;
+    },
+    setTextAlign(val) {
+      ctx.textAlign = val;
+    },
+    setMiterLimit(val) {
+      ctx.miterLimit = val;
+    },
+    setShadow(offsetX, offsetY, blur, color) {
+      ctx.shadowOffsetX = offsetX;
+      ctx.shadowOffsetY = offsetY;
+      ctx.shadowBlur = blur;
+      ctx.shadowColor = color;
+    },
+    setTextBaseline(val) {
+      ctx.textBaseline = val;
+    },
+    createCircularGradient() {},
+    draw() {},
+  });
+}
--- a/dist/circle/index.js
+++ b/dist/circle/index.js
@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { isObj } from '../common/utils';
 import { BLUE, WHITE } from '../common/color';
+import { adaptor } from './canvas';
 function format(rate) {
  return Math.min(Math.max(rate, 0), 100);
 }
@ -26,6 +27,9 @@ VantComponent({
    size: {
      type: Number,
      value: 100,
+      observer() {
+        this.drawCircle(this.currentValue);
+      },
    },
    fill: String,
    layerColor: {
@ -35,7 +39,11 @@ VantComponent({
    color: {
      type: [String, Object],
      value: BLUE,
-      observer: 'setHoverColor',
+      observer() {
+        this.setHoverColor().then(() => {
+          this.drawCircle(this.currentValue);
+        });
+      },
    },
    type: {
      type: String,
@ -55,25 +63,45 @@ VantComponent({
  },
  methods: {
    getContext() {
-      if (!this.ctx) {
-        this.ctx = wx.createCanvasContext('van-circle', this);
+      const { type, size } = this.data;
+      if (type === '') {
+        const ctx = wx.createCanvasContext('van-circle', this);
+        return Promise.resolve(ctx);
      }
-      return this.ctx;
+      const dpr = wx.getSystemInfoSync().pixelRatio;
+      return new Promise((resolve) => {
+        wx.createSelectorQuery()
+          .in(this)
+          .select('#van-circle')
+          .node()
+          .exec((res) => {
+            const canvas = res[0].node;
+            const ctx = canvas.getContext(type);
+            if (!this.inited) {
+              this.inited = true;
+              canvas.width = size * dpr;
+              canvas.height = size * dpr;
+              ctx.scale(dpr, dpr);
+            }
+            resolve(adaptor(ctx));
+          });
+      });
    },
    setHoverColor() {
-      const { color, size, type } = this.data;
-      const context = type ? this.getContext(type) : this.getContext();
-      let hoverColor = color;
+      const { color, size } = this.data;
      if (isObj(color)) {
-        const LinearColor = context.createLinearGradient(size, 0, 0, 0);
-        Object.keys(color)
-          .sort((a, b) => parseFloat(a) - parseFloat(b))
-          .map((key) =>
-            LinearColor.addColorStop(parseFloat(key) / 100, color[key])
-          );
-        hoverColor = LinearColor;
+        return this.getContext().then((context) => {
+          const LinearColor = context.createLinearGradient(size, 0, 0, 0);
+          Object.keys(color)
+            .sort((a, b) => parseFloat(a) - parseFloat(b))
+            .map((key) =>
+              LinearColor.addColorStop(parseFloat(key) / 100, color[key])
+            );
+          this.hoverColor = LinearColor;
+        });
      }
-      this.setData({ hoverColor });
+      this.hoverColor = color;
+      return Promise.resolve();
    },
    presetCanvas(context, strokeStyle, beginAngle, endAngle, fill) {
      const { strokeWidth, lineCap, clockwise, size } = this.data;
@ -95,24 +123,25 @@ VantComponent({
      this.presetCanvas(context, layerColor, 0, PERIMETER, fill);
    },
    renderHoverCircle(context, formatValue) {
-      const { clockwise, hoverColor } = this.data;
+      const { clockwise } = this.data;
      // 结束角度
      const progress = PERIMETER * (formatValue / 100);
      const endAngle = clockwise
        ? BEGIN_ANGLE + progress
        : 3 * Math.PI - (BEGIN_ANGLE + progress);
-      this.presetCanvas(context, hoverColor, BEGIN_ANGLE, endAngle);
+      this.presetCanvas(context, this.hoverColor, BEGIN_ANGLE, endAngle);
    },
    drawCircle(currentValue) {
-      const { size, type } = this.data;
-      const context = type ? this.getContext(type) : this.getContext();
-      context.clearRect(0, 0, size, size);
-      this.renderLayerCircle(context);
-      const formatValue = format(currentValue);
-      if (formatValue !== 0) {
-        this.renderHoverCircle(context, formatValue);
-      }
-      context.draw();
+      const { size } = this.data;
+      this.getContext().then((context) => {
+        context.clearRect(0, 0, size, size);
+        this.renderLayerCircle(context);
+        const formatValue = format(currentValue);
+        if (formatValue !== 0) {
+          this.renderHoverCircle(context, formatValue);
+        }
+        context.draw();
+      });
    },
    reRender() {
      // tofector 动画暂时没有想到好的解决方案
@ -143,13 +172,13 @@ VantComponent({
      }
    },
  },
-  created() {
-    const { value } = this.data;
-    this.currentValue = value;
-    this.drawCircle(value);
+  mounted() {
+    this.currentValue = this.data.value;
+    this.setHoverColor().then(() => {
+      this.drawCircle(this.currentValue);
+    });
  },
  destroyed() {
-    this.ctx = null;
    this.clearInterval();
  },
 });
--- a/dist/circle/index.wxml
+++ b/dist/circle/index.wxml
@ -1,9 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />

 <view class="van-circle">
-  <canvas class="van-circle__canvas" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" canvas-id="van-circle"></canvas>
+  <canvas class="van-circle__canvas" type="{{ type }}" style="width: {{ utils.addUnit(size) }};height:{{ utils.addUnit(size) }}" id="van-circle" canvas-id="van-circle"></canvas>
  <view wx:if="{{ !text }}" class="van-circle__text">
    <slot></slot>
  </view>
  <cover-view wx:else class="van-circle__text">{{ text }}</cover-view>
-</view>
+</view>
--- a/dist/collapse-item/index.js
+++ b/dist/collapse-item/index.js
@ -1,5 +1,4 @@
 import { VantComponent } from '../common/component';
-const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20));
 VantComponent({
  classes: ['title-class', 'content-class'],
  relation: {
@ -25,20 +24,17 @@ VantComponent({
    },
  },
  data: {
-    contentHeight: 0,
    expanded: false,
-    transition: false,
+  },
+  created() {
+    this.animation = wx.createAnimation({
+      duration: 0,
+      timingFunction: 'ease-in-out',
+    });
  },
  mounted() {
-    this.updateExpanded()
-      .then(nextTick)
-      .then(() => {
-        const data = { transition: true };
-        if (this.data.expanded) {
-          data.contentHeight = 'auto';
-        }
-        this.setData(data);
-      });
+    this.updateExpanded();
+    this.inited = true;
  },
  methods: {
    updateExpanded() {
@ -53,25 +49,41 @@ VantComponent({
      const expanded = accordion
        ? value === currentName
        : (value || []).some((name) => name === currentName);
-      const stack = [];
      if (expanded !== this.data.expanded) {
-        stack.push(this.updateStyle(expanded));
+        this.updateStyle(expanded);
      }
-      stack.push(this.set({ index, expanded }));
-      return Promise.all(stack);
+      this.setData({ index, expanded });
    },
    updateStyle(expanded) {
-      return this.getRect('.van-collapse-item__content')
+      const { inited } = this;
+      this.getRect('.van-collapse-item__content')
        .then((rect) => rect.height)
        .then((height) => {
+          const { animation } = this;
          if (expanded) {
-            return this.set({
-              contentHeight: height ? `${height}px` : 'auto',
+            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;
          }
-          return this.set({ contentHeight: `${height}px` })
-            .then(nextTick)
-            .then(() => this.set({ contentHeight: 0 }));
+          animation.height(height).top(0).step({ duration: 1 }).height(0).step({
+            duration: 300,
+          });
+          this.setData({
+            animation: animation.export(),
+          });
        });
    },
    onClick() {
@ -83,12 +95,5 @@ VantComponent({
      const currentName = name == null ? index : name;
      this.parent.switch(currentName, !expanded);
    },
-    onTransitionEnd() {
-      if (this.data.expanded) {
-        this.setData({
-          contentHeight: 'auto',
-        });
-      }
-    },
  },
 });
--- a/dist/collapse-item/index.wxml
+++ b/dist/collapse-item/index.wxml
@ -31,9 +31,9 @@
    />
  </van-cell>
  <view
-    class="{{ utils.bem('collapse-item__wrapper', { transition }) }}"
-    style="height: {{ contentHeight }};"
-    bind:transitionend="onTransitionEnd"
+    class="{{ utils.bem('collapse-item__wrapper') }}"
+    style="height: 0;"
+    animation="{{ animation }}"
  >
    <view
      class="van-collapse-item__content content-class"
--- a/dist/collapse-item/index.wxss
+++ b/dist/collapse-item/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;transition:-webkit-transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s),-webkit-transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c8c9cc!important;color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important;background-color:var(--white,#fff)!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__wrapper--transition{transition:height .3s ease-in-out}.van-collapse-item__content{padding:15px;padding:var(--collapse-item-content-padding,15px);color:#969799;color:var(--collapse-item-content-text-color,#969799);font-size:13px;font-size:var(--collapse-item-content-font-size,13px);line-height:1.5;line-height:var(--collapse-item-content-line-height,1.5);background-color:#fff;background-color:var(--collapse-item-content-background-color,#fff)}
+@import '../common/index.wxss';.van-collapse-item__title .van-cell__right-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;transition:-webkit-transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s);transition:transform var(--collapse-item-transition-duration,.3s),-webkit-transform var(--collapse-item-transition-duration,.3s)}.van-collapse-item__title--expanded .van-cell__right-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.van-collapse-item__title--disabled .van-cell,.van-collapse-item__title--disabled .van-cell__right-icon{color:#c8c9cc!important;color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.van-collapse-item__title--disabled .van-cell--hover{background-color:#fff!important;background-color:var(--white,#fff)!important}.van-collapse-item__wrapper{overflow:hidden}.van-collapse-item__content{padding:15px;padding:var(--collapse-item-content-padding,15px);color:#969799;color:var(--collapse-item-content-text-color,#969799);font-size:13px;font-size:var(--collapse-item-content-font-size,13px);line-height:1.5;line-height:var(--collapse-item-content-line-height,1.5);background-color:#fff;background-color:var(--collapse-item-content-background-color,#fff)}
--- a/dist/common/index.wxss
+++ b/dist/common/index.wxss
@ -1 +1 @@
-.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
+.van-ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.van-multi-ellipsis--l2{-webkit-line-clamp:2}.van-multi-ellipsis--l2,.van-multi-ellipsis--l3{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical}.van-multi-ellipsis--l3{-webkit-line-clamp:3}.van-clearfix:after{display:table;clear:both;content:""}.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
--- a/dist/common/style/hairline.wxss
+++ b/dist/common/style/hairline.wxss
@ -1 +1 @@
-.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;-webkit-transform-origin:center;transform-origin:center;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #eee;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
+.van-hairline,.van-hairline--bottom,.van-hairline--left,.van-hairline--right,.van-hairline--surround,.van-hairline--top,.van-hairline--top-bottom{position:relative}.van-hairline--bottom:after,.van-hairline--left:after,.van-hairline--right:after,.van-hairline--surround:after,.van-hairline--top-bottom:after,.van-hairline--top:after,.van-hairline:after{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:-50%;right:-50%;bottom:-50%;left:-50%;border:0 solid #ebedf0;-webkit-transform:scale(.5);transform:scale(.5)}.van-hairline--top:after{border-top-width:1px}.van-hairline--left:after{border-left-width:1px}.van-hairline--right:after{border-right-width:1px}.van-hairline--bottom:after{border-bottom-width:1px}.van-hairline--top-bottom:after{border-width:1px 0}.van-hairline--surround:after{border-width:1px}
--- a/dist/common/utils.d.ts
+++ b/dist/common/utils.d.ts
@ -6,3 +6,6 @@ export declare function range(num: number, min: number, max: number): number;
 export declare function nextTick(fn: Function): void;
 export declare function getSystemInfoSync(): WechatMiniprogram.GetSystemInfoSyncResult;
 export declare function addUnit(value?: string | number): string | undefined;
+export declare function requestAnimationFrame(
+  cb: Function
+): void | WechatMiniprogram.NodesRef;
--- a/dist/common/utils.js
+++ b/dist/common/utils.js
@ -1,32 +1,45 @@
 export function isDef(value) {
-    return value !== undefined && value !== null;
+  return value !== undefined && value !== null;
 }
 export function isObj(x) {
-    const type = typeof x;
-    return x !== null && (type === 'object' || type === 'function');
+  const type = typeof x;
+  return x !== null && (type === 'object' || type === 'function');
 }
 export function isNumber(value) {
-    return /^\d+(\.\d+)?$/.test(value);
+  return /^\d+(\.\d+)?$/.test(value);
 }
 export function range(num, min, max) {
-    return Math.min(Math.max(num, min), max);
+  return Math.min(Math.max(num, min), max);
 }
 export function nextTick(fn) {
-    setTimeout(() => {
-        fn();
-    }, 1000 / 30);
+  setTimeout(() => {
+    fn();
+  }, 1000 / 30);
 }
 let systemInfo = null;
 export function getSystemInfoSync() {
-    if (systemInfo == null) {
-        systemInfo = wx.getSystemInfoSync();
-    }
-    return systemInfo;
+  if (systemInfo == null) {
+    systemInfo = wx.getSystemInfoSync();
+  }
+  return systemInfo;
 }
 export function addUnit(value) {
-    if (!isDef(value)) {
-        return undefined;
-    }
-    value = String(value);
-    return isNumber(value) ? `${value}px` : value;
+  if (!isDef(value)) {
+    return undefined;
+  }
+  value = String(value);
+  return isNumber(value) ? `${value}px` : value;
+}
+export function requestAnimationFrame(cb) {
+  const systemInfo = getSystemInfoSync();
+  if (systemInfo.platform === 'devtools') {
+    return nextTick(cb);
+  }
+  return wx
+    .createSelectorQuery()
+    .selectViewport()
+    .boundingClientRect()
+    .exec(() => {
+      cb();
+    });
 }
--- a/dist/common/version.d.ts
+++ b/dist/common/version.d.ts
@ -1 +1,2 @@
 export declare function canIUseModel(): boolean;
+export declare function canIUseFormFieldButton(): boolean;
--- a/dist/common/version.js
+++ b/dist/common/version.js
@ -25,3 +25,7 @@ export function canIUseModel() {
  const system = getSystemInfoSync();
  return compareVersion(system.SDKVersion, '2.9.3') >= 0;
 }
+export function canIUseFormFieldButton() {
+  const system = getSystemInfoSync();
+  return compareVersion(system.SDKVersion, '2.10.3') >= 0;
+}
--- a/dist/datetime-picker/index.js
+++ b/dist/datetime-picker/index.js
@ -89,7 +89,7 @@ VantComponent({
  methods: {
    updateValue() {
      const { data } = this;
-      const val = this.correctValue(this.data.value);
+      const val = this.correctValue(data.value);
      const isEqual = val === data.innerValue;
      if (!isEqual) {
        this.updateColumnValue(val).then(() => {
@ -251,12 +251,16 @@ VantComponent({
      const { data } = this;
      let value;
      const picker = this.getPicker();
+      const originColumns = this.getOriginColumns();
      if (data.type === 'time') {
        const indexes = picker.getIndexes();
-        value = `${+data.columns[0].values[indexes[0]]}:${+data.columns[1]
+        value = `${+originColumns[0].values[indexes[0]]}:${+originColumns[1]
          .values[indexes[1]]}`;
      } else {
-        const values = picker.getValues();
+        const indexes = picker.getIndexes();
+        const values = indexes.map(
+          (value, index) => originColumns[index].values[value]
+        );
        const year = getTrueValue(values[0]);
        const month = getTrueValue(values[1]);
        const maxDate = getMonthEndDay(year, month);
@ -281,7 +285,8 @@ VantComponent({
    },
    updateColumnValue(value) {
      let values = [];
-      const { type, formatter = defaultFormatter } = this.data;
+      const { type } = this.data;
+      const formatter = this.data.formatter || defaultFormatter;
      const picker = this.getPicker();
      if (type === 'time') {
        const pair = value.split(':');
--- a/dist/dialog/dialog.d.ts
+++ b/dist/dialog/dialog.d.ts
@ -1,47 +1,50 @@
 /// <reference types="miniprogram-api-typings" />
 declare type DialogAction = 'confirm' | 'cancel';
 declare type DialogOptions = {
-    lang?: string;
-    show?: boolean;
-    title?: string;
-    width?: string | number;
-    zIndex?: number;
-    context?: WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
-    message?: string;
-    overlay?: boolean;
-    selector?: string;
-    ariaLabel?: string;
-    className?: string;
-    customStyle?: string;
-    transition?: string;
-    asyncClose?: boolean;
-    businessId?: number;
-    sessionFrom?: string;
-    overlayStyle?: string;
-    appParameter?: string;
-    messageAlign?: string;
-    sendMessageImg?: string;
-    showMessageCard?: boolean;
-    sendMessagePath?: string;
-    sendMessageTitle?: string;
-    confirmButtonText?: string;
-    cancelButtonText?: string;
-    showConfirmButton?: boolean;
-    showCancelButton?: boolean;
-    closeOnClickOverlay?: boolean;
-    confirmButtonOpenType?: string;
+  lang?: string;
+  show?: boolean;
+  title?: string;
+  width?: string | number;
+  zIndex?: number;
+  theme?: string;
+  context?:
+    | WechatMiniprogram.Page.TrivialInstance
+    | WechatMiniprogram.Component.TrivialInstance;
+  message?: string;
+  overlay?: boolean;
+  selector?: string;
+  ariaLabel?: string;
+  className?: string;
+  customStyle?: string;
+  transition?: string;
+  asyncClose?: boolean;
+  businessId?: number;
+  sessionFrom?: string;
+  overlayStyle?: string;
+  appParameter?: string;
+  messageAlign?: string;
+  sendMessageImg?: string;
+  showMessageCard?: boolean;
+  sendMessagePath?: string;
+  sendMessageTitle?: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
+  showConfirmButton?: boolean;
+  showCancelButton?: boolean;
+  closeOnClickOverlay?: boolean;
+  confirmButtonOpenType?: string;
 };
 interface Dialog {
-    (options: DialogOptions): Promise<DialogAction>;
-    alert?: (options: DialogOptions) => Promise<DialogAction>;
-    confirm?: (options: DialogOptions) => Promise<DialogAction>;
-    close?: () => void;
-    stopLoading?: () => void;
-    install?: () => void;
-    setDefaultOptions?: (options: DialogOptions) => void;
-    resetDefaultOptions?: () => void;
-    defaultOptions?: DialogOptions;
-    currentOptions?: DialogOptions;
+  (options: DialogOptions): Promise<DialogAction>;
+  alert?: (options: DialogOptions) => Promise<DialogAction>;
+  confirm?: (options: DialogOptions) => Promise<DialogAction>;
+  close?: () => void;
+  stopLoading?: () => void;
+  install?: () => void;
+  setDefaultOptions?: (options: DialogOptions) => void;
+  resetDefaultOptions?: () => void;
+  defaultOptions?: DialogOptions;
+  currentOptions?: DialogOptions;
 }
 declare const Dialog: Dialog;
 export default Dialog;
--- a/dist/dialog/dialog.js
+++ b/dist/dialog/dialog.js
@ -14,6 +14,9 @@ const Dialog = (options) => {
      dialog.setData(
        Object.assign({ onCancel: reject, onConfirm: resolve }, options)
      );
+      wx.nextTick(() => {
+        dialog.setData({ show: true });
+      });
      queue.push(dialog);
    } else {
      console.warn(
@ -23,9 +26,10 @@ const Dialog = (options) => {
  });
 };
 Dialog.defaultOptions = {
-  show: true,
+  show: false,
  title: '',
  width: null,
+  theme: 'default',
  message: '',
  zIndex: 100,
  overlay: true,
--- a/dist/dialog/index.js
+++ b/dist/dialog/index.js
@ -1,7 +1,7 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
-import { GRAY, BLUE } from '../common/color';
+import { GRAY, RED } from '../common/color';
 VantComponent({
  mixins: [button, openType],
  props: {
@ -13,6 +13,10 @@ VantComponent({
    },
    title: String,
    message: String,
+    theme: {
+      type: String,
+      value: 'default',
+    },
    useSlot: Boolean,
    className: String,
    customStyle: String,
@ -38,7 +42,7 @@ VantComponent({
    },
    confirmButtonColor: {
      type: String,
-      value: BLUE,
+      value: RED,
    },
    cancelButtonColor: {
      type: String,
--- a/dist/dialog/index.json
+++ b/dist/dialog/index.json
@ -2,6 +2,8 @@
  "component": true,
  "usingComponents": {
    "van-popup": "../popup/index",
-    "van-button": "../button/index"
+    "van-button": "../button/index",
+    "van-goods-action": "../goods-action//index",
+    "van-goods-action-button": "../goods-action-button/index"
  }
 }
--- a/dist/dialog/index.wxml
+++ b/dist/dialog/index.wxml
@ -5,7 +5,7 @@
  z-index="{{ zIndex }}"
  overlay="{{ overlay }}"
  transition="{{ transition }}"
-  custom-class="van-dialog {{ className }}"
+  custom-class="van-dialog van-dialog--{{ theme }} {{ className }}"
  custom-style="width: {{ utils.addUnit(width) }};{{ customStyle }}"
  overlay-style="{{ overlayStyle }}"
  close-on-click-overlay="{{ closeOnClickOverlay }}"
@ -13,7 +13,7 @@
 >
  <view
    wx:if="{{ title || useTitleSlot  }}"
-    class="van-dialog__header {{ message || useSlot ? '' : 'van-dialog--isolated' }}"
+    class="{{ utils.bem('dialog__header', { isolated: !(message || useSlot) }) }}"
  >
    <slot wx:if="{{ useTitleSlot }}" name="title" />
    <block wx:elif="{{ title }}">{{ title }}</block>
@ -22,12 +22,54 @@
  <slot wx:if="{{ useSlot }}" />
  <view
    wx:elif="{{ message }}"
-    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
+    class="{{ utils.bem('dialog__message', [theme, messageAlign, { hasTitle: title }]) }}"
  >
    <text class="van-dialog__message-text">{{ message }}</text>
  </view>

-  <view class="van-hairline--top van-dialog__footer">
+  <van-goods-action wx:if="{{ theme === 'round-button' }}" custom-class="van-dialog__footer--round-button">
+    <van-goods-action-button
+      wx:if="{{ showCancelButton }}"
+      size="large"
+      loading="{{ loading.cancel }}"
+      class="van-dialog__button van-hairline--right"
+      custom-class="van-dialog__cancel"
+      custom-style="color: {{ cancelButtonColor }}"
+      bind:click="onCancel"
+    >
+      {{ cancelButtonText }}
+    </van-goods-action-button>
+    <van-goods-action-button
+      wx:if="{{ showConfirmButton }}"
+      size="large"
+      class="van-dialog__button"
+      loading="{{ loading.confirm }}"
+      custom-class="van-dialog__confirm"
+      custom-style="color: {{ confirmButtonColor }}"
+
+      open-type="{{ confirmButtonOpenType }}"
+      lang="{{ lang }}"
+      business-id="{{ businessId }}"
+      session-from="{{ sessionFrom }}"
+      send-message-title="{{ sendMessageTitle }}"
+      send-message-path="{{ sendMessagePath }}"
+      send-message-img="{{ sendMessageImg }}"
+      show-message-card="{{ showMessageCard }}"
+      app-parameter="{{ appParameter }}"
+
+      bind:click="onConfirm"
+      bindgetuserinfo="bindGetUserInfo"
+      bindcontact="bindContact"
+      bindgetphonenumber="bindGetPhoneNumber"
+      binderror="bindError"
+      bindlaunchapp="bindLaunchApp"
+      bindopensetting="bindOpenSetting"
+    >
+      {{ confirmButtonText }}
+    </van-goods-action-button>
+  </van-goods-action>
+
+  <view wx:else class="van-hairline--top van-dialog__footer">
    <van-button
      wx:if="{{ showCancelButton }}"
      size="large"
--- a/dist/dialog/index.wxss
+++ b/dist/dialog/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-dialog{top:45%!important;overflow:hidden;width:320px;width:var(--dialog-width,320px);font-size:16px;font-size:var(--dialog-font-size,16px);border-radius:16px;border-radius:var(--dialog-border-radius,16px);background-color:#fff;background-color:var(--dialog-background-color,#fff)}@media (max-width:321px){.van-dialog{width:90%;width:var(--dialog-small-screen-width,90%)}}.van-dialog__header{text-align:center;padding-top:24px;padding-top:var(--dialog-header-padding-top,24px);font-weight:500;font-weight:var(--dialog-header-font-weight,500);line-height:24px;line-height:var(--dialog-header-line-height,24px)}.van-dialog__header--isolated{padding:24px 0;padding:var(--dialog-header-isolated-padding,24px 0)}.van-dialog__message{overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch;font-size:14px;font-size:var(--dialog-message-font-size,14px);line-height:20px;line-height:var(--dialog-message-line-height,20px);max-height:60vh;max-height:var(--dialog-message-max-height,60vh);padding:24px;padding:var(--dialog-message-padding,24px)}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--has-title{padding-top:12px;padding-top:var(--dialog-has-title-message-padding-top,12px);color:#646566;color:var(--dialog-has-title-message-text-color,#646566)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
+@import '../common/index.wxss';.van-dialog{top:45%!important;overflow:hidden;width:320px;width:var(--dialog-width,320px);font-size:16px;font-size:var(--dialog-font-size,16px);border-radius:16px;border-radius:var(--dialog-border-radius,16px);background-color:#fff;background-color:var(--dialog-background-color,#fff)}@media (max-width:321px){.van-dialog{width:90%;width:var(--dialog-small-screen-width,90%)}}.van-dialog__header{text-align:center;padding-top:24px;padding-top:var(--dialog-header-padding-top,24px);font-weight:500;font-weight:var(--dialog-header-font-weight,500);line-height:24px;line-height:var(--dialog-header-line-height,24px)}.van-dialog__header--isolated{padding:24px 0;padding:var(--dialog-header-isolated-padding,24px 0)}.van-dialog__message{overflow-y:auto;text-align:center;-webkit-overflow-scrolling:touch;font-size:14px;font-size:var(--dialog-message-font-size,14px);line-height:20px;line-height:var(--dialog-message-line-height,20px);max-height:60vh;max-height:var(--dialog-message-max-height,60vh);padding:24px;padding:var(--dialog-message-padding,24px)}.van-dialog__message-text{word-wrap:break-word}.van-dialog__message--hasTitle{padding-top:8px;padding-top:var(--dialog-has-title-message-padding-top,8px);color:#646566;color:var(--dialog-has-title-message-text-color,#646566)}.van-dialog__message--round-button{padding-bottom:16px;color:#323233}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{display:-webkit-flex;display:flex}.van-dialog__footer--round-button{position:relative!important;padding:8px 24px 16px!important}.van-dialog__button{-webkit-flex:1;flex:1}.van-dialog__cancel,.van-dialog__confirm{border:0!important}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}
--- a/dist/empty/index.d.ts
+++ b/dist/empty/index.d.ts
@ -0,0 +1 @@
+export {};
--- a/dist/empty/index.js
+++ b/dist/empty/index.js
@ -0,0 +1,20 @@
+import { VantComponent } from '../common/component';
+const PRESETS = ['error', 'search', 'default', 'network'];
+VantComponent({
+  props: {
+    description: String,
+    image: {
+      type: String,
+      value: 'default',
+    },
+  },
+  created() {
+    if (PRESETS.indexOf(this.data.image) !== -1) {
+      this.setData({
+        imageUrl: `https://img.yzcdn.cn/vant/empty-image-${this.data.image}.png`,
+      });
+    } else {
+      this.setData({ imageUrl: this.data.image });
+    }
+  },
+});
--- a/dist/empty/index.json
+++ b/dist/empty/index.json
@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
--- a/dist/empty/index.wxml
+++ b/dist/empty/index.wxml
@ -0,0 +1,21 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="custom-class van-empty">
+  <view class="van-empty__image">
+    <slot name="image"></slot>
+  </view>
+  <view class="van-empty__image">
+    <image wx:if="{{ imageUrl }}" class="van-empty__image__img" src="{{ imageUrl }}" />
+  </view>
+
+  <view class="van-empty__description">
+    <slot name="description"></slot>
+  </view>
+  <view class="van-empty__description">
+    {{ description }}
+  </view>
+
+  <view class="van-empty__bottom">
+    <slot></slot>
+  </view>
+</view>
--- a/dist/empty/index.wxss
+++ b/dist/empty/index.wxss
@ -0,0 +1 @@
+@import '../common/index.wxss';.van-empty{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;padding:32px 0}.van-empty__image{width:160px;height:160px}.van-empty__image:empty{display:none}.van-empty__image__img{width:100%;height:100%}.van-empty__image:not(:empty)+.van-empty__image{display:none}.van-empty__description{margin-top:16px;padding:0 60px;color:#969799;font-size:14px;line-height:20px}.van-empty__description:empty,.van-empty__description:not(:empty)+.van-empty__description{display:none}.van-empty__bottom{margin-top:24px}
--- a/dist/field/index.js
+++ b/dist/field/index.js
@ -1,9 +1,8 @@
 import { VantComponent } from '../common/component';
 import { commonProps, inputProps, textareaProps } from './props';
-import { canIUseModel } from '../common/version';
 VantComponent({
  field: true,
-  classes: ['input-class', 'right-icon-class'],
+  classes: ['input-class', 'right-icon-class', 'label-class'],
  props: Object.assign(
    Object.assign(
      Object.assign(Object.assign({}, commonProps), inputProps),
@ -19,16 +18,8 @@ VantComponent({
      leftIcon: String,
      rightIcon: String,
      autosize: [Boolean, Object],
-      readonly: {
-        type: Boolean,
-        observer: 'setShowClear',
-      },
      required: Boolean,
      iconClass: String,
-      clearable: {
-        type: Boolean,
-        observer: 'setShowClear',
-      },
      clickable: Boolean,
      inputAlign: String,
      customStyle: String,
@ -36,13 +27,21 @@ VantComponent({
      arrowDirection: String,
      showWordLimit: Boolean,
      errorMessageAlign: String,
+      readonly: {
+        type: Boolean,
+        observer: 'setShowClear',
+      },
+      clearable: {
+        type: Boolean,
+        observer: 'setShowClear',
+      },
      border: {
        type: Boolean,
        value: true,
      },
      titleWidth: {
        type: String,
-        value: '90px',
+        value: '6.2em',
      },
    }
  ),
@ -105,9 +104,7 @@ VantComponent({
      this.$emit('keyboardheightchange', event.detail);
    },
    emitChange() {
-      if (canIUseModel()) {
-        this.setData({ value: this.value });
-      }
+      this.setData({ value: this.value });
      wx.nextTick(() => {
        this.$emit('input', this.value);
        this.$emit('change', this.value);
--- a/dist/field/index.wxml
+++ b/dist/field/index.wxml
@ -4,19 +4,23 @@
 <van-cell
  size="{{ size }}"
  icon="{{ leftIcon }}"
-  title="{{ label }}"
  center="{{ center }}"
  border="{{ border }}"
  is-link="{{ isLink }}"
  required="{{ required }}"
  clickable="{{ clickable }}"
  title-width="{{ titleWidth }}"
+  title-style="margin-right: 12px;"
  custom-style="{{ customStyle }}"
  arrow-direction="{{ arrowDirection }}"
  custom-class="van-field"
+  title-class="label-class"
 >
  <slot name="left-icon" slot="icon" />
-  <slot name="label" slot="title" />
+  <view wx:if="{{ label }}" class="{{ utils.bem('field__label', { disabled }) }}" slot="title">
+    {{ label }}
+  </view>
+  <slot wx:else name="label" slot="title" />
  <view class="{{ utils.bem('field__body', [type]) }}">
    <textarea
      wx:if="{{ type === 'textarea' }}"
@ -30,7 +34,7 @@
      maxlength="{{ maxlength }}"
      placeholder="{{ placeholder }}"
      placeholder-style="{{ placeholderStyle }}"
-      placeholder-class="{{ utils.bem('field__placeholder', { error }) }}"
+      placeholder-class="{{ utils.bem('field__placeholder', { error, disabled }) }}"
      auto-height="{{ !!autosize }}"
      style="{{ computed.inputStyle(autosize) }}"
      cursor-spacing="{{ cursorSpacing }}"
--- a/dist/field/index.wxss
+++ b/dist/field/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-field{--cell-icon-size:16px;--cell-icon-size:var(--field-icon-size,16px)}.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{line-height:1.2em}.van-field__body--textarea,.van-field__input{min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__input{position:relative;display:block;box-sizing:border-box;width:100%;margin:0;padding:0;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none;color:#323233;color:var(--field-input-text-color,#323233);height:24px;height:var(--cell-line-height,24px)}.van-field__input--textarea{height:18px;height:var(--field-text-area-min-height,18px);min-height:18px;min-height:var(--field-text-area-min-height,18px)}.van-field__input--error{color:#ee0a24;color:var(--field-input-error-text-color,#ee0a24)}.van-field__input--disabled{background-color:initial;opacity:1;color:#969799;color:var(--field-input-disabled-text-color,#969799)}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__placeholder{position:absolute;top:0;right:0;left:0;pointer-events:none;color:#c8c9cc;color:var(--field-placeholder-text-color,#c8c9cc)}.van-field__placeholder--error{color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__icon-root{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__clear-root,.van-field__icon-container{line-height:inherit;vertical-align:middle;padding:0 8px;padding:0 var(--padding-xs,8px);margin-right:-8px;margin-right:-var(--padding-xs,8px)}.van-field__button,.van-field__clear-root,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear-root{font-size:16px;font-size:var(--field-clear-icon-size,16px);color:#c8c9cc;color:var(--field-clear-icon-color,#c8c9cc)}.van-field__icon-container{font-size:16px;font-size:var(--field-icon-size,16px);color:#969799;color:var(--field-icon-container-color,#969799)}.van-field__icon-container:empty{display:none}.van-field__button{padding-left:8px;padding-left:var(--padding-xs,8px)}.van-field__button:empty{display:none}.van-field__error-message{text-align:left;font-size:12px;font-size:var(--field-error-message-text-font-size,12px);color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{text-align:right;margin-top:4px;margin-top:var(--padding-base,4px);color:#646566;color:var(--field-word-limit-color,#646566);font-size:12px;font-size:var(--field-word-limit-font-size,12px);line-height:16px;line-height:var(--field-word-limit-line-height,16px)}.van-field__word-num{display:inline}.van-field__word-num--full{color:#ee0a24;color:var(--field-word-num-full-color,#ee0a24)}
+@import '../common/index.wxss';.van-field{--cell-icon-size:16px;--cell-icon-size:var(--field-icon-size,16px)}.van-field__label{color:#646566;color:var(--field-label-color,#646566)}.van-field__label--disabled{color:#c8c9cc;color:var(--field-disabled-text-color,#c8c9cc)}.van-field__body{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center}.van-field__body--textarea{padding:3.6px 0;line-height:1.2em}.van-field__body--textarea,.van-field__input{box-sizing:border-box;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__input{position:relative;display:block;width:100%;margin:0;padding:0;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none;color:#323233;color:var(--field-input-text-color,#323233);height:24px;height:var(--cell-line-height,24px)}.van-field__input--textarea{height:18px;height:var(--field-text-area-min-height,18px);min-height:18px;min-height:var(--field-text-area-min-height,18px)}.van-field__input--error{color:#ee0a24;color:var(--field-input-error-text-color,#ee0a24)}.van-field__input--disabled{background-color:initial;opacity:1;color:#c8c9cc;color:var(--field-input-disabled-text-color,#c8c9cc)}.van-field__input--center{text-align:center}.van-field__input--right{text-align:right}.van-field__placeholder{position:absolute;top:0;right:0;left:0;pointer-events:none;color:#c8c9cc;color:var(--field-placeholder-text-color,#c8c9cc)}.van-field__placeholder--error{color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__icon-root{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;min-height:24px;min-height:var(--cell-line-height,24px)}.van-field__clear-root,.van-field__icon-container{line-height:inherit;vertical-align:middle;padding:0 8px;padding:0 var(--padding-xs,8px);margin-right:-8px;margin-right:-var(--padding-xs,8px)}.van-field__button,.van-field__clear-root,.van-field__icon-container{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear-root{font-size:16px;font-size:var(--field-clear-icon-size,16px);color:#c8c9cc;color:var(--field-clear-icon-color,#c8c9cc)}.van-field__icon-container{font-size:16px;font-size:var(--field-icon-size,16px);color:#969799;color:var(--field-icon-container-color,#969799)}.van-field__icon-container:empty{display:none}.van-field__button{padding-left:8px;padding-left:var(--padding-xs,8px)}.van-field__button:empty{display:none}.van-field__error-message{text-align:left;font-size:12px;font-size:var(--field-error-message-text-font-size,12px);color:#ee0a24;color:var(--field-error-message-color,#ee0a24)}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{text-align:right;margin-top:4px;margin-top:var(--padding-base,4px);color:#646566;color:var(--field-word-limit-color,#646566);font-size:12px;font-size:var(--field-word-limit-font-size,12px);line-height:16px;line-height:var(--field-word-limit-line-height,16px)}.van-field__word-num{display:inline}.van-field__word-num--full{color:#ee0a24;color:var(--field-word-num-full-color,#ee0a24)}
--- a/dist/grid-item/index.js
+++ b/dist/grid-item/index.js
@ -11,8 +11,10 @@ VantComponent({
  mixins: [link],
  props: {
    icon: String,
+    iconColor: String,
    dot: Boolean,
    info: null,
+    badge: null,
    text: String,
    useSlot: Boolean,
  },
@ -28,7 +30,16 @@ VantComponent({
        return;
      }
      const { data, children } = this.parent;
-      const { columnNum, border, square, gutter, clickable, center } = data;
+      const {
+        columnNum,
+        border,
+        square,
+        gutter,
+        clickable,
+        center,
+        direction,
+        iconSize,
+      } = data;
      const width = `${100 / columnNum}%`;
      const styleWrapper = [];
      styleWrapper.push(`width: ${width}`);
@ -39,7 +50,7 @@ VantComponent({
        const gutterValue = addUnit(gutter);
        styleWrapper.push(`padding-right: ${gutterValue}`);
        const index = children.indexOf(this);
-        if (index >= columnNum) {
+        if (index >= columnNum && !square) {
          styleWrapper.push(`margin-top: ${gutterValue}`);
        }
      }
@ -60,6 +71,8 @@ VantComponent({
        square,
        gutter,
        clickable,
+        direction,
+        iconSize,
      });
    },
    onClick() {
--- a/dist/grid-item/index.wxml
+++ b/dist/grid-item/index.wxml
@ -2,7 +2,7 @@

 <view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
  <view
-    class="content-class {{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}"
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
    style="{{ contentStyle }}"
  >
    <block wx:if="{{ useSlot }}">
@ -10,7 +10,7 @@
    </block>
    <block wx:else>
      <view class="van-grid-item__icon icon-class">
-        <van-icon wx:if="{{ icon }}" name="{{ icon }}" dot="{{ dot }}" info="{{ info }}" />
+        <van-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" dot="{{ dot }}" info="{{ badge || info }}" size="{{ iconSize }}" />
        <slot wx:else name="icon"></slot>
      </view>
      <view class="van-grid-item__text text-class">
--- a/dist/grid-item/index.wxss
+++ b/dist/grid-item/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-grid-item{position:relative;float:left;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__content{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;height:100%;padding:16px 8px;padding:var(--grid-item-content-padding,16px 8px);background-color:#fff;background-color:var(--grid-item-content-background-color,#fff)}.van-grid-item__content:after{z-index:1;border-width:0 1px 1px 0;border-bottom-width:var(--border-width-base,1px);border-right-width:var(--border-width-base,1px);border-top-width:0}.van-grid-item__content--surround:after{border-width:1px;border-width:var(--border-width-base,1px)}.van-grid-item__content--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--clickable:active{background-color:#f2f3f5;background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{font-size:26px;font-size:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:#646566;color:var(--grid-item-text-color,#646566);font-size:12px;font-size:var(--grid-item-text-font-size,12px)}
+@import '../common/index.wxss';.van-grid-item{position:relative;float:left;box-sizing:border-box}.van-grid-item--square{height:0}.van-grid-item__content{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;box-sizing:border-box;height:100%;padding:16px 8px;padding:var(--grid-item-content-padding,16px 8px);background-color:#fff;background-color:var(--grid-item-content-background-color,#fff)}.van-grid-item__content:after{z-index:1;border-width:0 1px 1px 0;border-bottom-width:var(--border-width-base,1px);border-right-width:var(--border-width-base,1px);border-top-width:0}.van-grid-item__content--surround:after{border-width:1px;border-width:var(--border-width-base,1px)}.van-grid-item__content--center{-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.van-grid-item__content--square{position:absolute;top:0;right:0;left:0}.van-grid-item__content--horizontal{-webkit-flex-direction:row;flex-direction:row}.van-grid-item__content--horizontal .van-grid-item__icon+.van-grid-item__text{margin-top:0;margin-left:8px}.van-grid-item__content--clickable:active{background-color:#f2f3f5;background-color:var(--grid-item-content-active-color,#f2f3f5)}.van-grid-item__icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:26px;font-size:var(--grid-item-icon-size,26px);height:26px;height:var(--grid-item-icon-size,26px)}.van-grid-item__text{word-wrap:break-word;color:#646566;color:var(--grid-item-text-color,#646566);font-size:12px;font-size:var(--grid-item-text-font-size,12px)}.van-grid-item__icon+.van-grid-item__text{margin-top:8px}
--- a/dist/grid/index.js
+++ b/dist/grid/index.js
@ -35,6 +35,14 @@ VantComponent({
      value: true,
      observer: 'updateChildren',
    },
+    direction: {
+      type: String,
+      observer: 'updateChildren',
+    },
+    iconSize: {
+      type: String,
+      observer: 'updateChildren',
+    },
  },
  data: {
    viewStyle: '',
--- a/dist/icon/index.wxss
+++ b/dist/icon/index.wxss
--- a/dist/info/index.wxss
+++ b/dist/info/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-info{position:absolute;top:0;right:0;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%;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:Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif;font-family:var(--info-font-family,Avenir-Heavy,PingFang SC,Helvetica Neue,Arial,sans-serif);line-height:14px;line-height:calc(var(--info-size, 16px) - var(--info-border-width, 1px)*2);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;box-sizing:border-box;line-height:1.2;white-space:nowrap;text-align:center;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%;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)}
--- a/dist/mixins/transition.js
+++ b/dist/mixins/transition.js
@ -1,11 +1,10 @@
-import { isObj } from '../common/utils';
+import { isObj, requestAnimationFrame } from '../common/utils';
 const getClassNames = (name) => ({
  enter: `van-${name}-enter van-${name}-enter-active enter-class enter-active-class`,
  'enter-to': `van-${name}-enter-to van-${name}-enter-active enter-to-class enter-active-class`,
  leave: `van-${name}-leave van-${name}-leave-active leave-class leave-active-class`,
  'leave-to': `van-${name}-leave-to van-${name}-leave-active leave-to-class leave-active-class`,
 });
-const nextTick = () => new Promise((resolve) => setTimeout(resolve, 1000 / 30));
 export const transition = function (showDefaultValue) {
  return Behavior({
    properties: {
@ -45,27 +44,21 @@ export const transition = function (showDefaultValue) {
        const currentDuration = isObj(duration) ? duration.enter : duration;
        this.status = 'enter';
        this.$emit('before-enter');
-        Promise.resolve()
-          .then(nextTick)
-          .then(() => {
-            this.checkStatus('enter');
-            this.$emit('enter');
-            this.setData({
-              inited: true,
-              display: true,
-              classes: classNames.enter,
-              currentDuration,
-            });
-          })
-          .then(nextTick)
-          .then(() => {
+        requestAnimationFrame(() => {
+          this.checkStatus('enter');
+          this.$emit('enter');
+          this.setData({
+            inited: true,
+            display: true,
+            classes: classNames.enter,
+            currentDuration,
+          });
+          requestAnimationFrame(() => {
            this.checkStatus('enter');
            this.transitionEnded = false;
-            this.setData({
-              classes: classNames['enter-to'],
-            });
-          })
-          .catch(() => {});
+            this.setData({ classes: classNames['enter-to'] });
+          });
+        });
      },
      leave() {
        if (!this.data.display) {
@ -76,26 +69,20 @@ export const transition = function (showDefaultValue) {
        const currentDuration = isObj(duration) ? duration.leave : duration;
        this.status = 'leave';
        this.$emit('before-leave');
-        Promise.resolve()
-          .then(nextTick)
-          .then(() => {
-            this.checkStatus('leave');
-            this.$emit('leave');
-            this.setData({
-              classes: classNames.leave,
-              currentDuration,
-            });
-          })
-          .then(nextTick)
-          .then(() => {
+        requestAnimationFrame(() => {
+          this.checkStatus('leave');
+          this.$emit('leave');
+          this.setData({
+            classes: classNames.leave,
+            currentDuration,
+          });
+          requestAnimationFrame(() => {
            this.checkStatus('leave');
            this.transitionEnded = false;
            setTimeout(() => this.onTransitionEnd(), currentDuration);
-            this.setData({
-              classes: classNames['leave-to'],
-            });
-          })
-          .catch(() => {});
+            this.setData({ classes: classNames['leave-to'] });
+          });
+        });
      },
      checkStatus(status) {
        if (status !== this.status) {
--- a/dist/nav-bar/index.js
+++ b/dist/nav-bar/index.js
@ -1,4 +1,5 @@
 import { VantComponent } from '../common/component';
+import { getSystemInfoSync } from '../common/utils';
 VantComponent({
  classes: ['title-class'],
  props: {
@ -34,7 +35,7 @@ VantComponent({
    baseStyle: '',
  },
  created() {
-    const { statusBarHeight } = wx.getSystemInfoSync();
+    const { statusBarHeight } = getSystemInfoSync();
    const { safeAreaInsetTop, zIndex } = this.data;
    const paddingTop = safeAreaInsetTop ? statusBarHeight : 0;
    const baseStyle = `z-index: ${zIndex};padding-top: ${paddingTop}px;`;
--- a/dist/nav-bar/index.wxml
+++ b/dist/nav-bar/index.wxml
@ -4,36 +4,38 @@

 <view
  class="{{ utils.bem('nav-bar', { fixed }) }} custom-class {{ border ? 'van-hairline--bottom' : '' }}"
-  style="{{ baseStyle }} {{ customStyle }}"
+  style="{{ baseStyle }}; {{ customStyle }}"
 >
-  <view class="van-nav-bar__left" bind:tap="onClickLeft">
-    <block wx:if="{{ leftArrow || leftText }}">
-      <van-icon
-        wx:if="{{ leftArrow }}"
-        size="16px"
-        name="arrow-left"
-        custom-class="van-nav-bar__arrow"
-      />
+  <view class="van-nav-bar__content">
+    <view class="van-nav-bar__left" bind:tap="onClickLeft">
+      <block wx:if="{{ leftArrow || leftText }}">
+        <van-icon
+          wx:if="{{ leftArrow }}"
+          size="16px"
+          name="arrow-left"
+          custom-class="van-nav-bar__arrow"
+        />
+        <view
+          wx:if="{{ leftText }}"
+          class="van-nav-bar__text"
+          hover-class="van-nav-bar__text--hover"
+          hover-stay-time="70"
+        >{{ leftText }}</view>
+      </block>
+      <slot wx:else name="left" />
+    </view>
+    <view class="van-nav-bar__title title-class van-ellipsis">
+      <block wx:if="{{ title }}">{{ title }}</block>
+      <slot wx:else name="title" />
+    </view>
+    <view class="van-nav-bar__right" bind:tap="onClickRight">
      <view
-        wx:if="{{ leftText }}"
+        wx:if="{{ rightText }}"
        class="van-nav-bar__text"
        hover-class="van-nav-bar__text--hover"
        hover-stay-time="70"
-      >{{ leftText }}</view>
-    </block>
-    <slot wx:else name="left" />
-  </view>
-  <view class="van-nav-bar__title title-class van-ellipsis">
-    <block wx:if="{{ title }}">{{ title }}</block>
-    <slot wx:else name="title" />
-  </view>
-  <view class="van-nav-bar__right" bind:tap="onClickRight">
-    <view
-      wx:if="{{ rightText }}"
-      class="van-nav-bar__text"
-      hover-class="van-nav-bar__text--hover"
-      hover-stay-time="70"
-    >{{ rightText }}</view>
-    <slot wx:else name="right" />
+      >{{ rightText }}</view>
+      <slot wx:else name="right" />
+    </view>
  </view>
 </view>
--- a/dist/nav-bar/index.wxss
+++ b/dist/nav-bar/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-nav-bar{position:relative;text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;bottom:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
+@import '../common/index.wxss';.van-nav-bar{text-align:center;-webkit-user-select:none;user-select:none;height:44px;height:var(--nav-bar-height,44px);line-height:44px;line-height:var(--nav-bar-height,44px);background-color:#fff;background-color:var(--nav-bar-background-color,#fff)}.van-nav-bar,.van-nav-bar__content{position:relative}.van-nav-bar__text{display:inline-block;vertical-align:middle;margin:0 -16px;margin:0 -var(--padding-md,16px);padding:0 16px;padding:0 var(--padding-md,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__text--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-nav-bar__arrow{vertical-align:middle;font-size:16px;font-size:var(--nav-bar-arrow-size,16px);color:#1989fa;color:var(--nav-bar-text-color,#1989fa)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{position:fixed;top:0;left:0;width:100%}.van-nav-bar__title{max-width:60%;margin:0 auto;color:#323233;color:var(--nav-bar-title-text-color,#323233);font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--nav-bar-title-font-size,16px)}.van-nav-bar__left,.van-nav-bar__right{position:absolute;top:0;bottom:0;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:14px;font-size:var(--font-size-md,14px)}.van-nav-bar__left{left:16px;left:var(--padding-md,16px)}.van-nav-bar__right{right:16px;right:var(--padding-md,16px)}
--- a/dist/notice-bar/index.js
+++ b/dist/notice-bar/index.js
@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
-const FONT_COLOR = '#ed6a0c';
-const BG_COLOR = '#fffbe8';
+import { requestAnimationFrame } from '../common/utils';
 VantComponent({
  props: {
    text: {
@ -45,14 +44,9 @@ VantComponent({
      type: String,
      value: '',
    },
-    color: {
-      type: String,
-      value: FONT_COLOR,
-    },
-    backgroundColor: {
-      type: String,
-      value: BG_COLOR,
-    },
+    color: String,
+    backgroundColor: String,
+    background: String,
    wrapable: Boolean,
  },
  data: {
@ -106,22 +100,25 @@ VantComponent({
          .step()
          .export(),
      });
-      setTimeout(() => {
+      requestAnimationFrame(() => {
        this.setData({
          animationData: this.animation
            .translateX(-this.contentWidth)
            .step()
            .export(),
        });
-      }, 20);
+      });
      this.timer = setTimeout(() => {
        this.scroll();
      }, this.duration);
    },
-    onClickIcon() {
-      this.timer && clearTimeout(this.timer);
-      this.timer = null;
-      this.setData({ show: false });
+    onClickIcon(event) {
+      if (this.data.mode === 'closeable') {
+        this.timer && clearTimeout(this.timer);
+        this.timer = null;
+        this.setData({ show: false });
+        this.$emit('close', event.detail);
+      }
    },
    onClick(event) {
      this.$emit('click', event);
--- a/dist/notice-bar/index.wxml
+++ b/dist/notice-bar/index.wxml
@ -3,7 +3,7 @@
 <view
  wx:if="{{ show }}"
  class="custom-class {{ utils.bem('notice-bar', { withicon: mode, wrapable }) }}"
-  style="color: {{ color }}; background-color: {{ backgroundColor }};"
+  style="color: {{ color }}; background-color: {{ backgroundColor }}; background: {{ background }}"
  bind:tap="onClick"
 >
  <van-icon
--- a/dist/picker/index.wxss
+++ b/dist/picker/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;background-color:#fff;background-color:var(--picker-background-color,#fff)}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;height:var(--picker-toolbar-height,44px);line-height:44px;line-height:var(--picker-toolbar-height,44px)}.van-picker__cancel,.van-picker__confirm{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px);color:#1989fa;color:var(--picker-action-text-color,#1989fa)}.van-picker__cancel--hover,.van-picker__confirm--hover{background-color:#f2f3f5;background-color:var(--picker-action-active-color,#f2f3f5)}.van-picker__title{max-width:50%;text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--picker-option-font-size,16px)}.van-picker__columns{position:relative;display:-webkit-flex;display:flex}.van-picker__column{-webkit-flex:1 1;flex:1 1;width:0}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:hsla(0,0%,100%,.9);background-color:var(--picker-loading-mask-color,hsla(0,0%,100%,.9))}.van-picker__mask{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:none}.van-picker__frame,.van-picker__loading .van-loading{position:absolute;top:50%;left:0;z-index:1;width:100%;-webkit-transform:translateY(-50%);transform:translateY(-50%);pointer-events:none}
+@import '../common/index.wxss';.van-picker{position:relative;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-user-select:none;user-select:none;background-color:#fff;background-color:var(--picker-background-color,#fff)}.van-picker__toolbar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;height:44px;height:var(--picker-toolbar-height,44px);line-height:44px;line-height:var(--picker-toolbar-height,44px)}.van-picker__cancel,.van-picker__confirm{padding:0 16px;padding:var(--picker-action-padding,0 16px);font-size:14px;font-size:var(--picker-action-font-size,14px)}.van-picker__cancel--hover,.van-picker__confirm--hover{opacity:.7}.van-picker__confirm{color:#576b95;color:var(--picker-confirm-action-color,#576b95)}.van-picker__cancel{color:#969799;color:var(--picker-cancel-action-color,#969799)}.van-picker__title{max-width:50%;text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--picker-option-font-size,16px)}.van-picker__columns{position:relative;display:-webkit-flex;display:flex}.van-picker__column{-webkit-flex:1 1;flex:1 1;width:0}.van-picker__loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;background-color:hsla(0,0%,100%,.9);background-color:var(--picker-loading-mask-color,hsla(0,0%,100%,.9))}.van-picker__mask{top:0;left:0;z-index:2;width:100%;height:100%;background-image:linear-gradient(180deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4)),linear-gradient(0deg,hsla(0,0%,100%,.9),hsla(0,0%,100%,.4));background-repeat:no-repeat;background-position:top,bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden}.van-picker__frame,.van-picker__mask{position:absolute;pointer-events:none}.van-picker__frame{top:50%;right:16px;left:16px;z-index:1;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
--- a/dist/picker/shared.js
+++ b/dist/picker/shared.js
@ -12,7 +12,7 @@ export const pickerProps = {
  },
  visibleItemCount: {
    type: Number,
-    value: 5,
+    value: 6,
  },
  itemHeight: {
    type: Number,
--- a/dist/picker/toolbar.wxml
+++ b/dist/picker/toolbar.wxml
@ -1,7 +1,7 @@
 <template name="toolbar">
  <view
    wx:if="{{ showToolbar }}"
-    class="van-picker__toolbar van-hairline--top-bottom toolbar-class"
+    class="van-picker__toolbar toolbar-class"
  >
    <view
      class="van-picker__cancel"
--- a/dist/popup/index.js
+++ b/dist/popup/index.js
@ -68,12 +68,15 @@ VantComponent({
      }
    },
    observeClass() {
-      const { transition, position } = this.data;
+      const { transition, position, duration } = this.data;
      const updateData = {
        name: transition || position,
      };
      if (transition === 'none') {
        updateData.duration = 0;
+        this.originDuration = duration;
+      } else if (this.originDuration != null) {
+        updateData.duration = this.originDuration;
      }
      this.setData(updateData);
    },
--- a/dist/share-sheet/index.d.ts
+++ b/dist/share-sheet/index.d.ts
@ -0,0 +1 @@
+export {};
--- a/dist/share-sheet/index.js
+++ b/dist/share-sheet/index.js
@ -0,0 +1,52 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+  props: {
+    // whether to show popup
+    show: Boolean,
+    // overlay custom style
+    overlayStyle: Object,
+    // z-index
+    zIndex: [Number, String],
+    title: String,
+    cancelText: {
+      type: String,
+      value: '取消',
+    },
+    description: String,
+    options: {
+      type: Array,
+      value: [],
+    },
+    overlay: {
+      type: Boolean,
+      value: true,
+    },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      value: true,
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      value: true,
+    },
+    duration: {
+      type: null,
+      value: 300,
+    },
+  },
+  methods: {
+    onClickOverlay() {
+      this.$emit('click-overlay');
+    },
+    onCancel() {
+      this.onClose();
+      this.$emit('cancel');
+    },
+    onSelect(event) {
+      this.$emit('select', event.detail);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+});
--- a/dist/share-sheet/index.json
+++ b/dist/share-sheet/index.json
@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "../popup/index",
+    "options": "./options"
+  }
+}
--- a/dist/share-sheet/index.wxml
+++ b/dist/share-sheet/index.wxml
@ -0,0 +1,46 @@
+<wxs src="./index.wxs" module="computed" />
+
+<van-popup
+  round
+  class="van-share-sheet"
+  show="{{ show }}"
+  position="bottom"
+  overlay="{{ overlay }}"
+  duration="{{ duration }}"
+  z-index="{{ zIndex }}"
+  overlay-style="{{ overlayStyle }}"
+  close-on-click-overlay="{{ closeOnClickOverlay }}"
+  safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
+  bind:close="onClose"
+  bind:click-overlay="onClickOverlay"
+>
+  <view class="van-share-sheet__header">
+    <view class="van-share-sheet__title">
+      <slot name="title" />
+    </view>
+    <view wx:if="{{ title }}" class="van-share-sheet__title">{{ title }}</view>
+
+    <view class="van-share-sheet__description">
+      <slot name="description" />
+    </view>
+    <view wx:if="{{ description }}" class="van-share-sheet__description">
+      {{ description }}
+    </view>
+  </view>
+
+  <block wx:if="{{ computed.isMulti(options) }}">
+    <options
+      wx:for="{{ options }}"
+      show-border="{{ index !== 0 }}"
+      wx:key="index"
+      options="{{ item }}"
+      bind:select="onSelect"
+    />
+  </block>
+
+  <options wx:else options="{{ options }}" bind:select="onSelect" />
+
+  <button type="button" class="van-share-sheet__cancel" bindtap="onCancel">
+    {{ cancelText }}
+  </button>
+</van-popup>
--- a/dist/share-sheet/index.wxs
+++ b/dist/share-sheet/index.wxs
@ -0,0 +1,12 @@
+/* eslint-disable */
+function isMulti(options) {
+  if (options == null || options[0] == null) {
+    return false;
+  }
+
+  return "Array" === options.constructor && "Array" === options[0].constructor;
+}
+
+module.exports = {
+  isMulti: isMulti
+};
--- a/dist/share-sheet/index.wxss
+++ b/dist/share-sheet/index.wxss
@ -0,0 +1 @@
+@import '../common/index.wxss';.van-share-sheet__header{padding:12px 16px 4px;text-align:center}.van-share-sheet__title{margin-top:8px;color:#323233;font-weight:400;font-size:14px;line-height:20px}.van-share-sheet__title:empty,.van-share-sheet__title:not(:empty)+.van-share-sheet__title{display:none}.van-share-sheet__description{display:block;margin-top:8px;color:#969799;font-size:12px;line-height:16px}.van-share-sheet__description:empty,.van-share-sheet__description:not(:empty)+.van-share-sheet__description{display:none}.van-share-sheet__cancel{display:block;box-sizing:initial;width:100%;height:auto;padding:0;font-size:16px;line-height:48px;text-align:center;background:#fff;border:none}.van-share-sheet__cancel:before{display:block;height:8px;background-color:#f7f8fa;content:" "}.van-share-sheet__cancel:after{display:none}.van-share-sheet__cancel:active{background-color:#f2f3f5}
--- a/dist/share-sheet/options.d.ts
+++ b/dist/share-sheet/options.d.ts
@ -0,0 +1 @@
+export {};
--- a/dist/share-sheet/options.js
+++ b/dist/share-sheet/options.js
@ -0,0 +1,14 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+  props: {
+    options: Array,
+    showBorder: Boolean,
+  },
+  methods: {
+    onSelect(event) {
+      const { index } = event.currentTarget.dataset;
+      const option = this.data.options[index];
+      this.$emit('select', Object.assign(Object.assign({}, option), { index }));
+    },
+  },
+});
--- a/dist/share-sheet/options.json
+++ b/dist/share-sheet/options.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/dist/share-sheet/options.wxml
+++ b/dist/share-sheet/options.wxml
@ -0,0 +1,18 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./options.wxs" module="computed" />
+
+<view class="{{ utils.bem('share-sheet__options', { border: showBorder }) }}">
+  <view
+    wx:for="{{ options }}"
+    wx:key="index"
+    class="van-share-sheet__option"
+    data-index="{{ index }}"
+    bindtap="onSelect"
+  >
+    <image src="{{ computed.getIconURL(item.icon) }}" class="van-share-sheet__icon" />
+    <view wx:if="{{ item.name }}" class="van-share-sheet__name">{{ item.name }}</view>
+    <view wx:if="{{ item.description }}" class="van-share-sheet__option-description">
+      {{ item.description }}
+    </view>
+  </view>
+</view>
--- a/dist/share-sheet/options.wxs
+++ b/dist/share-sheet/options.wxs
@ -0,0 +1,14 @@
+/* eslint-disable */
+var PRESET_ICONS = ['qq', 'weibo', 'wechat', 'link', 'qrcode', 'poster'];
+
+function getIconURL(icon) {
+  if (PRESET_ICONS.indexOf(icon) !== -1) {
+    return 'https://img.yzcdn.cn/vant/share-icon-' + icon + '.png';
+  }
+
+  return icon;
+}
+
+module.exports = {
+  getIconURL: getIconURL,
+};
--- a/dist/share-sheet/options.wxss
+++ b/dist/share-sheet/options.wxss
@ -0,0 +1 @@
+@import '../common/index.wxss';.van-share-sheet__options{position:relative;display:-webkit-flex;display:flex;padding:16px 0 16px 8px;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.van-share-sheet__options--border:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:16px;border-top:1px solid #ebedf0;-webkit-transform:scaleY(.5);transform:scaleY(.5)}.van-share-sheet__options::-webkit-scrollbar{height:0}.van-share-sheet__option{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-user-select:none;user-select:none}.van-share-sheet__option:active{opacity:.7}.van-share-sheet__icon{width:48px;height:48px;margin:0 16px}.van-share-sheet__name{margin-top:8px;padding:0 4px;color:#646566;font-size:12px}.van-share-sheet__option-description{padding:0 4px;color:#c8c9cc;font-size:12px}
--- a/dist/sidebar-item/index.js
+++ b/dist/sidebar-item/index.js
@ -8,6 +8,7 @@ VantComponent({
  },
  props: {
    dot: Boolean,
+    badge: null,
    info: null,
    title: String,
    disabled: Boolean,
--- a/dist/sidebar-item/index.wxml
+++ b/dist/sidebar-item/index.wxml
@ -8,10 +8,9 @@
 >
  <view class="van-sidebar-item__text">
    <van-info
-      wx:if="{{ info !== null || dot }}"
+      wx:if="{{ badge != null || info !== null || dot }}"
      dot="{{ dot }}"
-      info="{{ info }}"
-      custom-style="right: 4px"
+      info="{{ badge != null ? badge : info }}"
    />
    <view wx:if="{{ title }}">{{ title }}</view>
    <slot wx:else name="title" />
--- a/dist/slider/index.js
+++ b/dist/slider/index.js
@ -23,11 +23,15 @@ VantComponent({
    value: {
      type: Number,
      value: 0,
-      observer: 'updateValue',
+      observer(val) {
+        if (val !== this.value) {
+          this.updateValue(val);
+        }
+      },
    },
    barHeight: {
      type: null,
-      value: '2px',
+      value: 2,
    },
  },
  created() {
@ -37,7 +41,7 @@ VantComponent({
    onTouchStart(event) {
      if (this.data.disabled) return;
      this.touchStart(event);
-      this.startValue = this.format(this.data.value);
+      this.startValue = this.format(this.value);
      this.dragStatus = 'start';
    },
    onTouchMove(event) {
@ -73,8 +77,8 @@ VantComponent({
      value = this.format(value);
      const { min } = this.data;
      const width = `${((value - min) * 100) / this.getRange()}%`;
+      this.value = value;
      this.setData({
-        value,
        barStyle: `
          width: ${width};
          ${drag ? 'transition: none;' : ''}
--- a/dist/steps/index.wxml
+++ b/dist/steps/index.wxml
@ -17,9 +17,9 @@
      <view class="van-step__circle-container">
        <block wx:if="{{ index !== active }}">
          <van-icon
-            wx:if="{{ inactiveIcon }}"
+            wx:if="{{ item.inactiveIcon || inactiveIcon }}"
            color="{{ status(index, active) === 'inactive' ? inactiveColor: activeColor }}"
-            name="{{ inactiveIcon }}"
+            name="{{ item.inactiveIcon || inactiveIcon }}"
            custom-class="van-step__icon"
          />
          <view
@ -29,7 +29,7 @@
          />
        </block>

-        <van-icon wx:else name="{{ activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
+        <van-icon wx:else name="{{ item.activeIcon || activeIcon }}" color="{{ activeColor }}" custom-class="van-step__icon" />
      </view>
      <view
        wx:if="{{ index !== steps.length - 1 }}"
--- a/dist/tabbar/index.wxss
+++ b/dist/tabbar/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-tabbar{display:-webkit-flex;display:flex;width:100%;height:50px;height:var(--tabbar-height,50px);background-color:#fff;background-color:var(--tabbar-background-color,#fff)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}.van-tabbar--safe{padding-bottom:env(safe-area-inset-bottom)}
+@import '../common/index.wxss';.van-tabbar{display:-webkit-flex;display:flex;box-sizing:initial;width:100%;height:50px;height:var(--tabbar-height,50px);background-color:#fff;background-color:var(--tabbar-background-color,#fff)}.van-tabbar--fixed{position:fixed;bottom:0;left:0}.van-tabbar--safe{padding-bottom:env(safe-area-inset-bottom)}
--- a/dist/tabs/index.js
+++ b/dist/tabs/index.js
@ -21,11 +21,15 @@ VantComponent({
    },
  },
  props: {
+    sticky: Boolean,
+    border: Boolean,
+    swipeable: Boolean,
+    titleActiveColor: String,
+    titleInactiveColor: String,
    color: {
      type: String,
      observer: 'setLine',
    },
-    sticky: Boolean,
    animated: {
      type: Boolean,
      observer() {
@ -34,10 +38,9 @@ VantComponent({
        );
      },
    },
-    swipeable: Boolean,
    lineWidth: {
      type: [String, Number],
-      value: -1,
+      value: 40,
      observer: 'setLine',
    },
    lineHeight: {
@ -45,8 +48,6 @@ VantComponent({
      value: -1,
      observer: 'setLine',
    },
-    titleActiveColor: String,
-    titleInactiveColor: String,
    active: {
      type: [String, Number],
      value: 0,
@ -60,10 +61,6 @@ VantComponent({
      type: String,
      value: 'line',
    },
-    border: {
-      type: Boolean,
-      value: true,
-    },
    ellipsis: {
      type: Boolean,
      value: true,
@ -78,7 +75,7 @@ VantComponent({
    },
    swipeThreshold: {
      type: Number,
-      value: 4,
+      value: 5,
      observer(value) {
        this.setData({
          scrollable: this.children.length > value || !this.data.ellipsis,
@ -210,7 +207,6 @@ VantComponent({
        if (rect == null) {
          return;
        }
-        const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
        const height =
          lineHeight !== -1
            ? `height: ${addUnit(lineHeight)}; border-radius: ${addUnit(
@ -220,14 +216,14 @@ VantComponent({
        let left = rects
          .slice(0, currentIndex)
          .reduce((prev, curr) => prev + curr.width, 0);
-        left += (rect.width - width) / 2;
+        left += (rect.width - lineWidth) / 2;
        const transition = skipTransition
          ? ''
          : `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`;
        this.setData({
          lineStyle: `
            ${height}
-            width: ${addUnit(width)};
+            width: ${addUnit(lineWidth)};
            background-color: ${color};
            -webkit-transform: translateX(${left}px);
            transform: translateX(${left}px);
@ -269,16 +265,34 @@ VantComponent({
    // watch swipe touch end
    onTouchEnd() {
      if (!this.data.swipeable) return;
-      const { tabs, currentIndex } = this.data;
      const { direction, deltaX, offsetX } = this;
      const minSwipeDistance = 50;
      if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
-        if (deltaX > 0 && currentIndex !== 0) {
-          this.setCurrentIndex(currentIndex - 1);
-        } else if (deltaX < 0 && currentIndex !== tabs.length - 1) {
-          this.setCurrentIndex(currentIndex + 1);
+        const index = this.getAvaiableTab(deltaX);
+        if (index !== -1) {
+          this.setCurrentIndex(index);
        }
      }
    },
+    getAvaiableTab(direction) {
+      const { tabs, currentIndex } = this.data;
+      const step = direction > 0 ? -1 : 1;
+      for (
+        let i = step;
+        currentIndex + i < tabs.length && currentIndex + i >= 0;
+        i += step
+      ) {
+        const index = currentIndex + i;
+        if (
+          index >= 0 &&
+          index < tabs.length &&
+          tabs[index] &&
+          !tabs[index].disabled
+        ) {
+          return index;
+        }
+      }
+      return -1;
+    },
  },
 });
--- a/dist/tabs/index.wxml
+++ b/dist/tabs/index.wxml
@ -19,7 +19,7 @@
        class="{{ utils.bem('tabs__scroll', [type]) }}"
        style="{{ color ? 'border-color: ' + color : '' }}"
      >
-        <view class="{{ utils.bem('tabs__nav', [type]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
+        <view class="{{ utils.bem('tabs__nav', [type, { complete: !ellipsis }]) }} nav-class" style="{{ getters.tabCardTypeBorderStyle(color, type) }}">
          <view wx:if="{{ type === 'line' }}" class="van-tabs__line" style="{{ lineStyle }}" />
          <view
            wx:for="{{ tabs }}"
--- a/dist/tabs/index.wxss
+++ b/dist/tabs/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__scroll::-webkit-scrollbar{display:none}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative;width:100%;height:100%}.van-tabs__track--animated{display:-webkit-flex;display:flex;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#646566;color:var(--tab-text-color,#646566);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab--complete{-webkit-flex:1 0 auto!important;flex:1 0 auto!important}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}
+@import '../common/index.wxss';.van-tabs{position:relative;-webkit-tap-highlight-color:transparent}.van-tabs__wrap{display:-webkit-flex;display:flex;overflow:hidden}.van-tabs__wrap--scrollable .van-tab{-webkit-flex:0 0 22%;flex:0 0 22%}.van-tabs__wrap--scrollable .van-tab--complete{-webkit-flex:1 0 auto!important;flex:1 0 auto!important;padding:0 12px}.van-tabs__wrap--scrollable .van-tabs__nav--complete{padding-right:8px;padding-left:8px}.van-tabs__scroll{background-color:#fff;background-color:var(--tabs-nav-background-color,#fff)}.van-tabs__scroll--line{box-sizing:initial;height:calc(100% + 15px)}.van-tabs__scroll--card{margin:0 16px;margin:0 var(--padding-md,16px)}.van-tabs__scroll::-webkit-scrollbar{display:none}.van-tabs__nav{position:relative;display:-webkit-flex;display:flex;-webkit-user-select:none;user-select:none}.van-tabs__nav--card{box-sizing:border-box;height:30px;height:var(--tabs-card-height,30px);border:1px solid #ee0a24;border:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24);border-radius:2px;border-radius:var(--border-radius-sm,2px)}.van-tabs__nav--card .van-tab{color:#ee0a24;color:var(--tabs-default-color,#ee0a24);line-height:28px;line-height:calc(var(--tabs-card-height, 30px) - 2*var(--border-width-base, 1px));border-right:1px solid #ee0a24;border-right:var(--border-width-base,1px) solid var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab:last-child{border-right:none}.van-tabs__nav--card .van-tab.van-tab--active{color:#fff;color:var(--white,#fff);background-color:#ee0a24;background-color:var(--tabs-default-color,#ee0a24)}.van-tabs__nav--card .van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tabs__line{position:absolute;bottom:0;left:0;z-index:1;height:3px;height:var(--tabs-bottom-bar-height,3px);border-radius:3px;border-radius:var(--tabs-bottom-bar-height,3px);background-color:#ee0a24;background-color:var(--tabs-bottom-bar-color,#ee0a24)}.van-tabs__track{position:relative;width:100%;height:100%}.van-tabs__track--animated{display:-webkit-flex;display:flex;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}.van-tabs__content{overflow:hidden}.van-tabs--line .van-tabs__wrap{height:44px;height:var(--tabs-line-height,44px)}.van-tabs--card .van-tabs__wrap{height:30px;height:var(--tabs-card-height,30px)}.van-tab{position:relative;-webkit-flex:1;flex:1;box-sizing:border-box;min-width:0;padding:0 5px;text-align:center;cursor:pointer;color:#646566;color:var(--tab-text-color,#646566);font-size:14px;font-size:var(--tab-font-size,14px);line-height:44px;line-height:var(--tabs-line-height,44px)}.van-tab--active{font-weight:500;font-weight:var(--font-weight-bold,500);color:#323233;color:var(--tab-active-text-color,#323233)}.van-tab--disabled{color:#c8c9cc;color:var(--tab-disabled-text-color,#c8c9cc)}.van-tab__title__info{position:relative!important;top:-1px!important;display:inline-block;-webkit-transform:translateX(0)!important;transform:translateX(0)!important}
--- a/dist/tag/index.wxml
+++ b/dist/tag/index.wxml
@ -1,7 +1,7 @@
 <wxs src="../wxs/utils.wxs" module="utils" />

 <view
-  class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }} {{ plain ? 'van-hairline--surround' : '' }}"
+  class="custom-class {{ utils.bem('tag', [type, size, { mark, plain, round }]) }}"
  style="{{ color && !plain ? 'background-color: ' + color + ';' : '' }}{{ textColor || (color && plain) ? 'color: ' + (textColor || color) : '' }}"
 >
  <slot />
--- a/dist/tag/index.wxss
+++ b/dist/tag/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-tag{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;line-height:normal;padding:.2em .5em;padding:var(--tag-padding,.2em .5em);color:#fff;color:var(--tag-text-color,#fff);font-size:10px;font-size:var(--tag-font-size,10px);border-radius:.2em;border-radius:var(--tag-border-radius,.2em)}.van-tag:after{border-color:currentColor;border-radius:.2em * 2;border-radius:var(--tag-border-radius,.2em) * 2}.van-tag--default{background-color:#969799;background-color:var(--tag-default-color,#969799)}.van-tag--default.van-tag--plain{color:#969799;color:var(--tag-default-color,#969799)}.van-tag--danger{background-color:#ee0a24;background-color:var(--tag-dander-color,#ee0a24)}.van-tag--danger.van-tag--plain{color:#ee0a24;color:var(--tag-dander-color,#ee0a24)}.van-tag--primary{background-color:#1989fa;background-color:var(--tag-primary-color,#1989fa)}.van-tag--primary.van-tag--plain{color:#1989fa;color:var(--tag-primary-color,#1989fa)}.van-tag--success{background-color:#07c160;background-color:var(--tag-success-color,#07c160)}.van-tag--success.van-tag--plain{color:#07c160;color:var(--tag-success-color,#07c160)}.van-tag--warning{background-color:#ff976a;background-color:var(--tag-warning-color,#ff976a)}.van-tag--warning.van-tag--plain{color:#ff976a;color:var(--tag-warning-color,#ff976a)}.van-tag--plain{background-color:#fff;background-color:var(--tag-plain-background-color,#fff)}.van-tag--mark{padding-right:.7em}.van-tag--mark,.van-tag--mark:after{border-radius:0 999px 999px 0;border-radius:0 var(--tag-round-border-radius,999px) var(--tag-round-border-radius,999px) 0}.van-tag--round,.van-tag--round:after{border-radius:999px;border-radius:var(--tag-round-border-radius,999px)}.van-tag--medium{font-size:12px;font-size:var(--tag-medium-font-size,12px)}.van-tag--large{font-size:14px;font-size:var(--tag-large-font-size,14px)}.van-tag__close{margin-left:2px}
+@import '../common/index.wxss';.van-tag{position:relative;display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;padding:0 4px;padding:var(--tag-padding,0 4px);color:#fff;color:var(--tag-text-color,#fff);font-size:12px;font-size:var(--tag-font-size,12px);line-height:16px;line-height:var(--tag-line-height,16px);border-radius:2px;border-radius:var(--tag-border-radius,2px)}.van-tag--default{background-color:#969799;background-color:var(--tag-default-color,#969799)}.van-tag--default.van-tag--plain{color:#969799;color:var(--tag-default-color,#969799)}.van-tag--danger{background-color:#ee0a24;background-color:var(--tag-danger-color,#ee0a24)}.van-tag--danger.van-tag--plain{color:#ee0a24;color:var(--tag-danger-color,#ee0a24)}.van-tag--primary{background-color:#1989fa;background-color:var(--tag-primary-color,#1989fa)}.van-tag--primary.van-tag--plain{color:#1989fa;color:var(--tag-primary-color,#1989fa)}.van-tag--success{background-color:#07c160;background-color:var(--tag-success-color,#07c160)}.van-tag--success.van-tag--plain{color:#07c160;color:var(--tag-success-color,#07c160)}.van-tag--warning{background-color:#ff976a;background-color:var(--tag-warning-color,#ff976a)}.van-tag--warning.van-tag--plain{color:#ff976a;color:var(--tag-warning-color,#ff976a)}.van-tag--plain{background-color:#fff;background-color:var(--tag-plain-background-color,#fff)}.van-tag--plain:before{position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid;border-radius:inherit;content:"";pointer-events:none}.van-tag--medium{padding:2px 6px;padding:var(--tag-medium-padding,2px 6px)}.van-tag--large{padding:4px 8px;padding:var(--tag-large-padding,4px 8px);font-size:14px;font-size:var(--tag-large-font-size,14px);border-radius:4px;border-radius:var(--tag-large-border-radius,4px)}.van-tag--mark{border-radius:0 999px 999px 0;border-radius:0 var(--tag-round-border-radius,999px) var(--tag-round-border-radius,999px) 0}.van-tag--mark:after{display:block;width:2px;content:""}.van-tag--round{border-radius:999px;border-radius:var(--tag-round-border-radius,999px)}.van-tag__close{min-width:1em;margin-left:2px}
--- a/dist/toast/index.wxss
+++ b/dist/toast/index.wxss
@ -1 +1 @@
-@import '../common/index.wxss';.van-toast{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:initial;color:#fff;color:var(--toast-text-color,#fff);font-size:14px;font-size:var(--toast-font-size,14px);line-height:20px;line-height:var(--toast-line-height,20px);white-space:pre-wrap;word-wrap:break-word;background-color:rgba(50,50,51,.88);background-color:var(--toast-background-color,rgba(50,50,51,.88));border-radius:4px;border-radius:var(--toast-border-radius,4px)}.van-toast__container{position:fixed;top:50%;left:50%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:70%;max-width:var(--toast-max-width,70%)}.van-toast--text{min-width:96px;min-width:var(--toast-text-min-width,96px);padding:8px 12px;padding:var(--toast-text-padding,8px 12px)}.van-toast--icon{width:90px;width:var(--toast-default-width,90px);min-height:90px;min-height:var(--toast-default-min-height,90px);padding:16px;padding:var(--toast-default-padding,16px)}.van-toast--icon .van-toast__icon{font-size:48px;font-size:var(--toast-icon-size,48px)}.van-toast--icon .van-toast__text{padding-top:8px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translateY(-30vh);transform:translateY(-30vh)}.van-toast--bottom{-webkit-transform:translateY(30vh);transform:translateY(30vh)}
+@import '../common/index.wxss';.van-toast{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:initial;color:#fff;color:var(--toast-text-color,#fff);font-size:14px;font-size:var(--toast-font-size,14px);line-height:20px;line-height:var(--toast-line-height,20px);white-space:pre-wrap;word-wrap:break-word;background-color:rgba(0,0,0,.7);background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:8px;border-radius:var(--toast-border-radius,8px)}.van-toast__container{position:fixed;top:50%;left:50%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:70%;max-width:var(--toast-max-width,70%)}.van-toast--text{min-width:96px;min-width:var(--toast-text-min-width,96px);padding:8px 12px;padding:var(--toast-text-padding,8px 12px)}.van-toast--icon{width:88px;width:var(--toast-default-width,88px);min-height:88px;min-height:var(--toast-default-min-height,88px);padding:16px;padding:var(--toast-default-padding,16px)}.van-toast--icon .van-toast__icon{font-size:36px;font-size:var(--toast-icon-size,36px)}.van-toast--icon .van-toast__text{padding-top:8px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translateY(-30vh);transform:translateY(-30vh)}.van-toast--bottom{-webkit-transform:translateY(30vh);transform:translateY(30vh)}
--- a/dist/tree-select/index.js
+++ b/dist/tree-select/index.js
@ -27,6 +27,10 @@ VantComponent({
      type: Number,
      value: Infinity,
    },
+    selectedIcon: {
+      type: String,
+      value: 'success',
+    },
  },
  data: {
    subItems: [],
--- a/dist/tree-select/index.wxml
+++ b/dist/tree-select/index.wxml
@ -13,6 +13,8 @@
        custom-class="main-item-class"
        active-class="main-active-class"
        disabled-class="main-disabled-class"
+        badge="{{ item.badge }}"
+        dot="{{ item.dot }}"
        title="{{ item.text }}"
        disabled="{{ item.disabled }}"
      />
@ -30,7 +32,7 @@
      {{ item.text }}
      <van-icon
        wx:if="{{ wxs.isActive(activeId, item.id) }}"
-        name="checked"
+        name="{{ selectedIcon }}"
        size="16px"
        class="van-tree-select__selected"
      />
--- a/dist/uploader/index.js
+++ b/dist/uploader/index.js
@ -13,7 +13,7 @@ VantComponent({
        beforeRead: null,
        previewSize: {
          type: null,
-          value: 90,
+          value: 80,
        },
        name: {
          type: [Number, String],
@ -78,6 +78,8 @@ VantComponent({
            typeof item.isImage === 'undefined'
              ? isImageFile(item)
              : item.isImage,
+          deletable:
+            typeof item.deletable === 'undefined' ? true : item.deletable,
        })
      );
      this.setData({ lists, isInCount: lists.length < maxCount });
--- a/dist/uploader/index.wxml
+++ b/dist/uploader/index.wxml
@ -33,17 +33,18 @@
        wx:if="{{ item.status === 'uploading' || item.status === 'failed' }}"
        class="van-uploader__mask"
      >
-       <van-icon wx:if="{{ item.status === 'failed' }}" name="warning-o" class="van-uploader__mask-icon" />
-       <van-loading wx:else class="van-uploader__loading" />
-       <text wx:if="{{ item.message }}" class="van-uploader__upload-text">{{ item.message }}</text>
+       <van-icon wx:if="{{ item.status === 'failed' }}" name="close" class="van-uploader__mask-icon" />
+       <van-loading wx:else custom-class="van-uploader__loading" />
+       <text wx:if="{{ item.message }}" class="van-uploader__mask-message">{{ item.message }}</text>
      </view>
-      <van-icon
-        wx:if="{{ deletable }}"
-        name="clear"
-        class="van-uploader__preview-delete"
+      <view
+        wx:if="{{ deletable && item.deletable }}"
        data-index="{{ index }}"
-        bind:tap="deleteItem"
-      />
+        class="van-uploader__preview-delete"
+        catch:tap="deleteItem"
+      >
+        <van-icon name="cross" class="van-uploader__preview-delete-icon" />
+      </view>
    </view>

    <!-- 上传样式 -->
@ -57,7 +58,7 @@
        wx:if="{{ showUpload }}"
        class="van-uploader__upload {{ disabled ? 'van-uploader__upload--disabled': ''}}"
        style="width: {{ utils.addUnit(previewSize) }}; height: {{ utils.addUnit(previewSize) }};"
-        bind:tap="startUpload"
+        bindtap="startUpload"
      >
        <van-icon name="{{ uploadIcon }}" class="van-uploader__upload-icon" />
        <text wx:if="{{ uploadText }}" class="van-uploader__upload-text">{{ uploadText }}</text>
--- a/dist/uploader/index.wxss
+++ b/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;border-radius:8px}.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;border-radius:8px}.van-uploader__preview-delete{position:absolute;top:-8px;right:-8px;color:#969799;font-size:18px;background-color:#fff;border-radius:100%}.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;border-radius:8px}.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);border-radius:8px}.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}
+@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;background-color:rgba(0,0,0,.7);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:-2px;right:-2px;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}
--- a/docs/markdown/changelog.md
+++ b/docs/markdown/changelog.md
@ -1,5 +1,139 @@
 # 更新日志

+### [1.5.0](https://github.com/youzan/vant-weapp/compare/v1.5.0)
+
+`2020-08-27`
+
+**Features**
+
+- ShareSheet: 新增组件 [#3559](https://github.com/youzan/vant-weapp/issues/3559)
+- Icons: 升级 @vant/icons 至 v1.2.5 [#3539](https://github.com/youzan/vant-weapp/issues/3539)
+- sidebar: 新增 badge 属性 [#3564](https://github.com/youzan/vant-weapp/issues/3564)
+- Tabs: 调整默认 line-width 至 40px [#3518](https://github.com/youzan/vant-weapp/issues/3518)
+- Tabs: 去除默认边框 [#3519](https://github.com/youzan/vant-weapp/issues/3519)
+- TreeSelect: 新增 selected-icon 属性 [#3565](https://github.com/youzan/vant-weapp/issues/3565)
+- TreeSelect: 支持 badge、dot 显示 [#3565](https://github.com/youzan/vant-weapp/issues/3565)
+
+**Bug Fixes**
+
+- collapse: 修复嵌套在 popup 等组件中时默认展开无效 [#3562](https://github.com/youzan/vant-weapp/issues/3562)
+- empty: 修复 image、description 插槽不生效 [#3563](https://github.com/youzan/vant-weapp/issues/3563)
+
+### [1.4.4](https://github.com/youzan/vant-weapp/tree/v1.4.4)
+
+`2020-08-12`
+
+**Bug Fixes**
+
+- Transition: 重构组件以修复卡顿问题 [#3498](https://github.com/youzan/vant-weapp/pull/3498)
+- Icon: 修复数字未对齐 [#3501](https://github.com/youzan/vant-weapp/pull/3501)
+- Tab: 修复可滚动时下划线位置错误 [#3511](https://github.com/youzan/vant-weapp/pull/3511)
+
+### [v1.4.3](https://github.com/youzan/vant-weapp/tree/v1.4.3)
+
+`2020-08-07`
+
+**Features**
+
+- Dialog: 增加圆角按钮样式 [#3476](https://github.com/youzan/vant-weapp/pull/3476)
+- Cell: 调整下划线位置 [#3487](https://github.com/youzan/vant-weapp/pull/3487)
+- Tab: 调整默认滚动阈值至 5 个、优化样式 [#3459](https://github.com/youzan/vant-weapp/pull/3459)
+
+### [v1.4.2](https://github.com/youzan/vant-weapp/tree/v1.4.2)
+
+`2020-08-03`
+
+**Features**
+
+- Toast: 优化样式 [#3451](https://github.com/youzan/vant-weapp/pull/3451)
+- Tag: 优化样式 [#3465](https://github.com/youzan/vant-weapp/pull/3465)
+
+**Bug Fixes**
+
+- Calendar: 修复超出 max-range 时未显示 Toast [#3466](https://github.com/youzan/vant-weapp/pull/3466)
+- Tab: 修复手势滚动可切换至禁用项 [#3467](https://github.com/youzan/vant-weapp/pull/3467)
+
+### [v1.4.1](https://github.com/youzan/vant-weapp/tree/v1.4.1)
+
+`2020-07-28`
+
+**Features**
+
+- Picker: 调整默认可见的选项个数为 6 个 [#3418](https://github.com/youzan/vant-weapp/pull/3418)
+- Toast: 调整圆角为 8px [#3419](https://github.com/youzan/vant-weapp/pull/3419)
+
+**Bug Fixes**
+
+- Slider: 修复点击会触发 drag 事件 [#3415](https://github.com/youzan/vant-weapp/pull/3415)
+- Area: 修复中间列无法滚动 [#3443](https://github.com/youzan/vant-weapp/pull/3443)
+
+### [v1.4.0](https://github.com/youzan/vant-weapp/tree/v1.4.0)
+
+`2020-07-17`
+
+**Features**
+
+- Empty: 新增 Empty 组件 [\#3327](https://github.com/youzan/vant-weapp/pull/3327)
+- NoticeBar: 新增 background 属性 [\#3388](https://github.com/youzan/vant-weapp/pull/3388)
+- NoticeBar: 新增 close 事件 [\#3388](https://github.com/youzan/vant-weapp/pull/3388)
+- GridItem: 新增 icon-color 属性 [\#3386](https://github.com/youzan/vant-weapp/pull/3386)
+- NavBar: 现在 custom-style 将影响根节点[\#3371](https://github.com/youzan/vant-weapp/pull/3371)
+- Cell: 新增 title-style 属性, fix Field label width [\#3370](https://github.com/youzan/vant-weapp/pull/3370)
+- Uploader: 更新 failed 图标 [\#3359](https://github.com/youzan/vant-weapp/pull/3359)
+- Uploader: 更新删除图标样式 [\#3385](https://github.com/youzan/vant-weapp/pull/3385)
+- Uploader: 移除圆角样式 [\#3384](https://github.com/youzan/vant-weapp/pull/3384)
+- Field: 更新禁用态样式 [\#3358](https://github.com/youzan/vant-weapp/pull/3358)
+- Field: 更新 label 样式 [\#3357](https://github.com/youzan/vant-weapp/pull/3357)
+- Picker: 调整 action button 样式 [\#3316](https://github.com/youzan/vant-weapp/pull/3316)
+
+**Bug Fixes**
+
+- Collapse: 使用 animation 重构动画部分逻辑以修复动画卡顿 [\#3401](https://github.com/youzan/vant-weapp/pull/3401)
+- Uploader: 修复 loading 样式错误、调整 previewSize 属性默认值 [\#3317](https://github.com/youzan/vant-weapp/pull/3317)
+- Area: 修复低版本基础库下 columns-num 设置为 1 或 2 时真机环境报错 [\#3318](https://github.com/youzan/vant-weapp/pull/3318)
+- DatetimePicker: 修复使用 formatter 时，事件返回值可能不正确 [\#3352](https://github.com/youzan/vant-weapp/pull/3352)
+- Field: 修复 textarea 模式下 label 与 value 不在同一水平线上 [\#3383](https://github.com/youzan/vant-weapp/pull/3383)
+- Dialog: show dialog after class ready [\#3374](https://github.com/youzan/vant-weapp/pull/3374)
+- Calendar: confirm-disabled-text 属性增加默认值 [\#3394](https://github.com/youzan/vant-weapp/pull/3394)
+
+### [v1.3.3](https://github.com/youzan/vant-weapp/tree/v1.3.3)
+
+`2020-06-24`
+
+**Features**
+
+- steps: 为每一项增加 inactiveIcon、activeIcon 属性 [\#3315](https://github.com/youzan/vant-weapp/pull/3315)
+- field: 增加外部样式类 label-class [\#3311](https://github.com/youzan/vant-weapp/pull/3311)
+- field: 现在总会从内部 set value 值 [\#3313](https://github.com/youzan/vant-weapp/pull/3313)
+- uploader: 为每一项增加 deletable 属性 [\#3270](https://github.com/youzan/vant-weapp/pull/3270)
+- uploader: 扩大删除图标的可点击区域 [\#3265](https://github.com/youzan/vant-weapp/pull/3265)
+
+**Bug Fixes**
+
+- tabbar: 修复 iphone-se 上高度异常 [\#3314](https://github.com/youzan/vant-weapp/pull/3314)
+- grid: 修复 text 与 icon 同时设置时样式异常 [\#3310](https://github.com/youzan/vant-weapp/pull/3310)
+- calendar: 修复多选模式下 default-date 属性不生效 [\#3284](https://github.com/youzan/vant-weapp/pull/3284)
+- circle: 修复 type="2d" 时无法动态变更 value [\#3264](https://github.com/youzan/vant-weapp/pull/3264)
+- nav-bar: 修复未设置 left-text 时左侧图标样式异常 [\#3263](https://github.com/youzan/vant-weapp/pull/3263)
+
+### [v1.3.2](https://github.com/youzan/vant-weapp/tree/v1.3.2)
+
+`2020-06-04`
+
+**Features**
+
+- button: 新增 form-type 属性 [\#3208](https://github.com/youzan/vant-weapp/pull/3208)
+- grid: 新增 icon-size、badge 属性 [\#3236](https://github.com/youzan/vant-weapp/pull/3236)
+- grid: 新增 direction 属性 [\#3192](https://github.com/youzan/vant-weapp/pull/3192)
+
+**Bug Fixes**
+
+- Grid: 修复开启 `square` 时横、纵向间距不同 [\#3231](https://github.com/youzan/vant-weapp/pull/3231)
+- uploader: 修复点击删除图标时触发 click-preview 事件 [\#3230](https://github.com/youzan/vant-weapp/pull/3230)
+- circle: 修复 `type="2d"` 不生效 [\#3228](https://github.com/youzan/vant-weapp/pull/3228)
+- calendar: 修复在选择区间时，点击确定报错 [\#3195](https://github.com/youzan/vant-weapp/pull/3195)
+- tag: 修复 css 变量名拼写错误 [\#3191](https://github.com/youzan/vant-weapp/pull/3191)
+
 ### [v1.3.1](https://github.com/youzan/vant-weapp/tree/v1.3.1)

 `2020-05-24`
@ -15,10 +149,12 @@
 - 修复 GoodsActionButton 在某些情况下报错的问题 [\#3145](https://github.com/youzan/vant-weapp/pull/3145)

 ### [v1.3.0](https://github.com/youzan/vant-weapp/tree/v1.3.0)
+
 `2020-05-08`

 #### 支持简易双向绑定
-1.3.0中，我们为数个表单组件支持了简易双向绑定，涉及组件有
+
+1.3.0 中，我们为数个表单组件支持了简易双向绑定，涉及组件有

 Slider [\#3107](https://github.com/youzan/vant-weapp/pull/3107)

@ -33,7 +169,7 @@ Rate [\#3105](https://github.com/youzan/vant-weapp/pull/3105)
 - uploader: 所有类型都会触发 click-preview 事件 [\#3071](https://github.com/youzan/vant-weapp/pull/3071)
 - Uploader: 属性 accept 新增值 media [\#3047](https://github.com/youzan/vant-weapp/pull/3047)
 - feat: 新增基础 font-family [\#3061](https://github.com/youzan/vant-weapp/pull/3061)
- submit-bar: 使用另一个view实现 safe-area-inset-bottom 以避免样式冲突 [\#3104](https://github.com/youzan/vant-weapp/pull/3104)
+- submit-bar: 使用另一个 view 实现 safe-area-inset-bottom 以避免样式冲突 [\#3104](https://github.com/youzan/vant-weapp/pull/3104)

 **Bug Fixes**

@ -42,7 +178,6 @@ Rate [\#3105](https://github.com/youzan/vant-weapp/pull/3105)
 - Sticky: 修复使用组件时页面 onPageScroll 失效 [\#3092](https://github.com/youzan/vant-weapp/pull/3092)
 - button: 修复 disabled 属性对 open-type 类型的按钮无效 [\#3076](https://github.com/youzan/vant-weapp/pull/3076)

-
 ### [v1.2.2](https://github.com/youzan/vant-weapp/tree/v1.2.2)

 `2020-04-21`
--- a/docs/markdown/custom-style.md
+++ b/docs/markdown/custom-style.md
@ -84,4 +84,4 @@ Vant Weapp 为部分 CSS 属性开放了基于 CSS 属性的定制方案。

 相较于 解除样式隔离 和 使用外部样式类，这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。

-当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅[定制主题](/#/theme)
+当然，用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅[定制主题](#/theme)
--- a/docs/markdown/intro.md
+++ b/docs/markdown/intro.md
@ -8,7 +8,9 @@

 ### 介绍

-Vant Weapp 是移动端 Vue 组件库 [Vant](https://github.com/youzan/vant) 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
+Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万前端开发者，是业界主流的移动端组件库之一。
+
+目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。

 ### 预览

@ -34,7 +36,7 @@ Vant Weapp 是移动端 Vue 组件库 [Vant](https://github.com/youzan/vant) 的

 我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！

- <a target="_blank" href="https://app.mokahr.com/apply/youzan/6252#/job/96f5d2c7-e657-4d31-9244-195edc443a7f?_k=jf2141">职位详情</a>（Base: 杭州/深圳）
+- <a target="_blank" href="https://app.mokahr.com/apply/youzan/3750#/jobs/?keyword=%E5%89%8D%E7%AB%AF&_k=tueqds">职位详情</a>（Base: 杭州/深圳）
 - <a target="_blank" href="https://tech.youzan.com/tag/front-end/">团队博客</a>
 - <a target="_blank" href="https://github.com/youzan">开源项目</a>

--- a/example/app.json
+++ b/example/app.json
@ -49,7 +49,9 @@
    "pages/index-bar/index",
    "pages/skeleton/index",
    "pages/divider/index",
-    "pages/calendar/index"
+    "pages/empty/index",
+    "pages/calendar/index",
+    "pages/share-sheet/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f8f8f8",
@ -72,6 +74,7 @@
    "van-count-down": "./dist/count-down/index",
    "van-dialog": "./dist/dialog/index",
    "van-divider": "./dist/divider/index",
+    "van-empty": "./dist/empty/index",
    "van-field": "./dist/field/index",
    "van-goods-action": "./dist/goods-action/index",
    "van-goods-action-icon": "./dist/goods-action-icon/index",
@ -121,7 +124,8 @@
    "van-dropdown-menu": "./dist/dropdown-menu/index",
    "van-dropdown-item": "./dist/dropdown-item/index",
    "van-skeleton": "./dist/skeleton/index",
-    "van-calendar": "./dist/calendar/index"
+    "van-calendar": "./dist/calendar/index",
+    "van-share-sheet": "./dist/share-sheet/index"
  },
  "sitemapLocation": "sitemap.json"
 }
--- a/example/config.js
+++ b/example/config.js
@ -5,33 +5,33 @@ export default [
    list: [
      {
        path: '/button',
-        title: 'Button 按钮'
+        title: 'Button 按钮',
      },
      {
        path: '/cell',
-        title: 'Cell 单元格'
+        title: 'Cell 单元格',
      },
      {
        path: '/icon',
-        title: 'Icon 图标'
+        title: 'Icon 图标',
      },
      {
        path: '/image',
-        title: 'Image 图片'
+        title: 'Image 图片',
      },
      {
        path: '/col',
-        title: 'Layout 布局'
+        title: 'Layout 布局',
      },
      {
        path: '/popup',
-        title: 'Popup 弹出层'
+        title: 'Popup 弹出层',
      },
      {
        path: '/transition',
-        title: 'Transition 动画'
-      }
-    ]
+        title: 'Transition 动画',
+      },
+    ],
  },
  {
    groupName: '表单组件',
@ -43,49 +43,49 @@ export default [
      },
      {
        path: '/checkbox',
-        title: 'Checkbox 复选框'
+        title: 'Checkbox 复选框',
      },
      {
        path: '/datetime-picker',
-        title: 'DatetimePicker 时间选择'
+        title: 'DatetimePicker 时间选择',
      },
      {
        path: '/field',
-        title: 'Field 输入框'
+        title: 'Field 输入框',
      },
      {
        path: '/picker',
-        title: 'Picker 选择器'
+        title: 'Picker 选择器',
      },
      {
        path: '/radio',
-        title: 'Radio 单选框'
+        title: 'Radio 单选框',
      },
      {
        path: '/rate',
-        title: 'Rate 评分'
+        title: 'Rate 评分',
      },
      {
        path: '/search',
-        title: 'Search 搜索'
+        title: 'Search 搜索',
      },
      {
        path: '/slider',
-        title: 'Slider 滑块'
+        title: 'Slider 滑块',
      },
      {
        path: '/stepper',
-        title: 'Stepper 步进器'
+        title: 'Stepper 步进器',
      },
      {
        path: '/switch',
-        title: 'Switch 开关'
+        title: 'Switch 开关',
      },
      {
        path: '/uploader',
-        title: 'Uploader 文件上传'
-      }
-    ]
+        title: 'Uploader 文件上传',
+      },
+    ],
  },
  {
    groupName: '反馈组件',
@ -93,37 +93,41 @@ export default [
    list: [
      {
        path: '/action-sheet',
-        title: 'ActionSheet 上拉菜单'
+        title: 'ActionSheet 上拉菜单',
      },
      {
        path: '/dialog',
-        title: 'Dialog 弹出框'
+        title: 'Dialog 弹出框',
      },
      {
        path: '/dropdown-menu',
-        title: 'DropdownMenu 下拉菜单'
+        title: 'DropdownMenu 下拉菜单',
      },
      {
        path: '/loading',
-        title: 'Loading 加载'
+        title: 'Loading 加载',
      },
      {
        path: '/notify',
-        title: 'Notify 消息通知'
+        title: 'Notify 消息通知',
      },
      {
        path: '/overlay',
-        title: 'Overlay 遮罩层'
+        title: 'Overlay 遮罩层',
+      },
+      {
+        path: '/share-sheet',
+        title: 'ShareSheet 分享面板',
      },
      {
        path: '/swipe-cell',
-        title: 'SwipeCell 滑动单元格'
+        title: 'SwipeCell 滑动单元格',
      },
      {
        path: '/toast',
-        title: 'Toast 轻提示'
-      }
-    ]
+        title: 'Toast 轻提示',
+      },
+    ],
  },
  {
    groupName: '展示组件',
@ -131,53 +135,57 @@ export default [
    list: [
      {
        path: '/circle',
-        title: 'Circle 进度条'
+        title: 'Circle 进度条',
      },
      {
        path: '/collapse',
-        title: 'Collapse 折叠面板'
+        title: 'Collapse 折叠面板',
      },
      {
        path: '/count-down',
-        title: 'CountDown 倒计时'
+        title: 'CountDown 倒计时',
      },
      {
        path: '/divider',
-        title: 'Divider 分割线'
+        title: 'Divider 分割线',
+      },
+      {
+        path: '/empty',
+        title: 'Empty 空状态',
      },
      {
        path: '/notice-bar',
-        title: 'NoticeBar 通告栏'
+        title: 'NoticeBar 通告栏',
      },
      {
        path: '/panel',
-        title: 'Panel 面板'
+        title: 'Panel 面板',
      },
      {
        path: '/progress',
-        title: 'Progress 进度条'
+        title: 'Progress 进度条',
      },
      {
        path: '/skeleton',
-        title: 'Skeleton 骨架屏'
+        title: 'Skeleton 骨架屏',
      },
      {
        path: '/steps',
-        title: 'Steps 步骤条'
+        title: 'Steps 步骤条',
      },
      {
        path: '/sticky',
-        title: 'Sticky 粘性布局'
+        title: 'Sticky 粘性布局',
      },
      {
        path: '/tag',
-        title: 'Tag 标记'
+        title: 'Tag 标记',
      },
      {
        path: '/tree-select',
-        title: 'TreeSelect 分类选择'
-      }
-    ]
+        title: 'TreeSelect 分类选择',
+      },
+    ],
  },
  {
    groupName: '导航组件',
@ -185,29 +193,29 @@ export default [
    list: [
      {
        path: '/grid',
-        title: 'Grid 宫格'
+        title: 'Grid 宫格',
      },
      {
        path: '/index-bar',
-        title: 'IndexBar 索引栏'
+        title: 'IndexBar 索引栏',
      },
      {
        path: '/sidebar',
-        title: 'Sidebar 侧边导航'
+        title: 'Sidebar 侧边导航',
      },
      {
        path: '/nav-bar',
-        title: 'NavBar 导航栏'
+        title: 'NavBar 导航栏',
      },
      {
        path: '/tab',
-        title: 'Tab 标签页'
+        title: 'Tab 标签页',
      },
      {
        path: '/tabbar',
-        title: 'Tabbar 标签栏'
-      }
-    ]
+        title: 'Tabbar 标签栏',
+      },
+    ],
  },
  {
    groupName: '业务组件',
@ -215,20 +223,20 @@ export default [
    list: [
      {
        path: '/area',
-        title: 'Area 省市区选择'
+        title: 'Area 省市区选择',
      },
      {
        path: '/card',
-        title: 'Card 商品卡片'
+        title: 'Card 商品卡片',
      },
      {
        path: '/submit-bar',
-        title: 'SubmitBar 提交订单栏'
+        title: 'SubmitBar 提交订单栏',
      },
      {
        path: '/goods-action',
-        title: 'GoodsAction 商品导航'
-      }
-    ]
-  }
+        title: 'GoodsAction 商品导航',
+      },
+    ],
+  },
 ];
--- a/example/pages/circle/index.wxml
+++ b/example/pages/circle/index.wxml
@ -1,5 +1,5 @@
 <demo-block title="基础用法">
-  <van-circle value="{{ value }}" text="{{ value }}%" />
+  <van-circle type="2d" value="{{ value }}" text="{{ value }}%" />
 </demo-block>

 <demo-block title="样式定制">
--- a/example/pages/dialog/index.js
+++ b/example/pages/dialog/index.js
@ -5,34 +5,49 @@ const message = '代码是写出来给人看的，附带能在机器上运行';

 Page({
  data: {
-    show: false
+    show: false,
  },

  showCustomDialog() {
    this.setData({ show: true });
  },

-  onClickAlert() {
-    Dialog.alert({
-      title: '标题',
-      message
-    });
-  },
-
  getUserInfo(event) {
    console.log(event.detail);
  },

+  onClickThemeAlert() {
+    Dialog.alert({
+      title: '标题',
+      theme: 'round-button',
+      message,
+    });
+  },
+
+  onClickThemeAlert2() {
+    Dialog.alert({
+      theme: 'round-button',
+      message,
+    });
+  },
+
+  onClickAlert() {
+    Dialog.alert({
+      title: '标题',
+      message,
+    });
+  },
+
  onClickAlert2() {
    Dialog.alert({
-      message
+      message,
    });
  },

  onClickConfirm() {
    Dialog.confirm({
      title: '标题',
-      message
+      message,
    });
  },

@ -40,7 +55,7 @@ Page({
    Dialog.confirm({
      title: '标题',
      message,
-      asyncClose: true
+      asyncClose: true,
    })
      .then(() => {
        setTimeout(() => {
@ -52,9 +67,9 @@ Page({
      });
  },

-  onClose(event) {
+  onClose() {
    this.setData({
-      show: false
+      show: false,
    });
-  }
+  },
 });
--- a/example/pages/dialog/index.wxml
+++ b/example/pages/dialog/index.wxml
@ -7,6 +7,15 @@
  </van-button>
 </demo-block>

+<demo-block title="圆角样式" padding>
+  <van-button type="primary" class="demo-margin-right" bind:click="onClickThemeAlert">
+    提示弹窗
+  </van-button>
+  <van-button type="primary" bind:click="onClickThemeAlert2">
+    提示弹窗（无标题）
+  </van-button>
+</demo-block>
+
 <demo-block title="确认弹窗" padding>
  <van-button type="primary" bind:click="onClickConfirm">
    确认弹窗
--- a/example/pages/empty/index.js
+++ b/example/pages/empty/index.js
@ -0,0 +1,13 @@
+import Page from '../../common/page';
+
+Page({
+  data: {
+    activeTab: 0,
+  },
+
+  onChange(event) {
+    this.setData({
+      activeTab: event.detail.name,
+    });
+  },
+});
--- a/example/pages/empty/index.json
+++ b/example/pages/empty/index.json
@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Empty 空状态"
+}
--- a/example/pages/empty/index.wxml
+++ b/example/pages/empty/index.wxml
@ -0,0 +1,36 @@
+<demo-block title="基础用法" padding>
+    <van-empty description="描述文字" />
+</demo-block>
+
+<demo-block title="图片类型">
+  <van-tabs
+    active="{{ activeTab }}"
+    bind:change="onChange"
+  >
+    <van-tab title="通用错误">
+      <van-empty image="error" description="描述文字" />
+    </van-tab>
+    <van-tab title="网络错误">
+      <van-empty image="network" description="描述文字" />
+    </van-tab>
+    <van-tab title="搜索提示">
+      <van-empty image="search" description="描述文字" />
+    </van-tab>
+  </van-tabs>
+</demo-block>
+
+<demo-block title="自定义图片" padding>
+  <van-empty
+    custom-class="custom-image"
+    image="https://img.yzcdn.cn/vant/custom-empty-image.png"
+    description="描述文字"
+  />
+</demo-block>
+
+<demo-block title="底部内容" padding>
+  <van-empty description="描述文字">
+    <van-button round type="danger" custom-class="bottom-button">
+      按钮
+    </van-button>
+  </van-empty>
+</demo-block>
--- a/example/pages/empty/index.wxss
+++ b/example/pages/empty/index.wxss
@ -0,0 +1,10 @@
+
+.custom-image .van-empty__image {
+  width: 90px;
+  height: 90px;
+}
+
+.bottom-button {
+  width: 160px;
+  height: 40px;
+}
--- a/example/pages/grid/index.wxml
+++ b/example/pages/grid/index.wxml
@ -30,6 +30,12 @@
  </van-grid>
 </demo-block>

+<demo-block title="内容横排">
+  <van-grid direction="horizontal" column-num="3">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array3 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
 <demo-block title="页面跳转">
  <van-grid clickable column-num="2">
    <van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转" />
@ -37,9 +43,9 @@
  </van-grid>
 </demo-block>

-<demo-block title="提示信息">
+<demo-block title="徽标提示">
  <van-grid column-num="2">
    <van-grid-item icon="home-o" text="文字" dot />
-    <van-grid-item icon="search" text="文字" info="99+" />
+    <van-grid-item icon="search" text="文字" badge="99+" />
  </van-grid>
 </demo-block>
--- a/example/pages/nav-bar/index.wxml
+++ b/example/pages/nav-bar/index.wxml
@ -1,7 +1,6 @@
 <demo-block title="基础用法">
  <van-nav-bar
    title="标题"
-    left-text="返回"
    right-text="按钮"
    left-arrow
    bind:click-left="onClickLeft"
@ -11,6 +10,6 @@

 <demo-block title="高级用法">
  <van-nav-bar title="标题" left-text="返回" left-arrow>
-    <van-icon name="search" slot="right" custom-class="icon" />
+    <van-icon name="search" slot="right" custom-class="icon" size="18" />
  </van-nav-bar>
 </demo-block>
--- a/example/pages/notice-bar/index.js
+++ b/example/pages/notice-bar/index.js
@ -2,12 +2,7 @@ import Page from '../../common/page';

 Page({
  data: {
-    text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
-    speedValue: 80
+    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
+    shortText: '技术是开发它的人的共同灵魂。',
  },
-  onChange(event) {
-    this.setData({
-      speedValue: event.detail
-    });
-  }
 });
--- a/example/pages/notice-bar/index.wxml
+++ b/example/pages/notice-bar/index.wxml
@ -1,40 +1,30 @@
 <demo-block title="基础用法">
  <van-notice-bar
    text="{{ text }}"
-    left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
+    left-icon="volume-o"
  />
 </demo-block>

-<demo-block title="通告栏模式">
-  <van-notice-bar mode="closeable" text="{{ text }}" custom-class="demo-margin-bottom" />
-  <van-notice-bar mode="link" text="{{ text }}" />
-</demo-block>
-
-<demo-block title="禁用滚动">
-  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" />
+<demo-block title="滚动模式">
+  <van-notice-bar scrollable text="{{ shortText }}" custom-class="demo-margin-bottom" />
+  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" custom-class="demo-margin-bottom" />
 </demo-block>

 <demo-block title="多行展示">
  <van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" />
 </demo-block>

-<demo-block title="使用左右插槽">
-  <van-notice-bar text="{{ text }}">
-    <text slot="left-icon">[公告]</text>
-    <text slot="right-icon">[结束]</text>
-  </van-notice-bar>
+<demo-block title="通知栏模式">
+  <van-notice-bar mode="closeable" text="{{ shortText }}" />
+  <van-notice-bar custom-class="margin-top" mode="link" text="{{ shortText }}" />
 </demo-block>

-<demo-block title="自定义滚动速率">
+<demo-block title="自定义样式">
  <van-notice-bar
-    text="{{ text }}"
-    speed="{{speedValue}}"
-    left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
-  />
-  当前速度{{speedValue}}px/s
-  <van-slider
-    value="{{speedValue}}"
-    custom-class="slider"
-    bind:change="onChange"
-  />
+    text="{{ shortText }}"
+    color="#1989fa"
+    background="#ecf9ff"
+    left-icon="info-o"
+  >
+  </van-notice-bar>
 </demo-block>
--- a/example/pages/notice-bar/index.wxss
+++ b/example/pages/notice-bar/index.wxss
@ -1 +1,4 @@
-/* pages/notice-bar/index.wxss */
+/* pages/notice-bar/index.wxss */
+.margin-top {
+  margin-top: 4px;
+}
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				@import '../common/index.wxss';.van-empty{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;padding:32px 0}.van-empty__image{width:160px;height:160px}.van-empty__image:empty{display:none}.van-empty__image__img{width:100%;height:100%}.van-empty__image:not(:empty)+.van-empty__image{display:none}.van-empty__description{margin-top:16px;padding:0 60px;color:#969799;font-size:14px;line-height:20px}.van-empty__description:empty,.van-empty__description:not(:empty)+.van-empty__description{display:none}.van-empty__bottom{margin-top:24px}
				`@ -0,0 +1 @@`
				@import '../common/index.wxss';.van-share-sheet__header{padding:12px 16px 4px;text-align:center}.van-share-sheet__title{margin-top:8px;color:#323233;font-weight:400;font-size:14px;line-height:20px}.van-share-sheet__title:empty,.van-share-sheet__title:not(:empty)+.van-share-sheet__title{display:none}.van-share-sheet__description{display:block;margin-top:8px;color:#969799;font-size:12px;line-height:16px}.van-share-sheet__description:empty,.van-share-sheet__description:not(:empty)+.van-share-sheet__description{display:none}.van-share-sheet__cancel{display:block;box-sizing:initial;width:100%;height:auto;padding:0;font-size:16px;line-height:48px;text-align:center;background:#fff;border:none}.van-share-sheet__cancel:before{display:block;height:8px;background-color:#f7f8fa;content:" "}.van-share-sheet__cancel:after{display:none}.van-share-sheet__cancel:active{background-color:#f2f3f5}