Merge branch 'dev' into next

2025-04-06 03:57:59 +08:00 · 2020-08-07 06:33:04 +08:00 · 2020-08-07 06:33:04 +08:00 · 17c64b24e7
commit 17c64b24e7
parent 49206598fc db94fa3193
84 changed files with 898 additions and 345 deletions
--- a/docs/markdown/changelog.en-US.md
+++ b/docs/markdown/changelog.en-US.md
@ -10,6 +10,74 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 - Minor version：released every one to two months, including backwards compatible features.
 - Major version：including breaking changes and new features.

+### [v2.10.0-beta.5](https://github.com/youzan/vant/compare/v2.10.0-beta.4...v2.10.0-beta.5)
+
+`2020-08-06`
+
+**style**
+
+- NumberKeyboard: adjust padding bottom [#6938](https://github.com/youzan/vant/issues/6938)
+
+**Bug Fixes**
+
+- AddressEdit: render error in some cases [#6942](https://github.com/youzan/vant/issues/6942)
+- Dialog: incorrect padding with round-button theme [#6936](https://github.com/youzan/vant/issues/6936)
+- Info: number vertical align center [#6952](https://github.com/youzan/vant/issues/6952)
+- NumberKeyboard: incorrect key height on legacy safari [#6937](https://github.com/youzan/vant/issues/6937)
+- Picker: When item.defaultIndex is 0, this.defaultIndex will be used [#6948](https://github.com/youzan/vant/issues/6948)
+- Sku: header image shrink [#6949](https://github.com/youzan/vant/issues/6949)
+
+### [v2.10.0-beta.4](https://github.com/youzan/vant/compare/v2.10.0-beta.3...v2.10.0-beta.4)
+
+`2020-08-04`
+
+- Revert "fix(Icon): incorrect image icon height when loading (#6858)" [#6858](https://github.com/youzan/vant/issues/6858)
+
+### [v2.10.0-beta.3](https://github.com/youzan/vant/compare/v2.10.0-beta.2...v2.10.0-beta.3)
+
+`2020-08-04`
+
+**style**
+
+- Dialog: fix round-button theme [#6934](https://github.com/youzan/vant/issues/6934)
+
+### [v2.10.0-beta.2](https://github.com/youzan/vant/compare/v2.10.0-beta.1...v2.10.0-beta.2)
+
+`2020-08-03`
+
+**Feature**
+
+- Dialog: add new prop theme [#6921](https://github.com/youzan/vant/issues/6921)
+- Icon: add back-top icon [#6931](https://github.com/youzan/vant/issues/6931)
+
+**style**
+
+- Image: adjust icon color to @gray-4 [729cca](https://github.com/youzan/vant/commit/729cca61a978ba243cf442143ae85d2abb464de0)
+- Tab: disable ellipsis when scrollable [bc0e45](https://github.com/youzan/vant/commit/bc0e45687a76f49355efa7fb2403184746575012)
+
+**Bug Fixes**
+
+- Calendar: should only scroll calendar body when inited [#6926](https://github.com/youzan/vant/issues/6926)
+
+### [v2.10.0-beta.1](https://github.com/youzan/vant/compare/v2.9.4...v2.10.0-beta.1)
+
+`2020-07-31`
+
+**Feature**
+
+- Icon: add photo-fail icon [#6883](https://github.com/youzan/vant/issues/6883)
+- DropdownMenu: add @dropdown-menu-box-shadow var [6d0c54](https://github.com/youzan/vant/commit/6d0c54e8f4e9c1c9982778df8a36c7ac3fc2f905)
+
+**style**
+
+- CouponCell: insert a space after currency [#6888](https://github.com/youzan/vant/issues/6888)
+- Image: update loading icon and error icon [#6890](https://github.com/youzan/vant/issues/6890)
+- NumberKeyboard: adjust key height to 28px [#6899](https://github.com/youzan/vant/issues/6899)
+- Sku: improve price align [#6911](https://github.com/youzan/vant/issues/6911)
+- Tab: remove default border [69ac60](https://github.com/youzan/vant/commit/69ac602bc21b445fb88783303d00bd65e4dc5ae2)
+- Tab: adjust padding in complete mode [90e678](https://github.com/youzan/vant/commit/90e678756aecddee2beb522e38017c68f616b387)
+- Tab: update nav padding [8027f4](https://github.com/youzan/vant/commit/8027f46f3ff33b200cf022e5f9a2693293a1bb16)
+
 ### [v2.10.0-beta.0](https://github.com/youzan/vant/compare/v2.9.4-beta.0...v2.10.0-beta.0)

 `2020-07-25`
@ -44,6 +112,20 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 - Icon: incorrect image icon height when loading [#6858](https://github.com/youzan/vant/issues/6858)
 - ImagePreview: fit orientationchange [#6825](https://github.com/youzan/vant/issues/6825)

+### [v2.9.4](https://github.com/youzan/vant/compare/v2.9.3...v2.9.4)
+
+`2020-07-29`
+
+**Feature**
+
+- ShareSheet: add className option [#6886](https://github.com/youzan/vant/issues/6886)
+- Sku: modify default min year of sku date picker [#6879](https://github.com/youzan/vant/issues/6879)
+
+**Bug Fixes**
+
+- Popup: incorrect lock scroll in some cases [#6892](https://github.com/youzan/vant/issues/6892)
+- Stepper: double tap to scroll in safari [#6882](https://github.com/youzan/vant/issues/6882)
+
 ### [v2.9.3](https://github.com/youzan/vant/compare/v2.9.2...v2.9.3)

 `2020-07-19`
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@ -10,6 +10,74 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。

+### [v2.10.0-beta.5](https://github.com/youzan/vant/compare/v2.10.0-beta.4...v2.10.0-beta.5)
+
+`2020-08-06`
+
+**style**
+
+- NumberKeyboard: 减少底部留白大小 [#6938](https://github.com/youzan/vant/issues/6938)
+- Dialog: 优化使用 round-button 主题时的内边距 [#6936](https://github.com/youzan/vant/issues/6936)
+
+**Bug Fixes**
+
+- AddressEdit: 修复个别情况下按钮渲染错误的问题 [#6942](https://github.com/youzan/vant/issues/6942)
+- Info: 修复 badge 的数字在 iOS 上不居中的问题 [#6952](https://github.com/youzan/vant/issues/6952)
+- NumberKeyboard: 修复在低版本 safari 上按键高度错误的问题 [#6937](https://github.com/youzan/vant/issues/6937)
+- Picker: 修复 defaultIndex 在个别情况下取值逻辑错误的问题 [#6948](https://github.com/youzan/vant/issues/6948)
+- Sku: 修复价格较长时顶部图片的宽度被压缩的问题 [#6949](https://github.com/youzan/vant/issues/6949)
+
+### [v2.10.0-beta.4](https://github.com/youzan/vant/compare/v2.10.0-beta.3...v2.10.0-beta.4)
+
+`2020-08-04`
+
+- 回滚 "fix(Icon): 修复图片图标加载过程中高度异常的问题 (#6858)" [#6858](https://github.com/youzan/vant/issues/6858)
+
+### [v2.10.0-beta.3](https://github.com/youzan/vant/compare/v2.10.0-beta.2...v2.10.0-beta.3)
+
+`2020-08-04`
+
+**style**
+
+- Dialog: 修复 round-theme 弹窗样式错误的问题 [#6934](https://github.com/youzan/vant/issues/6934)
+
+### [v2.10.0-beta.2](https://github.com/youzan/vant/compare/v2.10.0-beta.1...v2.10.0-beta.2)
+
+`2020-08-03`
+
+**Feature**
+
+- Dialog: 新增 theme 属性，用于展示圆角按钮风格的弹窗 [#6921](https://github.com/youzan/vant/issues/6921)
+- Icon: 新增 back-top 图标 [#6931](https://github.com/youzan/vant/issues/6931)
+
+**style**
+
+- Dialog: 确认按钮的默认颜色调整为红色 [#6921](https://github.com/youzan/vant/issues/6921)
+- Image: 加载图标和错误图标的颜色调整为 @gray-4 [729cca](https://github.com/youzan/vant/commit/729cca61a978ba243cf442143ae85d2abb464de0)
+- Tab: 在横向滚动模式下默认不截断标题的文字 [bc0e45](https://github.com/youzan/vant/commit/bc0e45687a76f49355efa7fb2403184746575012)
+
+**Bug Fixes**
+
+- Calendar: 修复初始化日历时页面滚动条位置错误的问题 [#6926](https://github.com/youzan/vant/issues/6926)
+
+### [v2.10.0-beta.1](https://github.com/youzan/vant/compare/v2.9.4...v2.10.0-beta.1)
+
+`2020-07-31`
+
+**Feature**
+
+- Icon: 新增 photo-fail 图标 [#6883](https://github.com/youzan/vant/issues/6883)
+- DropdownMenu: 新增 @dropdown-menu-box-shadow 变量 [6d0c54](https://github.com/youzan/vant/commit/6d0c54e8f4e9c1c9982778df8a36c7ac3fc2f905)
+
+**style**
+
+- Tab: 移除默认边框 [69ac60](https://github.com/youzan/vant/commit/69ac602bc21b445fb88783303d00bd65e4dc5ae2)
+- Tab: 优化标签间距 [90e678](https://github.com/youzan/vant/commit/90e678756aecddee2beb522e38017c68f616b387) [8027f4](https://github.com/youzan/vant/commit/8027f46f3ff33b200cf022e5f9a2693293a1bb16)
+- Image: 更新加载图标和错误图标 [#6890](https://github.com/youzan/vant/issues/6890)
+- CouponCell: 优化金额与符号的间隔 [#6888](https://github.com/youzan/vant/issues/6888)
+- Sku: 优化价格符号位置，与下方文案对齐 [#6911](https://github.com/youzan/vant/issues/6911)
+- NumberKeyboard: 调整按键高度为 28px，增加底部空白区域 [#6899](https://github.com/youzan/vant/issues/6899)
+
 ### [v2.10.0-beta.0](https://github.com/youzan/vant/compare/v2.9.4-beta.0...v2.10.0-beta.0)

 `2020-07-25`
@ -44,6 +112,20 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - Icon: 修复图片图标加载过程中高度异常的问题 [#6858](https://github.com/youzan/vant/issues/6858)
 - ImagePreview: 修复 iOS 下旋转屏幕时布局错误的问题 [#6825](https://github.com/youzan/vant/issues/6825)

+### [v2.9.4](https://github.com/youzan/vant/compare/v2.9.3...v2.9.4)
+
+`2020-07-29`
+
+**Feature**
+
+- ShareSheet: 新增 className 选项，用于自定义选项的类名 [#6886](https://github.com/youzan/vant/issues/6886)
+- Sku: 优化日期选择范围 [#6879](https://github.com/youzan/vant/issues/6879)
+
+**Bug Fixes**
+
+- Popup: 修复在个别情况下滚动锁定无法解除的问题 [#6892](https://github.com/youzan/vant/issues/6892)
+- Stepper: 修复在 safari 上快速点击按钮时会导致页面滚动的问题 [#6882](https://github.com/youzan/vant/issues/6882)
+
 ### [v2.9.3](https://github.com/youzan/vant/compare/v2.9.2...v2.9.3)

 `2020-07-19`
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vant",
-  "version": "2.10.0-beta.0",
+  "version": "2.10.0-beta.5",
  "description": "Mobile UI Components built on Vue",
  "main": "lib/index.js",
  "module": "es/index.js",
@ -51,7 +51,7 @@
  "license": "MIT",
  "dependencies": {
    "@babel/runtime": "7.x",
-    "@vant/icons": "1.2.3",
+    "@vant/icons": "1.2.5",
    "vue-lazyload": "1.2.3"
  },
  "peerDependencies": {
--- a/packages/vant-cli/yarn.lock
+++ b/packages/vant-cli/yarn.lock
@ -2918,9 +2918,9 @@ bluebird@^3.1.1, bluebird@^3.5.5:
  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==

 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==

 body-parser@1.19.0:
  version "1.19.0"
@ -4617,9 +4617,9 @@ elegant-spinner@^2.0.0:
  integrity sha1-8jY3iYXs0W2nVIjRZr5LaI/Vr5Q=

 elliptic@^6.0.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
-  integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
  dependencies:
    bn.js "^4.4.0"
    brorand "^1.0.1"
--- a/packages/vant-icons/CHANGELOG.md
+++ b/packages/vant-icons/CHANGELOG.md
@ -1,5 +1,13 @@
 ## Changelog

+## 1.2.5
+
+- add back-top icon
+
+## 1.2.4
+
+- add photo-fail icon
+
 ## 1.2.3

 - fix enlarge icon align
--- a/packages/vant-icons/assets/icons.sketch
+++ b/packages/vant-icons/assets/icons.sketch
--- a/packages/vant-icons/build/codepoints.js
+++ b/packages/vant-icons/build/codepoints.js
@ -229,6 +229,8 @@ const map = {
  F0E2: 'wechat',
  F0E3: 'youzan-shield',
  F0E4: 'enlarge',
+  F0E5: 'photo-fail',
+  F0E6: 'back-top',
 };

 const reversedMap = {};
--- a/packages/vant-icons/build/template.tpl
+++ b/packages/vant-icons/build/template.tpl
@ -13,7 +13,7 @@
 .van-icon {
  position: relative;
  display: inline-block;
-  font: normal normal normal 14px/1 "<%= fontName %>";
+  font: normal normal normal 14px/1 '<%= fontName %>';
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
@ -24,7 +24,7 @@
 }

 <% _.each(glyphs, function(glyph) { %>.van-icon-<%= glyph.fileName %>::before {
-  content: "\<%= glyph.codePoint %>";
+  content: '\<%= glyph.codePoint %>';
 }

 <% }); %>
--- a/packages/vant-icons/package.json
+++ b/packages/vant-icons/package.json
@ -1,6 +1,6 @@
 {
  "name": "@vant/icons",
-  "version": "1.2.3",
+  "version": "1.2.5",
  "description": "vant icons",
  "main": "./src/config.js",
  "files": [
--- a/packages/vant-icons/src/config.js
+++ b/packages/vant-icons/src/config.js
@ -103,6 +103,7 @@ module.exports = {
    'desktop-o',
    'apps-o',
    'home-o',
+    'back-top',
    'search',
    'points',
    'edit',
@ -237,5 +238,6 @@ module.exports = {
    'bars',
    'wap-nav',
    'enlarge',
+    'photo-fail',
  ],
 };
--- a/packages/vant-icons/src/encode.less
+++ b/packages/vant-icons/src/encode.less
--- a/packages/vant-icons/src/index.less
+++ b/packages/vant-icons/src/index.less
@ -5,9 +5,9 @@
  font-family: 'vant-icon';
  font-style: normal;
  font-display: auto;
-  src: url('https://img.yzcdn.cn/vant/vant-icon-6ae417.woff2') format('woff2'),
-    url('https://img.yzcdn.cn/vant/vant-icon-6ae417.woff') format('woff'),
-    url('https://img.yzcdn.cn/vant/vant-icon-6ae417.ttf') format('truetype');
+  src: url('https://img.yzcdn.cn/vant/vant-icon-eeb192.woff2') format('woff2'),
+    url('https://img.yzcdn.cn/vant/vant-icon-eeb192.woff') format('woff'),
+    url('https://img.yzcdn.cn/vant/vant-icon-eeb192.ttf') format('truetype');
 }

 .van-icon {
@ -83,6 +83,10 @@
  content: '\F00E';
 }

+.van-icon-back-top::before {
+  content: '\F0E6';
+}
+
 .van-icon-bag-o::before {
  content: '\F00F';
 }
@ -651,6 +655,10 @@
  content: '\F09B';
 }

+.van-icon-photo-fail::before {
+  content: '\F0E5';
+}
+
 .van-icon-photo-o::before {
  content: '\F09C';
 }
--- a/src/address-edit/index.js
+++ b/src/address-edit/index.js
@ -260,7 +260,7 @@ export default createComponent({
    },
  },

-  render() {
+  render(h) {
    const { data, errorInfo, searchResult, disableArea } = this;
    const onFocus = (name) => () => this.onFocus(name);

@ -334,7 +334,7 @@ export default createComponent({
          )}
          {this.slots()}
        </div>
-        {this.showSetDefault && (
+        {this.showSetDefault ? (
          <SwitchCell
            class={bem('default')}
            vModel={data.isDefault}
@ -344,6 +344,8 @@ export default createComponent({
              this.$emit('change-default', event);
            }}
          />
+        ) : (
+          h()
        )}
        <div vShow={!hideBottomFields} class={bem('buttons')}>
          <Button
--- a/src/address-edit/test/snapshots/index.spec.js.snap
+++ b/src/address-edit/test/snapshots/index.spec.js.snap
@ -35,6 +35,7 @@ exports[`create a AddressEdit 1`] = `
      </div>
    </div>
  </div>
+  <!---->
  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
      <div class="van-button__content"><span class="van-button__text">保存</span></div>
    </button></div>
@ -296,6 +297,7 @@ exports[`valid area placeholder confirm 1`] = `
      </div>
    </div>
  </div>
+  <!---->
  <div class="van-address-edit__buttons"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round">
      <div class="van-button__content"><span class="van-button__text">保存</span></div>
    </button></div>
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@ -1,4 +1,5 @@
 import { createNamespace } from '../../utils';
+import { setScrollTop } from '../../utils/dom/scroll';
 import {
  t,
  bem,
@ -107,12 +108,16 @@ export default createComponent({
      return this.height;
    },

-    scrollIntoView() {
-      if (this.showSubtitle) {
-        this.$refs.days.scrollIntoView();
-      } else {
-        this.$refs.month.scrollIntoView();
-      }
+    scrollIntoView(body) {
+      const { days, month } = this.$refs;
+      const el = this.showSubtitle ? days : month;
+
+      const scrollTop =
+        el.getBoundingClientRect().top -
+        body.getBoundingClientRect().top +
+        body.scrollTop;
+
+      setScrollTop(body, scrollTop);
    },

    getMultipleDayType(day) {
--- a/src/calendar/index.js
+++ b/src/calendar/index.js
@ -208,7 +208,8 @@ export default createComponent({

        this.months.some((month, index) => {
          if (compareMonth(month, targetDate) === 0) {
-            this.$refs.months[index].scrollIntoView();
+            const { body, months } = this.$refs;
+            months[index].scrollIntoView(body);
            return true;
          }

--- a/src/calendar/test/index.spec.js
+++ b/src/calendar/test/index.spec.js
@ -457,28 +457,6 @@ test('color prop when type is range', async () => {
  expect(wrapper).toMatchSnapshot();
 });

-test('should scroll to current month when show', async (done) => {
-  const wrapper = mount(Calendar, {
-    propsData: {
-      type: 'range',
-      minDate: new Date(2010, 0, 10),
-      maxDate: new Date(2010, 11, 10),
-      defaultDate: [new Date(2010, 3, 1), new Date(2010, 5, 1)],
-    },
-  });
-
-  Element.prototype.scrollIntoView = function () {
-    expect(this.parentNode).toEqual(
-      wrapper.findAll('.van-calendar__month').at(3).element
-    );
-    done();
-  };
-
-  wrapper.setProps({ value: true });
-
-  await later();
-});
-
 test('close event', () => {
  const wrapper = mount(Calendar, {
    propsData: {
--- a/src/calendar/test/prop.spec.js
+++ b/src/calendar/test/prop.spec.js
@ -197,6 +197,7 @@ test('first day of week', async () => {
    propsData: {
      poppable: false,
      defaultDate: new Date(2020, 7, 1),
+      minDate: new Date(2020, 7, 1),
      maxDate: new Date(2020, 7, 30),
      firstDayOfWeek: 2,
    },
@ -210,5 +211,5 @@ test('first day of week', async () => {
    '.van-calendar__month:first-of-type .van-calendar__day'
  );
  expect(day.text()).toEqual('1');
-  expect(day.attributes('style')).toContain(`margin-left: ${100 / 7}%`);
+  expect(day.attributes('style')).toContain(`margin-left: ${(100 * 4) / 7}%`);
 });
--- a/src/card/test/snapshots/demo.spec.js.snap
+++ b/src/card/test/snapshots/demo.spec.js.snap
@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
    <div class="van-card">
      <div class="van-card__header"><a class="van-card__thumb">
          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
        </a>
@ -29,7 +29,7 @@ exports[`renders demo correctly 1`] = `
    <div class="van-card">
      <div class="van-card__header"><a class="van-card__thumb">
          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-card__tag"><span class="van-tag van-tag--mark van-tag--danger">标签</span></div>
@ -54,7 +54,7 @@ exports[`renders demo correctly 1`] = `
    <div class="van-card">
      <div class="van-card__header"><a class="van-card__thumb">
          <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
        </a>
--- a/src/coupon-cell/index.tsx
+++ b/src/coupon-cell/index.tsx
@ -27,7 +27,7 @@ function formatValue(props: CouponCellProps) {

  if (coupon) {
    const value = coupon.value || coupon.denominations || 0;
-    return `-${currency}${(value / 100).toFixed(2)}`;
+    return `-${currency} ${(value / 100).toFixed(2)}`;
  }

  return coupons.length === 0 ? t('tips') : t('count', coupons.length);
--- a/src/coupon-list/test/snapshots/index.spec.js.snap
+++ b/src/coupon-list/test/snapshots/index.spec.js.snap
@ -49,7 +49,7 @@ exports[`render coupon cell 1`] = `
 exports[`render coupon cell with coupon 1`] = `
 <div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
  <div class="van-cell__title"><span>优惠券</span></div>
-  <div class="van-cell__value van-coupon-cell--selected"><span>-¥1.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+  <div class="van-cell__value van-coupon-cell--selected"><span>-¥ 1.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
    <!----></i>
 </div>
 `;
--- a/src/dialog/Dialog.js
+++ b/src/dialog/Dialog.js
@ -2,6 +2,8 @@ import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import Popup from '../popup';
 import Button from '../button';
+import GoodsAction from '../goods-action';
+import GoodsActionButton from '../goods-action-button';

 const [createComponent, bem, t] = createNamespace('dialog');

@ -9,6 +11,7 @@ export default createComponent({
  props: {
    show: Boolean,
    title: String,
+    theme: String,
    width: [Number, String],
    message: String,
    className: null,
@ -102,11 +105,44 @@ export default createComponent({
      this.$emit('closed');
    },

+    genRoundButtons() {
+      return (
+        <GoodsAction class={bem('footer')}>
+          {this.showCancelButton && (
+            <GoodsActionButton
+              size="large"
+              type="warning"
+              text={this.cancelButtonText || t('cancel')}
+              class={bem('cancel')}
+              color={this.cancelButtonColor}
+              loading={this.loading.cancel}
+              onClick={() => {
+                this.handleAction('cancel');
+              }}
+            />
+          )}
+          {this.showConfirmButton && (
+            <GoodsActionButton
+              size="large"
+              type="danger"
+              text={this.confirmButtonText || t('confirm')}
+              class={bem('confirm')}
+              color={this.confirmButtonColor}
+              loading={this.loading.confirm}
+              onClick={() => {
+                this.handleAction('confirm');
+              }}
+            />
+          )}
+        </GoodsAction>
+      );
+    },
+
    genButtons() {
      const multiple = this.showCancelButton && this.showConfirmButton;

      return (
-        <div class={[BORDER_TOP, bem('footer', { buttons: multiple })]}>
+        <div class={[BORDER_TOP, bem('footer')]}>
          {this.showCancelButton && (
            <Button
              size="large"
@ -174,7 +210,7 @@ export default createComponent({
      <Popup
        show={this.show}
        role="dialog"
-        class={[bem(), this.className]}
+        class={[bem([this.theme]), this.className]}
        style={{ width: addUnit(this.width) }}
        transition={this.transition}
        lazyRender={this.lazyRender}
@ -184,7 +220,9 @@ export default createComponent({
      >
        {Title}
        {this.genContent(title)}
-        {this.genButtons()}
+        {this.theme === 'round-button'
+          ? this.genRoundButtons()
+          : this.genButtons()}
      </Popup>
    );
  },
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@ -30,6 +30,27 @@ Dialog.alert({
 });
 ```

+### Round Button Style
+
+Use round button style.
+
+```js
+Dialog.alert({
+  title: 'Title',
+  message: 'Content',
+  theme: 'round-button',
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: 'Content',
+  theme: 'round-button',
+}).then(() => {
+  // on close
+});
+```
+
 ### Confirm dialog

 Used to confirm some messages, including a confirm button and a cancel button.
@ -120,13 +141,14 @@ export default {
 | width `v2.2.7` | Width | _number \| string_ | `320px` |
 | message | Message | _string_ | - |
 | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
+| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
 | className | Custom className | _any_ | - |
 | showConfirmButton | Whether to show confirm button | _boolean_ | `true` |
 | showCancelButton | Whether to show cancel button | _boolean_ | `false` |
 | cancelButtonText | Cancel button text | _string_ | `Cancel` |
 | cancelButtonColor | Cancel button color | _string_ | `black` |
 | confirmButtonText | Confirm button text | _string_ | `Confirm` |
-| confirmButtonColor | Confirm button color | _string_ | `#1989fa` |
+| confirmButtonColor | Confirm button color | _string_ | `#ee0a24` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlayClass `v2.2.7` | Custom overlay class | _string_ | - |
 | overlayStyle `v2.2.7` | Custom overlay style | _object_ | - |
@ -147,12 +169,13 @@ export default {
 | width `v2.2.7` | Width | _number \| string_ | `320px` |
 | message | Message | _string_ | - |
 | message-align | Message align，can be set to `left` `right` | _string_ | `center` |
+| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |
 | show-confirm-button | Whether to show confirm button | _boolean_ | `true` |
 | show-cancel-button | Whether to show cancel button | _boolean_ | `false` |
 | cancel-button-text | Cancel button text | _string_ | `Cancel` |
 | cancel-button-color | Cancel button color | _string_ | `black` |
 | confirm-button-text | Confirm button text | _string_ | `Confirm` |
-| confirm-button-color | Confirm button color | _string_ | `#1989fa` |
+| confirm-button-color | Confirm button color | _string_ | `#ee0a24` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | overlay-class `v2.2.7` | Custom overlay class | _string_ | - |
 | overlay-style `v2.2.7` | Custom overlay style | _object_ | - |
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@ -0,0 +1,243 @@
+# Dialog 弹出框
+
+### 介绍
+
+弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。
+
+弹出框组件支持函数调用和组件调用两种方式。
+
+### 函数调用
+
+Dialog 是一个函数，调用后会直接在页面中弹出相应的模态框。
+
+```js
+import { Dialog } from 'vant';
+
+Dialog({ message: '提示' });
+```
+
+### 组件调用
+
+通过组件调用 Dialog 时，可以通过下面的方式进行注册：
+
+```js
+import Vue from 'vue';
+import { Dialog } from 'vant';
+
+// 全局注册
+Vue.use(Dialog);
+
+// 局部注册
+export default {
+  components: {
+    [Dialog.Component.name]: Dialog.Component,
+  },
+};
+```
+
+## 代码演示
+
+### 消息提示
+
+用于提示一些消息，只包含一个确认按钮。
+
+```js
+Dialog.alert({
+  title: '标题',
+  message: '弹窗内容',
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: '弹窗内容',
+}).then(() => {
+  // on close
+});
+```
+
+### 圆角按钮风格
+
+将 theme 选项设置为 `round-button` 可以展示圆角按钮风格的弹窗，该选项从 2.10.0 版本开始支持。
+
+```js
+Dialog.alert({
+  title: '标题',
+  message: '弹窗内容',
+  theme: 'round-button',
+}).then(() => {
+  // on close
+});
+
+Dialog.alert({
+  message: '弹窗内容',
+  theme: 'round-button',
+}).then(() => {
+  // on close
+});
+```
+
+### 消息确认
+
+用于确认消息，包含取消和确认按钮。
+
+```js
+Dialog.confirm({
+  title: '标题',
+  message: '弹窗内容',
+})
+  .then(() => {
+    // on confirm
+  })
+  .catch(() => {
+    // on cancel
+  });
+```
+
+### 异步关闭
+
+通过 `beforeClose` 属性可以传入一个回调函数，在弹窗关闭前进行特定操作。
+
+```js
+function beforeClose(action, done) {
+  if (action === 'confirm') {
+    setTimeout(done, 1000);
+  } else {
+    done();
+  }
+}
+
+Dialog.confirm({
+  title: '标题',
+  message: '弹窗内容',
+  beforeClose,
+});
+```
+
+### 全局方法
+
+引入 Dialog 组件后，会自动在 Vue 的 prototype 上挂载 `$dialog` 方法，在所有组件内部都可以直接调用此方法。
+
+```js
+export default {
+  mounted() {
+    this.$dialog.alert({
+      message: '弹窗内容',
+    });
+  },
+};
+```
+
+### 组件调用
+
+如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。
+
+```html
+<van-dialog v-model="show" title="标题" show-cancel-button>
+  <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
+</van-dialog>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+    };
+  },
+};
+```
+
+## API
+
+### 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| Dialog | 展示弹窗 | `options` | `Promise` |
+| Dialog.alert | 展示消息提示弹窗 | `options` | `Promise` |
+| Dialog.confirm | 展示消息确认弹窗 | `options` | `Promise` |
+| Dialog.setDefaultOptions | 修改默认配置，对所有 Dialog 生效 | `options` | `void` |
+| Dialog.resetDefaultOptions | 重置默认配置，对所有 Dialog 生效 | - | `void` |
+| Dialog.close | 关闭弹窗 | - | `void` |
+
+### Options
+
+通过函数调用 `Dialog` 时，支持传入以下选项：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 标题 | _string_ | - |
+| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
+| message | 文本内容，支持通过`\n`换行 | _string_ | - |
+| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
+| theme | 样式风格，可选值为`round` | _string_ | `default` |
+| className | 自定义类名 | _any_ | - |
+| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` |
+| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` |
+| confirmButtonText | 确认按钮文案 | _string_ | `确认` |
+| confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` |
+| cancelButtonText | 取消按钮文案 | _string_ | `取消` |
+| cancelButtonColor | 取消按钮颜色 | _string_ | `black` |
+| overlay | 是否展示遮罩层 | _boolean_ | `true` |
+| overlayClass `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
+| overlayStyle `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
+| closeOnPopstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
+| closeOnClickOverlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
+| lockScroll | 是否锁定背景滚动 | _boolean_ | `true` |
+| allowHtml `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
+| beforeClose | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
+| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
+| getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
+
+### Props
+
+通过组件调用 `Dialog` 时，支持以下 Props：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 是否显示弹窗 | _boolean_ | - |
+| title | 标题 | _string_ | - |
+| width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
+| message | 文本内容，支持通过`\n`换行 | _string_ | - |
+| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
+| theme | 样式风格，可选值为`round` | _string_ | `default` |
+| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
+| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
+| confirm-button-text | 确认按钮文案 | _string_ | `确认` |
+| confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` |
+| cancel-button-text | 取消按钮文案 | _string_ | `取消` |
+| cancel-button-color | 取消按钮颜色 | _string_ | `black` |
+| overlay | 是否展示遮罩层 | _boolean_ | `true` |
+| overlay-class `v2.2.7` | 自定义遮罩层类名 | _string_ | - |
+| overlay-style `v2.2.7` | 自定义遮罩层样式 | _object_ | - |
+| close-on-popstate `v2.0.5` | 是否在页面回退时自动关闭 | _boolean_ | `true` |
+| close-on-click-overlay | 是否在点击遮罩层后关闭弹窗 | _boolean_ | `false` |
+| lazy-render | 是否在显示弹层时才渲染节点 | _boolean_ | `true` |
+| lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
+| allow-html `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
+| before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
+| transition `v2.2.6` | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
+| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
+
+### Events
+
+通过组件调用 `Dialog` 时，支持以下事件：
+
+| 事件    | 说明                     | 回调参数 |
+| ------- | ------------------------ | -------- |
+| confirm | 点击确认按钮时触发       | -        |
+| cancel  | 点击取消按钮时触发       | -        |
+| open    | 打开弹窗时触发           | -        |
+| close   | 关闭弹窗时触发           | -        |
+| opened  | 打开弹窗且动画结束后触发 | -        |
+| closed  | 关闭弹窗且动画结束后触发 | -        |
+
+### Slots
+
+通过组件调用 `Dialog` 时，支持以下插槽：
+
+| 名称    | 说明       |
+| ------- | ---------- |
+| default | 自定义内容 |
+| title   | 自定义标题 |
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@ -9,6 +9,15 @@
      </van-button>
    </demo-block>

+    <demo-block :title="t('roundButton')">
+      <van-button type="primary" @click="onClickRound">
+        {{ t('alert1') }}
+      </van-button>
+      <van-button type="primary" @click="onClickRound2">
+        {{ t('alert2') }}
+      </van-button>
+    </demo-block>
+
    <demo-block :title="t('confirm')">
      <van-button type="primary" @click="onClickConfirm">
        {{ t('confirm') }}
@ -45,6 +54,7 @@ export default {
      alert2: '提示弹窗（无标题）',
      confirm: '确认弹窗',
      asyncClose: '异步关闭',
+      roundButton: '圆角按钮样式',
      componentCall: '组件调用',
      content: '代码是写出来给人看的，附带能在机器上运行',
    },
@ -53,6 +63,7 @@ export default {
      alert2: 'Alert without title',
      confirm: 'Confirm dialog',
      asyncClose: 'Async Close',
+      roundButton: 'Round Button Style',
      componentCall: 'Component Call',
    },
  },
@ -79,6 +90,21 @@ export default {
      });
    },

+    onClickRound() {
+      this.$dialog.alert({
+        theme: 'round-button',
+        title: this.t('title'),
+        message: this.t('content'),
+      });
+    },
+
+    onClickRound2() {
+      this.$dialog.alert({
+        theme: 'round-button',
+        message: this.t('content'),
+      });
+    },
+
    onClickConfirm() {
      this.$dialog.confirm({
        title: this.t('title'),
--- a/src/dialog/index.js
+++ b/src/dialog/index.js
@ -66,6 +66,7 @@ function Dialog(options) {
 Dialog.defaultOptions = {
  title: '',
  width: '',
+  theme: null,
  message: '',
  overlay: true,
  callback: null,
--- a/src/dialog/index.less
+++ b/src/dialog/index.less
@ -55,19 +55,15 @@
  }

  &__footer {
+    display: flex;
    overflow: hidden;
    user-select: none;
-
-    &--buttons {
-      display: flex;
-
-      .van-button {
-        flex: 1;
-      }
-    }
  }

-  .van-button {
+  &__confirm,
+  &__cancel {
+    flex: 1;
+    margin: 0;
    border: 0;
  }

@ -78,6 +74,23 @@
    }
  }

+  &--round-button {
+    .van-dialog__footer {
+      position: relative;
+      height: auto;
+      padding: @padding-xs @padding-lg @padding-md;
+    }
+
+    .van-dialog__message {
+      padding-bottom: @padding-md;
+      color: @text-color;
+    }
+
+    .van-dialog__confirm {
+      color: @white;
+    }
+  }
+
  &-bounce-enter-from {
    transform: translate3d(-50%, -50%, 0) scale(0.7);
    opacity: 0;
--- a/src/dialog/test/snapshots/demo.spec.js.snap
+++ b/src/dialog/test/snapshots/demo.spec.js.snap
@ -11,6 +11,15 @@ exports[`renders demo correctly 1`] = `
      提示弹窗（无标题）
    </span></div>
    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
+      提示弹窗
+    </span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">
+      提示弹窗（无标题）
+    </span></div>
+    </button></div>
  <div><button class="van-button van-button--primary van-button--normal">
      <div class="van-button__content"><span class="van-button__text">
      确认弹窗
@ -29,7 +38,7 @@ exports[`renders demo correctly 1`] = `
    <div role="dialog" aria-labelledby="标题" class="van-dialog" style="display: none;" name="van-dialog-bounce">
      <div class="van-dialog__header">标题</div>
      <div class="van-dialog__content"><img src="https://img.yzcdn.cn/vant/apple-3.jpg"></div>
-      <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
+      <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
          <div class="van-button__content"><span class="van-button__text">取消</span></div>
        </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
          <div class="van-button__content"><span class="van-button__text">确认弹窗</span></div>
--- a/src/dialog/test/snapshots/index.spec.js.snap
+++ b/src/dialog/test/snapshots/index.spec.js.snap
@ -4,7 +4,7 @@ exports[`allow-html prop 1`] = `<div class="van-dialog__message">&lt;span&gt;tex

 exports[`button color 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel" style="color: white;">
      <div class="van-button__content"><span class="van-button__text">取消</span></div>
    </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" style="color: red;">
      <div class="van-button__content"><span class="van-button__text">确认</span></div>
@ -14,7 +14,7 @@ exports[`button color 1`] = `

 exports[`button text 1`] = `
 <div role="dialog" class="van-dialog" name="van-dialog-bounce">
-  <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons"><button class="van-button van-button--default van-button--large van-dialog__cancel">
+  <div class="van-hairline--top van-dialog__footer"><button class="van-button van-button--default van-button--large van-dialog__cancel">
      <div class="van-button__content"><span class="van-button__text">Custom cancel</span></div>
    </button><button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
      <div class="van-button__content"><span class="van-button__text">Custom confirm</span></div>
--- a/src/dropdown-menu/README.md
+++ b/src/dropdown-menu/README.md
@ -48,8 +48,16 @@ export default {
 <van-dropdown-menu>
  <van-dropdown-item v-model="value" :options="option" />
  <van-dropdown-item title="Title" ref="item">
-    <van-switch-cell v-model="switch1" title="Title" />
-    <van-switch-cell v-model="switch2" title="Title" />
+    <van-cell center title="Title">
+      <template #right-icon>
+        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="Title">
+      <template #right-icon>
+        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round @click="onConfirm">
        Confirm
@ -86,7 +94,7 @@ export default {
 Use `active-color` prop to custom active color of the title and options

 ```html
-<van-dropdown-menu active-color="#ee0a24">
+<van-dropdown-menu active-color="#1989fa">
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
--- a/src/dropdown-menu/README.zh-CN.md
+++ b/src/dropdown-menu/README.zh-CN.md
@ -50,8 +50,16 @@ export default {
 <van-dropdown-menu>
  <van-dropdown-item v-model="value" :options="option" />
  <van-dropdown-item title="筛选" ref="item">
-    <van-switch-cell v-model="switch1" title="包邮" />
-    <van-switch-cell v-model="switch2" title="团购" />
+    <van-cell center title="包邮">
+      <template #right-icon>
+        <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
+    <van-cell center title="团购">
+      <template #right-icon>
+        <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
+      </template>
+    </van-cell>
    <div style="padding: 5px 16px;">
      <van-button type="danger" block round @click="onConfirm">
        确认
@ -88,7 +96,7 @@ export default {
 通过`active-color`属性可以自定义菜单标题和选项的选中态颜色

 ```html
-<van-dropdown-menu active-color="#ee0a24">
+<van-dropdown-menu active-color="#1989fa">
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
 </van-dropdown-menu>
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@ -11,8 +11,16 @@
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item :title="t('itemTitle')" ref="item">
-          <van-switch-cell v-model="switch1" :title="t('switchTitle1')" />
-          <van-switch-cell v-model="switch2" :title="t('switchTitle2')" />
+          <van-cell center :title="t('switchTitle1')">
+            <template #right-icon>
+              <van-switch v-model="switch1" size="24" :active-color="RED" />
+            </template>
+          </van-cell>
+          <van-cell center :title="t('switchTitle2')">
+            <template #right-icon>
+              <van-switch v-model="switch2" size="24" :active-color="RED" />
+            </template>
+          </van-cell>
          <div style="padding: 5px 16px;">
            <van-button
              type="danger"
@ -29,7 +37,7 @@
    </demo-block>

    <demo-block :title="t('customActiveColor')">
-      <van-dropdown-menu active-color="#ee0a24">
+      <van-dropdown-menu :active-color="BLUE">
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
      </van-dropdown-menu>
@ -52,6 +60,8 @@
 </template>

 <script>
+import { RED, BLUE } from '../../utils/constant';
+
 export default {
  i18n: {
    'zh-CN': {
@ -96,6 +106,8 @@ export default {

  data() {
    return {
+      RED,
+      BLUE,
      switch1: true,
      switch2: false,
      value1: 0,
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@ -8,7 +8,7 @@
    display: flex;
    height: @dropdown-menu-height;
    background-color: @dropdown-menu-background-color;
-    box-shadow: 0 2px 12px fade(@gray-7, 8);
+    box-shadow: @dropdown-menu-box-shadow;

    &--opened {
      z-index: @dropdown-item-z-index + 1;
--- a/src/empty/test/snapshots/demo.spec.js.snap
+++ b/src/empty/test/snapshots/demo.spec.js.snap
@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">通用错误</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">网络错误</span></div>
--- a/src/form/test/snapshots/demo.spec.js.snap
+++ b/src/form/test/snapshots/demo.spec.js.snap
@ -175,7 +175,7 @@ exports[`renders demo correctly 1`] = `
                <div class="van-uploader__wrapper">
                  <div class="van-uploader__preview">
                    <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-                      <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                      <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                          <!----></i></div>
                    </div>
                    <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
--- a/src/goods-action-button/index.js
+++ b/src/goods-action-button/index.js
@ -47,7 +47,6 @@ export default createComponent({
          },
          this.type,
        ])}
-        square
        size="large"
        type={this.type}
        icon={this.icon}
--- a/src/goods-action-button/index.less
+++ b/src/goods-action-button/index.less
@ -6,6 +6,7 @@
  font-weight: @font-weight-bold;
  font-size: @font-size-md;
  border: none;
+  border-radius: 0;

  &--first {
    margin-left: 5px;
--- a/src/goods-action/test/snapshots/demo.spec.js.snap
+++ b/src/goods-action/test/snapshots/demo.spec.js.snap
@ -18,7 +18,7 @@ exports[`renders demo correctly 1`] = `
        <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
          <!---->
        </div>店铺
-      </div> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--last van-goods-action-button--danger">
+      </div> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last van-goods-action-button--danger">
        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
      </button>
    </div>
@ -39,9 +39,9 @@ exports[`renders demo correctly 1`] = `
        <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
          <div class="van-info">12</div>
        </div>店铺
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
+      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
+      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
      </button>
    </div>
@ -62,9 +62,9 @@ exports[`renders demo correctly 1`] = `
        <div class="van-icon van-icon-star van-goods-action-icon__icon" style="color: rgb(255, 80, 0);">
          <!---->
        </div>已收藏
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
+      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning">
        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
+      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger">
        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
      </button>
    </div>
@ -80,9 +80,9 @@ exports[`renders demo correctly 1`] = `
        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
          <!---->
        </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
+      </div> <button class="van-button van-button--warning van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--warning" style="color: rgb(255, 255, 255); background: rgb(190, 153, 255); border-color: #be99ff;">
        <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
-      </button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
+      </button> <button class="van-button van-button--danger van-button--large van-goods-action-button van-goods-action-button--last van-goods-action-button--danger" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
        <div class="van-button__content"><span class="van-button__text">立即购买</span></div>
      </button>
    </div>
--- a/src/goods-action/test/snapshots/index.spec.js.snap
+++ b/src/goods-action/test/snapshots/index.spec.js.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Button render default slot 1`] = `
-<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button van-goods-action-button--first van-goods-action-button--last">
+<button class="van-button van-button--default van-button--large van-goods-action-button van-goods-action-button--first van-goods-action-button--last">
  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
 </button>
 `;
--- a/src/grid/test/snapshots/demo.spec.js.snap
+++ b/src/grid/test/snapshots/demo.spec.js.snap
@ -55,7 +55,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
        <div class="van-grid-item__content van-grid-item__content--center">
          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img" style="object-fit: contain;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
        </div>
@ -63,7 +63,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
        <div class="van-grid-item__content van-grid-item__content--center">
          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-2.jpg" class="van-image__img" style="object-fit: contain;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
        </div>
@ -71,7 +71,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
        <div class="van-grid-item__content van-grid-item__content--center">
          <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-3.jpg" class="van-image__img" style="object-fit: contain;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
        </div>
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@ -1,6 +1,6 @@
 <template>
  <demo-section>
-    <van-tabs v-model="tab" sticky :color="BLUE">
+    <van-tabs v-model="tab" sticky>
      <van-tab :title="t('demo')">
        <demo-block :title="t('basicUsage')">
          <van-col span="6" @click="copy(demoIcon)">
--- a/src/icon/index.less
+++ b/src/icon/index.less
@ -3,7 +3,6 @@

 .van-icon {
  &__image {
-    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
--- a/src/image/README.md
+++ b/src/image/README.md
@ -75,8 +75,8 @@ Vue.use(Lazyload);
 | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
 | show-error `v2.0.9` | Whether to show error placeholder | _boolean_ | `true` |
 | show-loading `v2.0.9` | Whether to show loading placeholder | _boolean_ | `true` |
-| error-icon `v2.4.2` | Error icon | _string_ | `warning-o` |
-| loading-icon `v2.4.2` | Loading icon | _string_ | `photo-o` |
+| error-icon `v2.4.2` | Error icon | _string_ | `photo-fail` |
+| loading-icon `v2.4.2` | Loading icon | _string_ | `photo` |

 ### fit optional value

--- a/src/image/README.zh-CN.md
+++ b/src/image/README.zh-CN.md
@ -107,8 +107,8 @@ Vue.use(Lazyload);
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
 | show-error `v2.0.9` | 是否展示图片加载失败提示 | _boolean_ | `true` |
 | show-loading `v2.0.9` | 是否展示图片加载中提示 | _boolean_ | `true` |
-| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `warning-o` |
-| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-o` |
+| error-icon `v2.4.2` | 失败时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo-fail` |
+| loading-icon `v2.4.2` | 加载时提示的[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `photo` |

 ### 图片填充模式 

--- a/src/image/index.js
+++ b/src/image/index.js
@ -23,11 +23,11 @@ export default createComponent({
    },
    errorIcon: {
      type: String,
-      default: 'warning-o',
+      default: 'photo-fail',
    },
    loadingIcon: {
      type: String,
-      default: 'photo-o',
+      default: 'photo',
    },
  },

--- a/src/image/index.less
+++ b/src/image/index.less
@ -36,10 +36,12 @@
  }

  &__loading-icon {
+    color: @image-loading-icon-color;
    font-size: @image-loading-icon-size;
  }

  &__error-icon {
+    color: @image-error-icon-color;
    font-size: @image-error-icon-size;
  }
 }
--- a/src/image/test/snapshots/demo.spec.js.snap
+++ b/src/image/test/snapshots/demo.spec.js.snap
@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
  <div>
    <div class="van-row">
      <div class="van-image" style="width: 100px; height: 100px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
    </div>
@ -14,35 +14,35 @@ exports[`renders demo correctly 1`] = `
    <div class="van-row">
      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">contain</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">cover</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">fill</div>
      </div>
      <div class="van-col van-col--8" style="padding-right: 10px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">none</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 10px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">scale-down</div>
@ -53,35 +53,35 @@ exports[`renders demo correctly 1`] = `
    <div class="van-row">
      <div class="van-col van-col--8" style="padding-right: 13.333333333333334px;">
        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">contain</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;">
        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">cover</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 13.333333333333332px;">
        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">fill</div>
      </div>
      <div class="van-col van-col--8" style="padding-right: 10px;">
        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">none</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 10px;">
        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">scale-down</div>
@ -92,7 +92,7 @@ exports[`renders demo correctly 1`] = `
    <div class="van-row">
      <div class="van-col van-col--8" style="padding-right: 10px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">默认提示</div>
@ -111,14 +111,14 @@ exports[`renders demo correctly 1`] = `
    <div class="van-row">
      <div class="van-col van-col--8" style="padding-right: 10px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">默认提示</div>
      </div>
      <div class="van-col van-col--8" style="padding-left: 10px;">
        <div class="van-image" style="width: 100%; height: 27vw;"><img src="x" class="van-image__img">
-          <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
              <!----></i></div>
        </div>
        <div class="text">自定义提示</div>
--- a/src/image/test/snapshots/index.spec.js.snap
+++ b/src/image/test/snapshots/index.spec.js.snap
@ -2,7 +2,7 @@

 exports[`default slot 1`] = `
 <div class="van-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
      <!----></i></div>Custom Default
 </div>
 `;
@ -16,14 +16,14 @@ exports[`error-icon prop 1`] = `

 exports[`lazy load 1`] = `
 <div class="van-image"><img class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
      <!----></i></div>
 </div>
 `;

 exports[`lazy-load error event 1`] = `
 <div class="van-image">
-  <div class="van-image__error"><i class="van-icon van-icon-warning-o van-image__error-icon">
+  <div class="van-image__error"><i class="van-icon van-icon-photo-fail van-image__error-icon">
      <!----></i></div>
 </div>
 `;
@ -34,7 +34,7 @@ exports[`load event 1`] = `<div class="van-image"><img src="https://img.yzcdn.cn

 exports[`load event 2`] = `
 <div class="van-image"><img src="" class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
      <!----></i></div>
 </div>
 `;
@ -48,7 +48,7 @@ exports[`loading-icon prop 1`] = `

 exports[`radius prop 1`] = `
 <div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
-  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
      <!----></i></div>
 </div>
 `;
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@ -1,6 +1,6 @@
 <template>
  <demo-section>
-    <van-tabs v-model="activeTab" :color="BLUE">
+    <van-tabs v-model="activeTab">
      <van-tab :title="t('basicUsage')">
        <van-index-bar>
          <div v-for="index in indexList" :key="index">
@ -29,8 +29,6 @@
 </template>

 <script>
-import { BLUE } from '../../utils/constant';
-
 export default {
  i18n: {
    'zh-CN': {
@ -46,12 +44,12 @@ export default {
  data() {
    const indexList = [];
    const charCodeOfA = 'A'.charCodeAt(0);
+
    for (let i = 0; i < 26; i++) {
      indexList.push(String.fromCharCode(charCodeOfA + i));
    }

    return {
-      BLUE,
      activeTab: 0,
      indexList,
      customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
--- a/src/index-bar/test/snapshots/demo.spec.js.snap
+++ b/src/index-bar/test/snapshots/demo.spec.js.snap
@ -3,11 +3,11 @@
 exports[`renders demo correctly 1`] = `
 <div>
  <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #1989fa;">
+    <div class="van-tabs__wrap">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">自定义索引列表</span></div>
-        <div class="van-tabs__line" style="background-color: rgb(25, 137, 250); width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
      </div>
    </div>
    <div class="van-tabs__content">
--- a/src/info/index.less
+++ b/src/info/index.less
@ -10,8 +10,7 @@
  color: @info-color;
  font-weight: @info-font-weight;
  font-size: @info-font-size;
-  font-family: @info-font-family;
-  line-height: @info-size - @info-border-width * 2;
+  line-height: 1.2;
  text-align: center;
  background-color: @info-background-color;
  border: @info-border-width solid @white;
--- a/src/list/test/snapshots/demo.spec.js.snap
+++ b/src/list/test/snapshots/demo.spec.js.snap
@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
  <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__wrap">
      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">错误提示</span></div>
--- a/src/mixins/popup/index.js
+++ b/src/mixins/popup/index.js
@ -87,6 +87,10 @@ export function PopupMixin(options = {}) {
    beforeDestroy() {
      this.removeLock();

+      if (this.opened) {
+        this.removeLock();
+      }
+
      if (this.getContainer) {
        removeNode(this.$refs.root);
      }
--- a/src/number-keyboard/index.less
+++ b/src/number-keyboard/index.less
@ -6,8 +6,7 @@
  left: 0;
  z-index: @number-keyboard-z-index;
  width: 100%;
-  padding-bottom: constant(safe-area-inset-bottom);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 22px;
  background-color: @number-keyboard-background-color;
  user-select: none;

@ -87,7 +86,14 @@
  cursor: pointer;

  &--large {
-    height: 100%;
+    // height: 100% can't fill flex parent on legacy safari
+    // see: https://stackoverflow.com/questions/33636796
+    position: absolute;
+    top: 0;
+    right: 6px;
+    bottom: 6px;
+    left: 0;
+    height: auto;
  }

  &--blue,
@ -109,6 +115,7 @@
  }

  &__wrapper {
+    position: relative;
    flex: 1;
    flex-basis: 33%;
    box-sizing: border-box;
--- a/src/picker/index.js
+++ b/src/picker/index.js
@ -335,7 +335,9 @@ export default createComponent({
          allowHtml={this.allowHtml}
          className={item.className}
          itemHeight={this.itemPxHeight}
-          defaultIndex={item.defaultIndex || +this.defaultIndex}
+          defaultIndex={
+            isDef(item.defaultIndex) ? item.defaultIndex : +this.defaultIndex
+          }
          swipeDuration={this.swipeDuration}
          visibleItemCount={this.visibleItemCount}
          initialOptions={item.values}
--- a/src/pull-refresh/test/snapshots/demo.spec.js.snap
+++ b/src/pull-refresh/test/snapshots/demo.spec.js.snap
@ -3,7 +3,7 @@
 exports[`renders demo correctly 1`] = `
 <div>
  <div class="van-tabs van-tabs--line">
-    <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__wrap">
      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">基础用法</span></div>
        <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">成功提示</span></div>
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@ -131,6 +131,7 @@ export default {
 | name | Option name | _string_ |
 | description `v2.8.5` | Option description | _string_ |
 | icon | Option icon，can be set to `wechat` `weibo` `qq` `link` `qrcode` `poster` or image URL | _string_ |
+| className | Option className is used to set the class props to the share item | _string_ |

 ### Events

--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@ -179,6 +179,7 @@ export default {
 | name | 分享渠道名称 | _string_ |
 | description `v2.8.5` | 分享选项描述 | _string_ |
 | icon | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`，支持传入图片 URL | _string_ |
+| className | 分享选项类名 | _string_ |

 ### Events

--- a/src/share-sheet/index.js
+++ b/src/share-sheet/index.js
@ -90,7 +90,7 @@ export default createComponent({
            <div
              role="button"
              tabindex="0"
-              class={bem('option')}
+              class={[bem('option'), option.className]}
              onClick={() => {
                this.onSelect(option, index);
              }}
--- a/src/share-sheet/test/index.spec.js
+++ b/src/share-sheet/test/index.spec.js
@ -29,6 +29,19 @@ test('description prop', () => {
  expect(wrapper.contains('.van-share-sheet__description')).toBeFalsy();
 });

+test('option className', () => {
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+      options: [{ name: 'Link', icon: 'link', className: 'foo' }],
+    },
+  });
+
+  const option = wrapper.find('.van-share-sheet__option').element;
+
+  expect(option.className.includes('foo')).toBeTruthy();
+});
+
 test('select event', () => {
  const wrapper = mount(ShareSheet, {
    propsData: {
--- a/src/sku/components/SkuDateTimeField.js
+++ b/src/sku/components/SkuDateTimeField.js
@ -27,6 +27,7 @@ export default createComponent({
    return {
      showDatePicker: false,
      currentDate: this.type === 'time' ? '' : new Date(),
+      minDate: new Date(new Date().getFullYear() - 60, 0, 1),
    };
  },

@ -94,6 +95,7 @@ export default createComponent({
            type={this.type}
            title={this.title}
            value={this.currentDate}
+            minDate={this.minDate}
            formatter={this.formatter}
            onCancel={this.onCancel}
            onConfirm={this.onConfirm}
--- a/src/sku/index.less
+++ b/src/sku/index.less
@ -30,6 +30,7 @@
    margin: 0 @padding-md;

    &__img-wrap {
+      flex-shrink: 0;
      width: 96px;
      height: 96px;
      margin: @padding-sm @padding-sm @padding-sm 0;
@ -65,6 +66,8 @@
  }

  &__goods-price {
+    // for price align
+    margin-left: -2px;
    color: @red;
  }

--- a/src/stepper/index.js
+++ b/src/stepper/index.js
@ -273,7 +273,9 @@ export default createComponent({
  render() {
    const createListeners = (type) => ({
      on: {
-        click: () => {
+        click: (e) => {
+          // disable double tap scrolling on mobile safari
+          e.preventDefault();
          this.type = type;
          this.onChange();
        },
--- a/src/style/var.less
+++ b/src/style/var.less
@ -313,8 +313,8 @@
@dialog-message-line-height: @line-height-md;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-7;
-@dialog-has-title-message-padding-top: @padding-sm;
-@dialog-confirm-button-text-color: @blue;
+@dialog-has-title-message-padding-top: @padding-xs;
+@dialog-confirm-button-text-color: @red;

 // Divider
@divider-margin: @padding-md 0;
@ -329,6 +329,7 @@
 // DropdownMenu
@dropdown-menu-height: 48px;
@dropdown-menu-background-color: @white;
+@dropdown-menu-box-shadow: 0 2px 12px fade(@gray-7, 12);
@dropdown-menu-title-font-size: 15px;
@dropdown-menu-title-text-color: @text-color;
@dropdown-menu-title-active-text-color: @red;
@ -418,14 +419,15 @@
@info-background-color: @red;
@info-dot-color: @red;
@info-dot-size: 8px;
-@info-font-family: @price-integer-font-family;

 // Image
@image-placeholder-text-color: @gray-6;
@image-placeholder-font-size: @font-size-md;
@image-placeholder-background-color: @background-color;
-@image-loading-icon-size: 22px;
-@image-error-icon-size: 22px;
+@image-loading-icon-size: 32px;
+@image-loading-icon-color: @gray-4;
+@image-error-icon-size: 32px;
+@image-error-icon-color: @gray-4;

 // ImagePreview
@image-preview-index-text-color: @white;
@ -485,7 +487,7 @@

 // NumberKeyboard
@number-keyboard-background-color: @gray-2;
-@number-keyboard-key-height: 56px;
+@number-keyboard-key-height: 48px;
@number-keyboard-key-font-size: 28px;
@number-keyboard-key-active-color: @gray-3;
@number-keyboard-delete-font-size: @font-size-lg;
--- a/src/swipe-cell/test/snapshots/demo.spec.js.snap
+++ b/src/swipe-cell/test/snapshots/demo.spec.js.snap
@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
          <div class="van-card">
            <div class="van-card__header"><a class="van-card__thumb">
                <div class="van-image" style="width: 100%; height: 100%;"><img src="https://img.yzcdn.cn/vant/ipad.jpeg" class="van-image__img" style="object-fit: cover;">
-                  <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+                  <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                      <!----></i></div>
                </div>
              </a>
--- a/src/tab/README.md
+++ b/src/tab/README.md
@ -56,7 +56,7 @@ export default {

 ### Swipe Tabs

-By default more than 4 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.
+By default more than 5 tabs, you can scroll through the tabs. You can set `swipe-threshold` attribute to customize threshold number.

 ```html
 <van-tabs>
@ -227,14 +227,14 @@ export default {
 | line-width | Width of tab line | _number \| string_ | Width of active tab |
 | line-height | Height of tab line | _number \| string_ | `3px` |
 | animated | Whether to change tabs with animation | _boolean_ | `false` |
-| border | Whether to show border when `type="line"` | _boolean_ | `true` |
+| border | Whether to show border when `type="line"` | _boolean_ | `false` |
 | ellipsis | Whether to ellipsis too long title | _boolean_ | `true` |
 | sticky | Whether to use sticky mode | _boolean_ | `false` |
 | swipeable | Whether to switch tabs with swipe gestrue in the content | _boolean_ | `false` |
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy `v2.3.0` | Whether to use scrollspy mode | _boolean_ | `false` |
 | offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
-| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `4` | - |
+| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | - |
 | title-active-color | Title active color | _string_ | - |
 | title-inactive-color | Title inactive color | _string_ | - |
 | before-change `v2.9.3` | Callback function before changing tabs，return `false` to prevent change，support return Promise | _(name) => boolean \| Promise_ | - |
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@ -59,7 +59,7 @@ export default {

 ### 标签栏滚动

-标签数量超过 4 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。
+标签数量超过 5 个时，标签栏可以在水平方向上滚动，切换时会自动将当前标签居中。

 ```html
 <van-tabs>
@ -227,21 +227,21 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | v-model:active | 绑定当前选中标签的标识符 | _number \| string_ | `0` |
-| type | 样式风格类型，可选值为`card` | _string_ | `line` |
+| type | 样式风格类型，可选值为 `card` | _string_ | `line` |
 | color | 标签主题色 | _string_ | `#ee0a24` |
 | background | 标签栏背景色 | _string_ | `white` |
 | duration | 动画时间，单位秒 | _number \| string_ | `0.3` |
 | line-width | 底部条宽度，默认单位`px` | _number \| string_ | `auto` |
 | line-height | 底部条高度，默认单位`px` | _number \| string_ | `3px` |
 | animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` |
-| border | 是否显示标签栏外边框，仅在`type="line"`时有效 | _boolean_ | `true` |
+| border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
 | ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |
 | sticky | 是否使用粘性定位布局 | _boolean_ | `false` |
 | swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
 | lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
 | scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
 | offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
-| swipe-threshold | 滚动阈值，标签数量超过阈值时开始横向滚动 | _number \| string_ | `4` |
+| swipe-threshold | 滚动阈值，标签数量超过阈值时开始横向滚动 | _number \| string_ | `5` |
 | title-active-color | 标题选中态颜色 | _string_ | - |
 | title-inactive-color | 标题默认态颜色 | _string_ | - |
 | before-change `v2.9.3` | 切换标签前的回调函数，返回 `false` 可阻止切换，支持返回 Promise | _(name) => boolean \| Promise_ | - |
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@ -182,7 +182,7 @@ export default {
  }

  .van-tab__pane {
-    padding: 25px 20px;
+    padding: 24px 20px;
    background-color: @white;
  }

--- a/src/tab/test/snapshots/demo.spec.js.snap
+++ b/src/tab/test/snapshots/demo.spec.js.snap
@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -31,7 +31,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -52,16 +52,16 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
-        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-          <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
-          <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
+      <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+        <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text">标签 1</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 2</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 3</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 4</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 5</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
+          <div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
          <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
        </div>
      </div>
@ -95,7 +95,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -140,7 +140,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -161,7 +161,7 @@ exports[`renders demo correctly 1`] = `
    <div class="van-tabs van-tabs--line">
      <div>
        <div class="van-sticky">
-          <div class="van-tabs__wrap van-hairline--top-bottom">
+          <div class="van-tabs__wrap">
            <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
              <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -190,7 +190,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis"><i class="van-icon van-icon-more-o"><!----></i>标签  </span></div>
@ -209,7 +209,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -246,7 +246,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
@ -275,16 +275,16 @@ exports[`renders demo correctly 1`] = `
    <div class="van-tabs van-tabs--line">
      <div>
        <div class="van-sticky">
-          <div class="van-tabs__wrap van-tabs__wrap--scrollable van-hairline--top-bottom">
-            <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-              <div role="tab" aria-selected="true" class="van-tab van-tab--active" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 3</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 4</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 5</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 6</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 7</span></div>
-              <div role="tab" class="van-tab" style="flex-basis: 22%;"><span class="van-tab__text van-tab__text--ellipsis">标签 8</span></div>
+          <div class="van-tabs__wrap van-tabs__wrap--scrollable">
+            <div role="tablist" class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete">
+              <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text">标签 1</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 2</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 3</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 4</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 5</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 6</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 7</span></div>
+              <div role="tab" class="van-tab"><span class="van-tab__text">标签 8</span></div>
              <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
            </div>
          </div>
@ -320,7 +320,7 @@ exports[`renders demo correctly 1`] = `
  </div>
  <div>
    <div class="van-tabs van-tabs--line">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">标签 1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">标签 2</span></div>
--- a/src/tab/test/snapshots/index.spec.js.snap
+++ b/src/tab/test/snapshots/index.spec.js.snap
@ -15,7 +15,7 @@ exports[`change tabs data 1`] = `
 <div class="van-tabs van-tabs--line">
  <div>
    <div class="van-sticky">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -60,7 +60,7 @@ exports[`change tabs data 2`] = `

 exports[`click to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -82,7 +82,7 @@ exports[`click to switch tab 1`] = `

 exports[`click to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
      <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -102,7 +102,7 @@ exports[`click to switch tab 2`] = `

 exports[`dot prop 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
        <div class="van-info van-info--dot"></div>
@ -118,7 +118,7 @@ exports[`dot prop 1`] = `

 exports[`info prop 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
        <div class="van-info">10</div>
@ -136,7 +136,7 @@ exports[`lazy render 1`] = `
 <div class="van-tabs van-tabs--line">
  <div>
    <div class="van-sticky">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -162,7 +162,7 @@ exports[`lazy render 2`] = `
 <div class="van-tabs van-tabs--line">
  <div>
    <div class="van-sticky">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -182,7 +182,7 @@ exports[`lazy render 2`] = `

 exports[`name prop 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -206,7 +206,7 @@ exports[`render nav-left & nav-right slot 1`] = `
 <div class="van-tabs van-tabs--line">
  <div>
    <div class="van-sticky">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #ee0a24;">Nav Left<div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
          <div role="tab" class="van-tab van-tab--disabled"><span class="van-tab__text van-tab__text--ellipsis">title3</span></div>
@ -233,7 +233,7 @@ exports[`scrollspy prop 1`] = `
 <div class="van-tabs van-tabs--line">
  <div>
    <div class="van-sticky">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -255,7 +255,7 @@ exports[`scrollspy prop 2`] = `
 <div class="van-tabs van-tabs--line">
  <div>
    <div class="van-sticky">
-      <div class="van-tabs__wrap van-hairline--top-bottom">
+      <div class="van-tabs__wrap">
        <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
          <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -275,7 +275,7 @@ exports[`scrollspy prop 2`] = `

 exports[`swipe to switch tab 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -297,7 +297,7 @@ exports[`swipe to switch tab 1`] = `

 exports[`swipe to switch tab 2`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
@ -317,7 +317,7 @@ exports[`swipe to switch tab 2`] = `

 exports[`swipe to switch tab 3`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">title1</span></div>
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">title2</span></div>
--- a/src/tab/test/snapshots/insert.spec.js.snap
+++ b/src/tab/test/snapshots/insert.spec.js.snap
@ -2,7 +2,7 @@

 exports[`insert tab dynamically 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
@ -24,7 +24,7 @@ exports[`insert tab dynamically 1`] = `

 exports[`insert tab with child component 1`] = `
 <div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap van-hairline--top-bottom">
+  <div class="van-tabs__wrap">
    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
      <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text van-tab__text--ellipsis">1</span></div>
      <div role="tab" class="van-tab"><span class="van-tab__text van-tab__text--ellipsis">2</span></div>
--- a/src/tabs/Title.js
+++ b/src/tabs/Title.js
@ -11,7 +11,6 @@ export default createComponent({
    color: String,
    title: String,
    isActive: Boolean,
-    ellipsis: Boolean,
    disabled: Boolean,
    scrollable: Boolean,
    activeColor: String,
@ -44,10 +43,6 @@ export default createComponent({
        style.color = titleColor;
      }

-      if (this.scrollable && this.ellipsis) {
-        style.flexBasis = `${88 / this.swipeThreshold}%`;
-      }
-
      return style;
    },
  },
@ -59,7 +54,7 @@ export default createComponent({

    genText() {
      const Text = (
-        <span class={bem('text', { ellipsis: this.ellipsis })}>
+        <span class={bem('text', { ellipsis: !this.scrollable })}>
          {this.renderTitle ? this.renderTitle() : this.title}
        </span>
      );
@ -86,7 +81,6 @@ export default createComponent({
          bem({
            active: this.isActive,
            disabled: this.disabled,
-            complete: !this.ellipsis,
          }),
        ]}
        style={this.style}
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@ -42,6 +42,7 @@ export default createComponent({

  props: {
    color: String,
+    border: Boolean,
    sticky: Boolean,
    animated: Boolean,
    swipeable: Boolean,
@ -60,10 +61,6 @@ export default createComponent({
      type: [Number, String],
      default: 0,
    },
-    border: {
-      type: Boolean,
-      default: true,
-    },
    ellipsis: {
      type: Boolean,
      default: true,
@ -82,7 +79,7 @@ export default createComponent({
    },
    swipeThreshold: {
      type: [Number, String],
-      default: 4,
+      default: 5,
    },
  },

@ -367,7 +364,7 @@ export default createComponent({
  },

  render() {
-    const { type, ellipsis, animated, scrollable } = this;
+    const { type, animated, scrollable } = this;

    const Nav = this.children.map((item, index) => {
      return (
@ -382,7 +379,6 @@ export default createComponent({
          color={this.color}
          style={item.titleStyle}
          isActive={index === this.currentIndex}
-          ellipsis={ellipsis}
          disabled={item.disabled}
          scrollable={scrollable}
          renderTitle={item.$slots.title}
@ -407,7 +403,7 @@ export default createComponent({
        <div
          ref="nav"
          role="tablist"
-          class={bem('nav', [type])}
+          class={bem('nav', [type, { complete: this.scrollable }])}
          style={this.navStyle}
        >
          {this.$slots['nav-left']?.()}
--- a/src/tabs/index.less
+++ b/src/tabs/index.less
@ -53,11 +53,8 @@

    &--scrollable {
      .van-tab {
-        flex: 0 0 22%;
-
-        &--complete {
-          flex: 1 0 auto;
-        }
+        flex: 1 0 auto;
+        padding: 0 @padding-sm;
      }

      .van-tabs__nav {
@ -68,6 +65,11 @@
        &::-webkit-scrollbar {
          display: none;
        }
+
+        &--complete {
+          padding-right: 8px;
+          padding-left: 8px;
+        }
      }
    }
  }
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@ -36,9 +36,9 @@
    </demo-block>

    <demo-block :title="t('customSize')">
-      <van-tag type="success">{{ t('tag') }}</van-tag>
-      <van-tag type="success" size="medium">{{ t('tag') }}</van-tag>
-      <van-tag type="success" size="large">{{ t('tag') }}</van-tag>
+      <van-tag type="danger">{{ t('tag') }}</van-tag>
+      <van-tag type="danger" size="medium">{{ t('tag') }}</van-tag>
+      <van-tag type="danger" size="large">{{ t('tag') }}</van-tag>
    </demo-block>

    <demo-block :title="t('closeable')">
--- a/src/tag/test/snapshots/demo.spec.js.snap
+++ b/src/tag/test/snapshots/demo.spec.js.snap
@ -7,7 +7,7 @@ exports[`renders demo correctly 1`] = `
  <div><span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
  <div><span class="van-tag van-tag--plain van-tag--primary">标签</span> <span class="van-tag van-tag--plain van-tag--success">标签</span> <span class="van-tag van-tag--plain van-tag--danger">标签</span> <span class="van-tag van-tag--plain van-tag--warning">标签</span></div>
  <div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
-  <div><span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
+  <div><span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">标签</span> <span class="van-tag van-tag--large van-tag--danger">标签</span></div>
  <div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
      标签
    <i class="van-icon van-icon-cross van-tag__close"><!----></i></span> <span class="van-tag van-tag--medium van-tag--success" name="van-fade">
--- a/src/toast/README.md
+++ b/src/toast/README.md
@ -24,12 +24,6 @@ Toast.loading({
  message: 'Loading...',
  forbidClick: true,
 });
-
-Toast.loading({
-  message: 'Loading...',
-  forbidClick: true,
-  loadingType: 'spinner',
-});
 ```

 ### Success/Fail
@ -51,6 +45,12 @@ Toast({
  message: 'Custom Image',
  icon: 'https://img.yzcdn.cn/vant/logo.png',
 });
+
+Toast.loading({
+  message: 'Loading...',
+  forbidClick: true,
+  loadingType: 'spinner',
+});
 ```

 ### Update Message
--- a/src/toast/README.zh-CN.md
+++ b/src/toast/README.zh-CN.md
@ -23,20 +23,13 @@ Toast('提示内容');

 ### 加载提示

-使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击，通过`loadingType` 属性可以自定义加载图标类型。
+使用 `Toast.loading` 方法展示加载提示，通过 `forbidClick` 属性可以禁用背景点击。

 ```js
 Toast.loading({
  message: '加载中...',
  forbidClick: true,
 });
-
-// 自定义加载图标
-Toast.loading({
-  message: '加载中...',
-  forbidClick: true,
-  loadingType: 'spinner',
-});
 ```

 ### 成功/失败提示
@ -50,7 +43,7 @@ Toast.fail('失败文案');

 ### 自定义图标

-通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
+通过 `icon` 选项可以自定义图标，支持传入[图标名称](#/zh-CN/icon)或图片链接，通过`loadingType` 属性可以自定义加载图标类型。

 ```js
 Toast({
@ -59,9 +52,16 @@ Toast({
 });

 Toast({
-  message: '展示图片',
+  message: '自定义图片',
  icon: 'https://img.yzcdn.cn/vant/logo.png',
 });
+
+// 自定义加载图标
+Toast.loading({
+  message: '加载中...',
+  forbidClick: true,
+  loadingType: 'spinner',
+});
 ```

 ### 动态更新提示
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@ -1,53 +1,26 @@
 <template>
  <demo-section>
-    <demo-block :title="t('title1')">
-      <van-button
-        type="primary"
-        :text="t('title1')"
-        @click="$toast(t('text'))"
-      />
-      <van-button
-        type="primary"
-        :text="t('longTextButton')"
-        @click="$toast(t('longText'))"
-      />
+    <demo-block card :title="t('basicUsage')">
+      <van-cell is-link :title="t('title1')" @click="$toast(t('text'))" />
+      <van-cell is-link :title="t('title2')" @click="showLoadingToast()" />
+      <van-cell is-link :title="t('success')" @click="showSuccessToast" />
+      <van-cell is-link :title="t('fail')" @click="showFailToast" />
    </demo-block>

-    <demo-block :title="t('title2')">
-      <van-button
-        type="primary"
-        :text="t('title2')"
-        @click="showLoadingToast()"
-      />
-      <van-button
-        type="primary"
-        :text="t('loadingType')"
+    <demo-block card v-if="!isWeapp" :title="t('customIcon')">
+      <van-cell is-link :title="t('customIcon')" @click="showIconToast" />
+      <van-cell is-link :title="t('customImage')" @click="showImageToast" />
+      <van-cell
+        is-link
+        :title="t('loadingType')"
        @click="showLoadingToast('spinner')"
      />
    </demo-block>

-    <demo-block :title="t('title3')">
-      <van-button type="info" :text="t('success')" @click="showSuccessToast" />
-      <van-button type="danger" :text="t('fail')" @click="showFailToast" />
-    </demo-block>
-
-    <demo-block v-if="!isWeapp" :title="t('customIcon')">
-      <van-button
-        type="primary"
-        :text="t('customIcon')"
-        @click="showIconToast"
-      />
-      <van-button
-        type="primary"
-        :text="t('customImage')"
-        @click="showImageToast"
-      />
-    </demo-block>
-
-    <demo-block :title="t('updateMessage')">
-      <van-button
-        type="primary"
-        :text="t('updateMessage')"
+    <demo-block card :title="t('updateMessage')">
+      <van-cell
+        is-link
+        :title="t('updateMessage')"
        @click="showCustomizedToast"
      />
    </demo-block>
@ -64,13 +37,11 @@ export default {
      success: '成功提示',
      fail: '失败提示',
      text: '提示内容',
-      longText: '这是一条长文字提示，超过一定字数就会换行',
      text2: '成功文案',
      text3: '失败文案',
      customIcon: '自定义图标',
-      customImage: '展示图片',
+      customImage: '自定义图片',
      text4: (second) => `倒计时 ${second} 秒`,
-      longTextButton: '长文字提示',
      updateMessage: '动态更新提示',
      loadingType: '自定义加载图标',
    },
@ -81,14 +52,11 @@ export default {
      success: 'Success',
      fail: 'Fail',
      text: 'Some messages',
-      longText:
-        'This is a long message, text will wrap when over a certain length',
      text2: 'Success',
      text3: 'Fail',
      customIcon: 'Custom Icon',
      customImage: 'Custom Image',
      text4: (second) => `${second} seconds`,
-      longTextButton: 'Long Text',
      updateMessage: 'Update Message',
      loadingType: 'Loading Type',
    },
@ -146,15 +114,3 @@ export default {
  },
 };
 </script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-toast {
-  background-color: @white;
-
-  .van-button {
-    margin-left: @padding-md;
-  }
-}
-</style>
--- a/src/toast/test/snapshots/demo.spec.js.snap
+++ b/src/toast/test/snapshots/demo.spec.js.snap
@ -2,28 +2,43 @@

 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">文字提示</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">长文字提示</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">加载提示</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">自定义加载图标</span></div>
-    </button></div>
-  <div><button class="van-button van-button--info van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">成功提示</span></div>
-    </button> <button class="van-button van-button--danger van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">失败提示</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">自定义图标</span></div>
-    </button> <button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">展示图片</span></div>
-    </button></div>
-  <div><button class="van-button van-button--primary van-button--normal">
-      <div class="van-button__content"><span class="van-button__text">动态更新提示</span></div>
-    </button></div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>文字提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>加载提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>成功提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>失败提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义图片</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>自定义加载图标</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
+  <div>
+    <div role="button" tabindex="0" class="van-cell van-cell--clickable">
+      <div class="van-cell__title"><span>动态更新提示</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+        <!----></i>
+    </div>
+  </div>
 </div>
 `;
--- a/src/uploader/test/snapshots/demo.spec.js.snap
+++ b/src/uploader/test/snapshots/demo.spec.js.snap
@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-uploader__wrapper">
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
        </div>
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -39,7 +39,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-uploader__wrapper">
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-uploader__mask">
@ -49,7 +49,7 @@ exports[`renders demo correctly 1`] = `
        </div>
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/tree.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-uploader__mask"><i class="van-icon van-icon-close van-uploader__mask-icon">
@ -69,7 +69,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-uploader__wrapper">
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -85,7 +85,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-uploader__wrapper">
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/sand.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
          </div>
          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -113,7 +113,7 @@ exports[`renders demo correctly 1`] = `
      <div class="van-uploader__wrapper">
        <div class="van-uploader__preview">
          <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/leaf.jpg" class="van-image__img" style="object-fit: cover;">
-            <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+            <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
                <!----></i></div>
            <div class="van-uploader__preview-cover">
              <div class="preview-cover van-ellipsis">图片名称</div>
--- a/src/uploader/test/snapshots/index.spec.js.snap
+++ b/src/uploader/test/snapshots/index.spec.js.snap
@ -23,7 +23,7 @@ exports[`file message should be reactive 1`] = `
  <div class="van-uploader__wrapper">
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
      <div class="van-uploader__mask">
@ -42,7 +42,7 @@ exports[`image-fit prop 1`] = `
  <div class="van-uploader__wrapper">
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -59,7 +59,7 @@ exports[`max-count prop 1`] = `
  <div class="van-uploader__wrapper">
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -74,7 +74,7 @@ exports[`preview-cover slot 1`] = `
  <div class="van-uploader__wrapper">
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
        <div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
      </div>
@ -83,7 +83,7 @@ exports[`preview-cover slot 1`] = `
    </div>
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
        <div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
      </div>
@ -101,7 +101,7 @@ exports[`preview-size prop 1`] = `
  <div class="van-uploader__wrapper">
    <div class="van-uploader__preview" style="">
      <div class="van-image van-uploader__preview-image" style="width: 30px; height: 30px;"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -118,7 +118,7 @@ exports[`render preview image 1`] = `
  <div class="van-uploader__wrapper">
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
@ -142,7 +142,7 @@ exports[`render preview image 1`] = `
    </div>
    <div class="van-uploader__preview">
      <div class="van-image van-uploader__preview-image"><img src="data:image/test" class="van-image__img" style="object-fit: cover;">
-        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
+        <div class="van-image__loading"><i class="van-icon van-icon-photo van-image__loading-icon">
            <!----></i></div>
      </div>
      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
--- a/types/dialog.d.ts
+++ b/types/dialog.d.ts
@ -7,6 +7,7 @@ export type DialogOptions = {
  title?: string;
  width?: string | number;
  message?: string;
+  theme?: string;
  overlay?: boolean;
  className?: any;
  allowHtml?: boolean;
--- a/yarn.lock
+++ b/yarn.lock
@ -2121,10 +2121,10 @@
    eslint-plugin-import "^2.20.2"
    eslint-plugin-vue "^6.2.2"

-"@vant/icons@1.2.3":
-  version "1.2.3"
-  resolved "https://registry.npmjs.org/@vant/icons/-/icons-1.2.3.tgz#c46b7ddd32363f790944c3af974b73bda80df7a1"
-  integrity sha512-LMu1JGGgZqLYXVFRcuNRDCOWE7AX0vt/gFBkd9xMI7H9uMdNx2oO3YujgNVvVrrF8iufHwfwUv41HiwYMvU3zQ==
+"@vant/icons@1.2.5":
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/@vant/icons/-/icons-1.2.5.tgz#f3db43c4b300300829e3c4e909beaa33d1cbe786"
+  integrity sha512-PNVSAaAzL3LtWK16qDCtMMfM2A5v+Ie9YTMVHF4QmumpuWxjyk0iUppJ+YRD0MjwR/CTx2OWkIB57+IAqbHnlg==

 "@vant/markdown-loader@^3.0.0-alpha.0":
  version "3.0.0-alpha.0"
@ -3043,9 +3043,9 @@ bluebird@^3.1.1, bluebird@^3.5.5:
  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==

 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-  integrity sha512-ItfYfPLkWHUjckQCk8xC+LwxgK8NYcXywGigJgSwOP8Y2iyWT4f2vsZnoOXTTbo+o5yXmIUJ4gn5538SO5S3gA==
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==

 body-parser@1.19.0:
  version "1.19.0"
@ -4755,9 +4755,9 @@ electron-to-chromium@^1.3.483:
  integrity sha512-NReBdOugu1yl8ly+0VDtiQ6Yw/1sLjnvflWq0gvY1nfUXU2PbA+1XAVuEb7ModnwL/MfUPjby7e4pAFnSHiy6Q==

 elliptic@^6.0.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
-  integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
  dependencies:
    bn.js "^4.4.0"
    brorand "^1.0.1"