Merge branch 'dev' into next

2025-04-06 03:57:59 +08:00 · 2020-07-12 14:44:02 +08:00 · 2020-07-12 14:44:02 +08:00 · f7c6de7a28
commit f7c6de7a28
parent 4eb36898e9 2b22a9d510
50 changed files with 703 additions and 179 deletions
--- a/docs/markdown/changelog.en-US.md
+++ b/docs/markdown/changelog.en-US.md
@ -10,22 +10,35 @@ 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.9.1-beta.1](https://github.com/youzan/vant/compare/v2.9.0...v2.9.1-beta.1)
+### [v2.9.1](https://github.com/youzan/vant/compare/v2.9.0...v2.9.1)

-`2020-07-07`
+`2020-07-12`

 **Feature**

+- DatetimePicker: add datehour type [#6732](https://github.com/youzan/vant/issues/6732)
 - Field: add clear-trigger prop [#6699](https://github.com/youzan/vant/issues/6699)
 - Search: add clear-trigger prop [#6700](https://github.com/youzan/vant/issues/6700)
 - Uploader: add preview-cover slot [#6707](https://github.com/youzan/vant/issues/6707)
+- ShareSheet: add click-overlay event [#6765](https://github.com/youzan/vant/issues/6765)
+- Stepper: add allow-empty prop [#6759](https://github.com/youzan/vant/issues/6759)
+- Steps: add inactive-color prop [#6758](https://github.com/youzan/vant/issues/6758)
+- SubmitBar: add button-color prop [#6757](https://github.com/youzan/vant/issues/6757)
 - Sku: improve message datetime picker [8d29e5](https://github.com/youzan/vant/commit/8d29e5c8c6df278800865596f285c17029150963) [7343e5](https://github.com/youzan/vant/commit/7343e55409900635a0e39063edb9f67493048a54)

+**style**
+
+- ActionSheet: subname vertical align [#6756](https://github.com/youzan/vant/issues/6756)
+- Uploader: remove round border radius [#6748](https://github.com/youzan/vant/issues/6748)
+- Uploader: update delete icon style [#6750](https://github.com/youzan/vant/issues/6750)
+
 **Bug Fixes**

 - Calendar: subtitle not updated in some cases [#6723](https://github.com/youzan/vant/issues/6723)
 - Checkbox: dynamic bind group [#6730](https://github.com/youzan/vant/issues/6730)
+- Field: can't display six characters in iOS [#6743](https://github.com/youzan/vant/issues/6743)
 - Image: memory leak during SSR [#6721](https://github.com/youzan/vant/issues/6721)
+- ImagePreview: fit window resize [#6760](https://github.com/youzan/vant/issues/6760)
 - ImagePreview: swipeTo type should be optional [#6727](https://github.com/youzan/vant/issues/6727)
 - Picker: click during momentum case incorrect result [#6724](https://github.com/youzan/vant/issues/6724)
 - Popup: lock-scroll not work in some cases [#6698](https://github.com/youzan/vant/issues/6698)
--- a/docs/markdown/changelog.zh-CN.md
+++ b/docs/markdown/changelog.zh-CN.md
@ -10,22 +10,35 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。

-### [v2.9.1-beta.1](https://github.com/youzan/vant/compare/v2.9.0...v2.9.1-beta.1)
+### [v2.9.1](https://github.com/youzan/vant/compare/v2.9.0...v2.9.1)

-`2020-07-07`
+`2020-07-12`

 **Feature**

- Field: 新增 clear-trigger 属性 [#6699](https://github.com/youzan/vant/issues/6699)
- Search: 新增 clear-trigger 属性 [#6700](https://github.com/youzan/vant/issues/6700)
- Uploader: 新增 preview-cover 插槽 [#6707](https://github.com/youzan/vant/issues/6707)
+- DatetimePicker: 新增 datehour 类型，用于选择年月日和小时 [#6732](https://github.com/youzan/vant/issues/6732)
+- Field: 新增 clear-trigger 属性，用于控制清除按钮展示时机 [#6699](https://github.com/youzan/vant/issues/6699)
+- Search: 新增 clear-trigger 属性，用于控制清除按钮展示时机 [#6700](https://github.com/youzan/vant/issues/6700)
+- Uploader: 新增 preview-cover 插槽，用于自定义覆盖在预览区域上方的内容 [#6707](https://github.com/youzan/vant/issues/6707)
+- ShareSheet: 新增 click-overlay 事件，在点击遮罩层时触发 [#6765](https://github.com/youzan/vant/issues/6765)
+- Stepper: 新增 allow-empty 属性，用于控制是否允许输入空值 [#6759](https://github.com/youzan/vant/issues/6759)
+- Steps: 新增 inactive-color 属性，用于设置未激活状态颜色 [#6758](https://github.com/youzan/vant/issues/6758)
+- SubmitBar: 新增 button-color 属性，用于设置按钮颜色 [#6757](https://github.com/youzan/vant/issues/6757)
 - Sku: 优化留言栏时间选择交互 [8d29e5](https://github.com/youzan/vant/commit/8d29e5c8c6df278800865596f285c17029150963) [7343e5](https://github.com/youzan/vant/commit/7343e55409900635a0e39063edb9f67493048a54)

+**style**
+
+- ActionSheet: 标题和二级标题调整为上下排列 [#6756](https://github.com/youzan/vant/issues/6756)
+- Uploader: 移除上传区域和图片预览的圆角 [#6748](https://github.com/youzan/vant/issues/6748)
+- Uploader: 更新删除按钮样式 [#6750](https://github.com/youzan/vant/issues/6750)
+
 **Bug Fixes**

 - Calendar: 修复个别情况下日历标题不更新的问题 [#6723](https://github.com/youzan/vant/issues/6723)
 - Checkbox: 修复动态设置 bind-group 时不生效的问题 [#6730](https://github.com/youzan/vant/issues/6730)
+- Field: 修复在 iOS 下 label 文字超过 5 个时会换行的问题 [#6743](https://github.com/youzan/vant/issues/6743)
 - Image: 修复 SSR 时 LazyLoad 属性存在内存泄露的问题 [#6721](https://github.com/youzan/vant/issues/6721)
+- ImagePreview: 修复屏幕大小变化时图片宽高比展示错误的问题 [#6760](https://github.com/youzan/vant/issues/6760)
 - ImagePreview: 修复 swipeTo 方法类型定义错误 [#6727](https://github.com/youzan/vant/issues/6727)
 - Picker: 修复惯性滚动过程中点击选项会导致选中结果错误的问题 [#6724](https://github.com/youzan/vant/issues/6724)
 - Popup: 修复 lock-scroll 在个别场景下不生效的问题 [#6698](https://github.com/youzan/vant/issues/6698)
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "vant",
-  "version": "2.9.1-beta.1",
+  "version": "2.9.1",
  "description": "Mobile UI Components built on Vue",
  "main": "lib/index.js",
  "module": "es/index.js",
--- a/src/action-sheet/README.md
+++ b/src/action-sheet/README.md
@ -121,7 +121,7 @@ export default {
    return {
      show: false,
      actions: [
-        { name: 'Colored Option', color: '#07c160' },
+        { name: 'Colored Option', color: '#ee0a24' },
        { name: 'Disabled Option', disabled: true },
        { name: 'Loading Option', loading: true },
      ],
--- a/src/action-sheet/README.zh-CN.md
+++ b/src/action-sheet/README.zh-CN.md
@ -125,7 +125,7 @@ export default {
    return {
      show: false,
      actions: [
-        { name: '着色选项', color: '#07c160' },
+        { name: '着色选项', color: '#ee0a24' },
        { name: '禁用选项', disabled: true },
        { name: '加载选项', loading: true },
      ],
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@ -58,7 +58,7 @@
 </template>

 <script>
-import { GREEN } from '../../utils/constant';
+import { RED } from '../../utils/constant';

 export default {
  i18n: {
@ -123,7 +123,7 @@ export default {

    statusActions() {
      return [
-        { name: this.t('coloredOption'), color: GREEN },
+        { name: this.t('coloredOption'), color: RED },
        { name: this.t('disabledOption'), disabled: true },
        { loading: true },
      ];
--- a/src/action-sheet/index.less
+++ b/src/action-sheet/index.less
@ -9,10 +9,8 @@
  &__cancel {
    display: block;
    width: 100%;
-    height: @action-sheet-item-height;
-    padding: 0;
+    padding: 14px @padding-md;
    font-size: @action-sheet-item-font-size;
-    line-height: 20px;
    background-color: @action-sheet-item-background;
    border: none;
    cursor: pointer;
@ -23,6 +21,8 @@
  }

  &__item {
+    line-height: @action-sheet-item-line-height;
+
    &--loading,
    &--disabled {
      color: @action-sheet-item-disabled-text-color;
@ -42,9 +42,10 @@
  }

  &__subname {
-    margin-left: @padding-base;
+    margin-top: @padding-xs;
    color: @action-sheet-subname-color;
    font-size: @action-sheet-subname-font-size;
+    line-height: @action-sheet-subname-line-height;
  }

  &__gap {
--- a/src/action-sheet/index.tsx
+++ b/src/action-sheet/index.tsx
@ -102,7 +102,7 @@ function ActionSheet(

      return [
        <span class={bem('name')}>{item.name}</span>,
-        item.subname && <span class={bem('subname')}>{item.subname}</span>,
+        item.subname && <div class={bem('subname')}>{item.subname}</div>,
      ];
    }

--- a/src/action-sheet/test/snapshots/index.spec.js.snap
+++ b/src/action-sheet/test/snapshots/index.spec.js.snap
@ -3,7 +3,8 @@
 exports[`callback events 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--loading">
    <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button>
+  </button><button type="button" class="van-action-sheet__item"><span class="van-action-sheet__name">Option</span>
+    <div class="van-action-sheet__subname">Subname</div></button>
  <div class="van-action-sheet__gap"></div><button type="button" class="van-action-sheet__cancel">Cancel</button>
 </div>
 `;
--- a/src/datetime-picker/DatePicker.js
+++ b/src/datetime-picker/DatePicker.js
@ -95,6 +95,10 @@ export default createComponent({
        result = result.slice(1, 3);
      }

+      if (this.type === 'datehour') {
+        result = result.slice(0, 4);
+      }
+
      return result;
    },
  },
@ -176,6 +180,10 @@ export default createComponent({
      let hour = 0;
      let minute = 0;

+      if (type === 'datehour') {
+        hour = getValue(3);
+      }
+
      if (type === 'datetime') {
        hour = getValue(3);
        minute = getValue(4);
@ -213,6 +221,12 @@ export default createComponent({
        );
      }

+      if (this.type === 'datehour') {
+        values.push(
+          formatter('hour', padZero(value.getHours()))
+        );
+      }
+
      if (this.type === 'year-month') {
        values = values.slice(0, 2);
      }
--- a/src/datetime-picker/README.md
+++ b/src/datetime-picker/README.md
@ -155,6 +155,30 @@ export default {
 };
 ```

+### Choose DateHour
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="datehour"
+  title="Choose DateTime"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+    };
+  },
+};
+```
+
 ### Option Filter

 ```html
@ -190,7 +214,7 @@ export default {

 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| type | Can be set to `date` `time`<br> `year-month` `month-day` | _string_ | `datetime` |
+| type | Can be set to `date` `time`<br> `year-month` `month-day` `datehour` | _string_ | `datetime` |
 | title | Toolbar title | _string_ | `''` |
 | confirm-button-text | Text of confirm button | _string_ | `Confirm` |
 | cancel-button-text | Text of cancel button | _string_ | `Cancel` |
--- a/src/datetime-picker/README.zh-CN.md
+++ b/src/datetime-picker/README.zh-CN.md
@ -2,7 +2,7 @@

 ### 介绍

-时间选择器，支持日期、年月、时分等维度，通常与[弹出层](#/zh-CN/popup)组件配合使用
+时间选择器，支持日期、年月、时分等维度，通常与[弹出层](#/zh-CN/popup)组件配合使用。

 ### 引入

@ -43,7 +43,7 @@ export default {

 ### 选择年月

-将 type 设置为 `year-month` 即可选择年份和月份。通过传入`formatter`函数，可以对选项文字进行格式化处理
+将 type 设置为 `year-month` 即可选择年份和月份。通过传入 `formatter` 函数，可以对选项文字进行格式化处理。

 ```html
 <van-datetime-picker
@ -80,7 +80,7 @@ export default {

 ### 选择月日

-将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）
+将 type 设置为 `month-day` 即可选择月份和日期（从 2.8.4 版本开始支持）。

 ```html
 <van-datetime-picker
@ -117,7 +117,7 @@ export default {

 ### 选择时间

-将 type 设置为 `time` 即可选择时间（小时和分钟）
+将 type 设置为 `time` 即可选择时间（小时和分钟）。

 ```html
 <van-datetime-picker
@ -165,9 +165,35 @@ export default {
 };
 ```

+### 选择年月日小时
+
+将 type 设置为 `datehour` 即可选择日期和小时，包括年月日和小时（从 2.9.1 版本开始支持）。
+
+```html
+<van-datetime-picker
+  v-model="currentDate"
+  type="datehour"
+  title="选择年月日小时"
+  :min-date="minDate"
+  :max-date="maxDate"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+    };
+  },
+};
+```
+
 ### 选项过滤器

-通过传入`filter`函数，可以对选项数组进行过滤，实现自定义时间间隔
+通过传入 `filter` 函数，可以对选项数组进行过滤，实现自定义时间间隔。

 ```html
 <van-datetime-picker v-model="currentTime" type="time" :filter="filter" />
@ -197,7 +223,7 @@ export default {

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 时间类型，可选值为 `date` `time` <br> `year-month` `month-day` | _string_ | `datetime` |
+| type | 时间类型，可选值为 `date` `time` <br> `year-month` `month-day` `datehour` | _string_ | `datetime` |
 | title | 顶部栏标题 | _string_ | `''` |
 | confirm-button-text | 确认按钮文字 | _string_ | `确认` |
 | cancel-button-text | 取消按钮文字 | _string_ | `取消` |
--- a/src/datetime-picker/demo/index.vue
+++ b/src/datetime-picker/demo/index.vue
@ -52,6 +52,16 @@
      />
    </demo-block>

+    <demo-block card v-if="!isWeapp" :title="t('datehourType')">
+      <van-datetime-picker
+        v-model="value.datehour"
+        type="datehour"
+        :title="t('datehourType')"
+        :min-date="minDate"
+        :max-date="maxDate"
+      />
+    </demo-block>
+
    <demo-block card :title="t('optionFilter')">
      <van-datetime-picker
        v-model="value.optionFilter"
@ -73,6 +83,7 @@ export default {
      timeType: '选择时间',
      dateType: '选择年月日',
      datetimeType: '选择完整时间',
+      datehourType: '选择年月日小时',
      monthDayType: '选择月日',
      yearMonthType: '选择年月',
      optionFilter: '选项过滤器',
@ -84,6 +95,7 @@ export default {
      timeType: 'Choose Time',
      dateType: 'Choose Date',
      datetimeType: 'Choose DateTime',
+      datehourType: 'Choose DateHour',
      monthDayType: 'Choose Month-Day',
      yearMonthType: 'Choose Year-Month',
      optionFilter: 'Option Filter',
@ -98,6 +110,7 @@ export default {
        date: null,
        time: '12:00',
        datetime: new Date(2020, 0, 1),
+        datehour: new Date(2020, 0, 1),
        monthDay: new Date(2020, 0, 1),
        yearMonth: new Date(2020, 0, 1),
        optionFilter: '12:00',
--- a/src/datetime-picker/test/snapshots/demo.spec.js.snap
+++ b/src/datetime-picker/test/snapshots/demo.spec.js.snap
@ -1065,6 +1065,254 @@ exports[`renders demo correctly 1`] = `
      <!---->
    </div>
  </div>
+  <div>
+    <div class="van-picker van-datetime-picker">
+      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
+        <div class="van-ellipsis van-picker__title">选择年月日小时</div><button type="button" class="van-picker__confirm">确认</button>
+      </div>
+      <!---->
+      <div class="van-picker__columns" style="height: 220px;">
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">2020</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2021</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2022</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2023</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2024</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">2025</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">13</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">14</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">15</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">16</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">17</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">18</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">19</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">20</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">21</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">22</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">23</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">24</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">25</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">26</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">27</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">28</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">29</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">30</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">31</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker-column">
+          <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+              <div class="van-ellipsis">00</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">01</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">02</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">03</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">04</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">05</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">06</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">07</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">08</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">09</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">10</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">11</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">12</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">13</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">14</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">15</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">16</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">17</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">18</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">19</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">20</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">21</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">22</div>
+            </li>
+            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+              <div class="van-ellipsis">23</div>
+            </li>
+          </ul>
+        </div>
+        <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+      </div>
+      <!---->
+    </div>
+  </div>
  <div>
    <div class="van-picker van-datetime-picker">
      <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
--- a/src/datetime-picker/test/date-picker.spec.js
+++ b/src/datetime-picker/test/date-picker.spec.js
@ -122,6 +122,23 @@ test('month-day type', () => {
  expect(wrapper.emitted('confirm')[2][0].getDate()).toEqual(31);
 });

+test('datehour type', async () => {
+  const wrapper = mount(DatePicker, {
+    propsData: {
+      minDate: new Date(2010, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      value: new Date(2020, 10, 1, 0, 0),
+    },
+  });
+
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0].getHours()).toEqual(0);
+
+  triggerDrag(wrapper.findAll('.van-picker-column').at(3), 0, -300);
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[1][0].getHours()).toEqual(23);
+});
+
 test('cancel event', () => {
  const wrapper = mount(DatePicker);

--- a/src/field/README.md
+++ b/src/field/README.md
@ -243,7 +243,7 @@ Use `input-align` prop to align the input value.
 | format-trigger `v2.8.7` | When to format value，can be set to `onBlur` | _string_ | `onChange` |
 | arrow-direction `v2.0.4` | Can be set to `left` `up` `down` | _string_ | `right` |
 | label-class | Label className | _any_ | - |
-| label-width | Label width | _number \| string_ | `6em` |
+| label-width | Label width | _number \| string_ | `6.2em` |
 | label-align | Label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Input align, can be set to `center` `right` | _string_ | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
--- a/src/field/README.zh-CN.md
+++ b/src/field/README.zh-CN.md
@ -268,7 +268,7 @@ export default {
 | format-trigger `v2.8.7` | 格式化函数触发的时机，可选值为 `onBlur` | _string_ | `onChange` |
 | arrow-direction `v2.0.4` | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
 | label-class | 左侧文本额外类名 | _any_ | - |
-| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `6em` |
+| label-width | 左侧文本宽度，默认单位为`px` | _number \| string_ | `6.2em` |
 | label-align | 左侧文本对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
--- a/src/form/README.md
+++ b/src/form/README.md
@ -424,7 +424,7 @@ export default {

 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| label-width | Field label width | _number \| string_ | `6em` |
+| label-width | Field label width | _number \| string_ | `6.2em` |
 | label-align | Field label align, can be set to `center` `right` | _string_ | `left` |
 | input-align | Field input align, can be set to `center` `right` | _string_ | `left` |
 | error-message-align | Error message align, can be set to `center` `right` | _string_ | `left` |
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@ -459,7 +459,7 @@ export default {

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6em` |
+| label-width | 表单项 label 宽度，默认单位为`px` | _number \| string_ | `6.2em` |
 | label-align |  表单项 label 对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | input-align | 输入框对齐方式，可选值为 `center` `right` | _string_ | `left` |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `left` |
--- a/src/form/test/snapshots/demo.spec.js.snap
+++ b/src/form/test/snapshots/demo.spec.js.snap
@ -177,8 +177,9 @@ exports[`renders demo correctly 1`] = `
                    <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">
                          <!----></i></div>
-                    </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-                      <!----></i>
+                    </div>
+                    <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+                        <!----></i></div>
                  </div>
                  <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
                      <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@ -1,9 +1,11 @@
 // Utils
+import { inBrowser } from '../utils';
 import { bem, createComponent } from './shared';

 // Mixins
 import { PopupMixin } from '../mixins/popup';
 import { TouchMixin } from '../mixins/touch';
+import { BindEventMixin } from '../mixins/bind-event';

 // Components
 import Icon from '../icon';
@ -12,10 +14,13 @@ import ImagePreviewItem from './ImagePreviewItem';

 export default createComponent({
  mixins: [
+    TouchMixin,
    PopupMixin({
      skipToggleEvent: true,
    }),
-    TouchMixin,
+    BindEventMixin(function (bind) {
+      bind(window, 'resize', this.resize, true);
+    }),
  ],

  props: {
@ -72,10 +77,16 @@ export default createComponent({
  data() {
    return {
      active: 0,
+      windowWidth: 0,
+      windowHeight: 0,
      doubleClickTimer: null,
    };
  },

+  created() {
+    this.resize();
+  },
+
  watch: {
    startPosition: 'setActive',

@ -95,6 +106,13 @@ export default createComponent({
  },

  methods: {
+    resize() {
+      if (inBrowser) {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+      }
+    },
+
    emitClose() {
      if (!this.asyncClose) {
        this.$emit('input', false);
@ -151,6 +169,8 @@ export default createComponent({
              active={this.active}
              maxZoom={this.maxZoom}
              minZoom={this.minZoom}
+              windowWidth={this.windowWidth}
+              windowHeight={this.windowHeight}
              onScale={this.emitScale}
              onClose={this.emitClose}
            />
--- a/src/image-preview/ImagePreviewItem.js
+++ b/src/image-preview/ImagePreviewItem.js
@ -27,25 +27,30 @@ export default {
    active: Number,
    minZoom: [Number, String],
    maxZoom: [Number, String],
+    windowWidth: Number,
+    windowHeight: Number,
  },

  data() {
-    this.windowWidth = window.innerWidth;
-    this.windowHeight = window.innerHeight;
-
    return {
      scale: 1,
      moveX: 0,
      moveY: 0,
      moving: false,
      zooming: false,
-      vertical: false,
+      imageRatio: 0,
      displayWidth: 0,
      displayHeight: 0,
    };
  },

  computed: {
+    vertical() {
+      const { windowWidth, windowHeight } = this;
+      const windowRatio = windowHeight / windowWidth;
+      return this.imageRatio > windowRatio;
+    },
+
    imageStyle() {
      const { scale } = this;
      const style = {
@ -62,22 +67,29 @@ export default {
    },

    maxMoveX() {
-      if (this.displayWidth) {
-        return Math.max(
-          0,
-          (this.scale * this.displayWidth - this.windowWidth) / 2
-        );
+      if (this.imageRatio) {
+        const displayWidth = this.vertical
+          ? this.windowHeight / this.imageRatio
+          : this.windowWidth;
+
+        return Math.max(0, (this.scale * displayWidth - this.windowWidth) / 2);
      }
+
      return 0;
    },

    maxMoveY() {
-      if (this.displayHeight) {
+      if (this.imageRatio) {
+        const displayHeight = this.vertical
+          ? this.windowHeight
+          : this.windowWidth * this.imageRatio;
+
        return Math.max(
          0,
-          (this.scale * this.displayHeight - this.windowHeight) / 2
+          (this.scale * displayHeight - this.windowHeight) / 2
        );
      }
+
      return 0;
    },
  },
@ -225,20 +237,8 @@ export default {
    },

    onLoad(event) {
-      const { windowWidth, windowHeight } = this;
      const { naturalWidth, naturalHeight } = event.target;
-      const windowRatio = windowHeight / windowWidth;
-      const imageRatio = naturalHeight / naturalWidth;
-
-      this.vertical = imageRatio > windowRatio;
-
-      if (this.vertical) {
-        this.displayWidth = windowHeight / imageRatio;
-        this.displayHeight = windowHeight;
-      } else {
-        this.displayWidth = windowWidth;
-        this.displayHeight = windowWidth * imageRatio;
-      }
+      this.imageRatio = naturalHeight / naturalWidth;
    },
  },

--- a/src/mixins/bind-event.js
+++ b/src/mixins/bind-event.js
@ -0,0 +1,31 @@
+/**
+ * Bind event when mounted or activated
+ */
+import { on, off } from '../utils/dom/event';
+
+let uid = 0;
+
+export function BindEventMixin(handler) {
+  const key = `binded_${uid++}`;
+
+  function bind() {
+    if (!this[key]) {
+      handler.call(this, on, true);
+      this[key] = true;
+    }
+  }
+
+  function unbind() {
+    if (this[key]) {
+      handler.call(this, off, false);
+      this[key] = false;
+    }
+  }
+
+  return {
+    mounted: bind,
+    activated: bind,
+    deactivated: unbind,
+    beforeDestroy: unbind,
+  };
+}
--- a/src/mixins/bind-event.ts
+++ b/src/mixins/bind-event.ts
@ -1,33 +0,0 @@
-/**
- * Bind event when mounted or activated
- */
-import { on, off } from '../utils/dom/event';
-
-type BindEventMixinThis = {
-  binded: boolean;
-};
-
-type BindEventHandler = (bind: Function, isBind: boolean) => void;
-
-export function BindEventMixin(handler: BindEventHandler) {
-  function bind(this: BindEventMixinThis) {
-    if (!this.binded) {
-      handler.call(this, on, true);
-      this.binded = true;
-    }
-  }
-
-  function unbind(this: BindEventMixinThis) {
-    if (this.binded) {
-      handler.call(this, off, false);
-      this.binded = false;
-    }
-  }
-
-  return {
-    mounted: bind,
-    activated: bind,
-    deactivated: unbind,
-    beforeDestroy: unbind,
-  };
-}
--- a/src/password-input/index.tsx
+++ b/src/password-input/index.tsx
@ -40,7 +40,10 @@ function PasswordInput(
    }

    Points.push(
-      <li class={{ [BORDER_LEFT]: showBorder }} style={style}>
+      <li
+        class={[{ [BORDER_LEFT]: showBorder }, bem('item', { focus: showCursor })]}
+        style={style}
+      >
        {mask ? (
          <i style={{ visibility: char ? 'visible' : 'hidden' }} />
        ) : (
--- a/src/password-input/test/snapshots/demo.spec.js.snap
+++ b/src/password-input/test/snapshots/demo.spec.js.snap
@ -5,14 +5,14 @@ exports[`renders demo correctly 1`] = `
  <div>
    <div class="van-password-input">
      <ul class="van-password-input__security van-hairline--surround">
-        <li class=""><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i>
+        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item van-password-input__item--focus"><i style="visibility: hidden;"></i>
          <div class="van-password-input__cursor"></div>
        </li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
      </ul>
      <div class="van-password-input__info">密码为 6 位数字</div>
    </div>
@ -42,34 +42,34 @@ exports[`renders demo correctly 1`] = `
  <div>
    <div class="van-password-input">
      <ul class="van-password-input__security">
-        <li class=""><i style="visibility: visible;"></i></li>
-        <li class="" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
-        <li class="" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
-        <li class="" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
+        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
+        <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
      </ul>
    </div>
  </div>
  <div>
    <div class="van-password-input">
      <ul class="van-password-input__security van-hairline--surround">
-        <li class="">1</li>
-        <li class="van-hairline--left">2</li>
-        <li class="van-hairline--left">3</li>
-        <li class="van-hairline--left"></li>
-        <li class="van-hairline--left"></li>
-        <li class="van-hairline--left"></li>
+        <li class="van-password-input__item">1</li>
+        <li class="van-hairline--left van-password-input__item">2</li>
+        <li class="van-hairline--left van-password-input__item">3</li>
+        <li class="van-hairline--left van-password-input__item"></li>
+        <li class="van-hairline--left van-password-input__item"></li>
+        <li class="van-hairline--left van-password-input__item"></li>
      </ul>
    </div>
  </div>
  <div>
    <div class="van-password-input">
      <ul class="van-password-input__security van-hairline--surround">
-        <li class=""><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: visible;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
-        <li class="van-hairline--left"><i style="visibility: hidden;"></i></li>
+        <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
+        <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
      </ul>
    </div>
  </div>
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@ -137,6 +137,7 @@ export default {
 | --- | --- | --- |
 | select | Triggered when click option | _option: Option, index: number_ |
 | cancel | Triggered when click cancel button | - |
+| click-overlay `v2.9.1` | Triggered when click overlay | - |

 ### Slots

--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@ -181,10 +181,11 @@ export default {

 ### Events

-| 事件名 | 说明               | 回调参数                        |
-| ------ | ------------------ | ------------------------------- |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
 | select | 点击分享选项时触发 | _option: Option, index: number_ |
-| cancel | 点击取消按钮时触发 | -                               |
+| cancel | 点击取消按钮时触发 | - |
+| click-overlay `v2.9.1` | 点击遮罩层时触发 | - |

 ### Slots

--- a/src/share-sheet/index.js
+++ b/src/share-sheet/index.js
@ -122,6 +122,10 @@ export default createComponent({
        );
      }
    },
+
+    onClickOverlay() {
+      this.$emit('click-overlay');
+    },
  },

  render() {
@ -140,6 +144,7 @@ export default createComponent({
        closeOnClickOverlay={this.closeOnClickOverlay}
        safeAreaInsetBottom={this.safeAreaInsetBottom}
        onInput={this.toggle}
+        onClick-overlay={this.onClickOverlay}
      >
        {this.genHeader()}
        {this.genRows()}
--- a/src/share-sheet/test/index.spec.js
+++ b/src/share-sheet/test/index.spec.js
@ -1,5 +1,5 @@
 import ShareSheet from '..';
-import { mount } from '../../../test';
+import { mount, trigger, later } from '../../../test';

 test('cancel-text prop', () => {
  const wrapper = mount(ShareSheet, {
@ -70,3 +70,19 @@ test('title & description slot', () => {

  expect(wrapper).toMatchSnapshot();
 });
+
+test('click-overlay event', async () => {
+  const root = document.createElement('div');
+  const wrapper = mount(ShareSheet, {
+    propsData: {
+      value: true,
+      getContainer: () => root,
+    },
+  });
+
+  await later();
+
+  const overlay = root.querySelector('.van-overlay');
+  trigger(overlay, 'click');
+  expect(wrapper.emitted('click-overlay')).toBeTruthy();
+});
--- a/src/step/index.js
+++ b/src/step/index.js
@ -23,10 +23,18 @@ export default createComponent({
    },

    lineStyle() {
-      if (this.status === 'finish' && this.parent.activeColor) {
-        return {
-          background: this.parent.activeColor,
-        };
+      if (this.status === 'finish') {
+        return { background: this.parent.activeColor };
+      }
+      return { background: this.parent.inactiveColor };
+    },
+
+    titleStyle() {
+      if (this.active) {
+        return { color: this.parent.activeColor };
+      }
+      if (!this.status) {
+        return { color: this.parent.inactiveColor };
      }
    },
  },
@ -65,15 +73,13 @@ export default createComponent({

  render() {
    const { status, active } = this;
-    const { activeColor, direction } = this.parent;
-
-    const titleStyle = active && { color: activeColor };
+    const { direction } = this.parent;

    return (
      <div class={[BORDER, bem([direction, { [status]: status }])]}>
        <div
          class={bem('title', { active })}
-          style={titleStyle}
+          style={this.titleStyle}
          onClick={this.onClickStep}
        >
          {this.slots()}
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@ -129,6 +129,7 @@ export default {
 | show-plus `v2.1.2` | Whether to show plus button | _boolean_ | `true` |
 | show-minus `v2.1.2` | Whether to show minus button | _boolean_ | `true` |
 | long-press `v2.4.3` | Whether to allow long press | _boolean_ | `true` |
+| allow-empty `v2.9.1` | Whether to allow the input to be empty | _boolean_ | `false` |

 ### Events

--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@ -155,6 +155,7 @@ export default {
 | show-plus `v2.1.2` | 是否显示增加按钮 | _boolean_ | `true` |
 | show-minus `v2.1.2` | 是否显示减少按钮 | _boolean_ | `true` |
 | long-press `v2.4.3` | 是否开启长按手势 | _boolean_ | `true` |
+| allow-empty `v2.9.1` | 是否允许输入的值为空 | _boolean_ | `false` |

 ### Events

--- a/src/stepper/index.js
+++ b/src/stepper/index.js
@ -28,6 +28,7 @@ export default createComponent({
    theme: String,
    integer: Boolean,
    disabled: Boolean,
+    allowEmpty: Boolean,
    inputWidth: [Number, String],
    buttonSize: [Number, String],
    asyncChange: Boolean,
@ -154,6 +155,10 @@ export default createComponent({
    },

    format(value) {
+      if (this.allowEmpty && value === '') {
+        return value;
+      }
+
      value = this.formatNumber(value);

      // format range
--- a/src/stepper/test/index.spec.js
+++ b/src/stepper/test/index.spec.js
@ -387,3 +387,20 @@ test('placeholder prop', () => {
  });
  expect(wrapper.find('.van-stepper__input')).toMatchSnapshot();
 });
+
+test('allow-empty prop', () => {
+  const wrapper = mount(Stepper, {
+    propsData: {
+      value: '',
+      allowEmpty: true,
+    },
+  });
+
+  const input = wrapper.find('input');
+  input.trigger('blur');
+  expect(wrapper.emitted('input')).toBeFalsy();
+
+  wrapper.setProps({ allowEmpty: false });
+  input.trigger('blur');
+  expect(wrapper.emitted('input')[0][0]).toEqual(1);
+});
--- a/src/steps/README.md
+++ b/src/steps/README.md
@ -67,13 +67,14 @@ export default {

 ### Steps Props

-| Attribute     | Description              | Type               | Default      |
-| ------------- | ------------------------ | ------------------ | ------------ |
-| active        | Active step              | _number \| string_ | `0`          |
-| direction     | Can be set to `vertical` | _string_           | `horizontal` |
-| active-color  | Active step color        | _string_           | `#07c160`    |
-| active-icon   | Active icon name         | _string_           | `checked`    |
-| inactive-icon | Active icon name         | _string_           | -            |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| active | Active step | _number \| string_ | `0` |
+| direction | Can be set to `vertical` | _string_ | `horizontal` |
+| active-color | Active step color | _string_ | `#07c160` |
+| inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` |
+| active-icon | Active icon name | _string_ | `checked` |
+| inactive-icon | Inactive icon name | _string_ | - |

 ### Step Slots

--- a/src/steps/README.zh-CN.md
+++ b/src/steps/README.zh-CN.md
@ -78,6 +78,7 @@ export default {
 | active | 当前步骤 | _number \| string_ | `0` |
 | direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
 | active-color | 激活状态颜色 | _string_ | `#07c160` |
+| inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` |
 | active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
 | inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |

--- a/src/steps/index.js
+++ b/src/steps/index.js
@ -9,6 +9,7 @@ export default createComponent({
  props: {
    activeColor: String,
    inactiveIcon: String,
+    inactiveColor: String,
    active: {
      type: [Number, String],
      default: 0,
--- a/src/steps/test/snapshots/index.spec.js.snap
+++ b/src/steps/test/snapshots/index.spec.js.snap
@ -27,3 +27,21 @@ exports[`icon slot 1`] = `
  </div>
 </div>
 `;
+
+exports[`inactive-color prop 1`] = `
+<div class="van-steps van-steps--horizontal">
+  <div class="van-steps__items">
+    <div class="van-hairline van-step van-step--horizontal van-step--process">
+      <div class="van-step__title van-step__title--active">A</div>
+      <div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
+          <!----></i></div>
+      <div class="van-step__line" style="background: red;"></div>
+    </div>
+    <div class="van-hairline van-step van-step--horizontal">
+      <div class="van-step__title" style="color: red;">B</div>
+      <div class="van-step__circle-container"><i class="van-step__circle" style="background: red;"></i></div>
+      <div class="van-step__line" style="background: red;"></div>
+    </div>
+  </div>
+</div>
+`;
--- a/src/steps/test/index.spec.js
+++ b/src/steps/test/index.spec.js
@ -47,3 +47,15 @@ test('click-step event', () => {
  expect(onClickStep).toHaveBeenCalledTimes(2);
  expect(onClickStep).toHaveBeenLastCalledWith(2);
 });
+
+test('inactive-color prop', () => {
+  const wrapper = mount({
+    template: `
+    <van-steps :active="0" inactive-color="red">
+      <van-step>A</van-step>
+      <van-step>B</van-step>
+    </van-steps>
+    `,
+  });
+  expect(wrapper).toMatchSnapshot();
+});
--- a/src/style/var.less
+++ b/src/style/var.less
@ -70,13 +70,14 @@
@action-sheet-description-color: @gray-6;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 20px;
-@action-sheet-item-height: 50px;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;
+@action-sheet-item-line-height: 22px;
@action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-6;
@action-sheet-subname-font-size: @font-size-sm;
+@action-sheet-subname-line-height: 20px;
@action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: @gray-5;
@action-sheet-close-icon-active-color: @gray-6;
@ -343,7 +344,7 @@
@empty-bottom-margin-top: 24px;

 // Field
-@field-label-width: 6em;
+@field-label-width: 6.2em;
@field-label-color: @gray-7;
@field-label-margin-right: @padding-sm;
@field-input-text-color: @text-color;
@ -812,12 +813,11 @@
@uploader-icon-color: @gray-4;
@uploader-text-color: @gray-6;
@uploader-text-font-size: @font-size-sm;
-@uploader-upload-border-radius: 8px;
@uploader-upload-background-color: @gray-1;
@uploader-upload-active-color: @active-color;
-@uploader-delete-color: @gray-6;
-@uploader-delete-icon-size: 18px;
-@uploader-delete-background-color: @white;
+@uploader-delete-color: @white;
+@uploader-delete-icon-size: 14px;
+@uploader-delete-background-color: rgba(0, 0, 0, 0.7);
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 20px;
@uploader-file-icon-color: @gray-7;
--- a/src/submit-bar/README.md
+++ b/src/submit-bar/README.md
@ -65,6 +65,7 @@ Use slot to add custom contents.
 | text-align `v2.3.0` | Price label text align can be set to `left` | _string_ | `right` |
 | button-text | Button text | _string_ | - |
 | button-type | Button type | _string_ | `danger` |
+| button-color `v2.9.1` | Button color | _string_ | - |
 | tip | Tip | _string_ | - |
 | tip-icon | Icon | _string_ | - |
 | currency | Currency symbol | _string_ | `¥` |
--- a/src/submit-bar/README.zh-CN.md
+++ b/src/submit-bar/README.zh-CN.md
@ -70,6 +70,7 @@ Vue.use(SubmitBar);
 | text-align `v2.3.0` | 价格文案对齐方向，可选值为 `left` | _string_ | `right` |
 | button-text | 按钮文字 | _string_ | - |
 | button-type | 按钮类型 | _string_ | `danger` |
+| button-color `v2.9.1` | 自定义按钮颜色 | _string_ | - |
 | tip | 提示文案 | _string_ | - |
 | tip-icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - |
 | currency | 货币符号 | _string_ | `¥` |
--- a/src/submit-bar/index.tsx
+++ b/src/submit-bar/index.tsx
@ -20,6 +20,7 @@ export type SubmitBarProps = {
  disabled?: boolean;
  buttonType: ButtonType;
  buttonText?: string;
+  buttonColor?: string;
  suffixLabel?: string;
  decimalLength: number;
  safeAreaInsetBottom?: boolean;
@ -87,6 +88,7 @@ function SubmitBar(
          round
          class={bem('button', props.buttonType)}
          type={props.buttonType}
+          color={props.buttonColor}
          loading={props.loading}
          disabled={props.disabled}
          text={props.loading ? '' : props.buttonText}
@ -108,6 +110,7 @@ SubmitBar.props = {
  disabled: Boolean,
  textAlign: String,
  buttonText: String,
+  buttonColor: String,
  suffixLabel: String,
  safeAreaInsetBottom: {
    type: Boolean,
--- a/src/submit-bar/test/snapshots/index.spec.js.snap
+++ b/src/submit-bar/test/snapshots/index.spec.js.snap
@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`button-color prop 1`] = `
+<div class="van-submit-bar">
+  <div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: rgb(255, 255, 255); background: red; border-color: red;">
+      <div class="van-button__content"></div>
+    </button></div>
+</div>
+`;
+
 exports[`decimal-length prop 1`] = `
 <div class="van-submit-bar">
  <div class="van-submit-bar__bar">
--- a/src/submit-bar/test/index.spec.js
+++ b/src/submit-bar/test/index.spec.js
@ -108,3 +108,14 @@ test('disable safe-area-inset-bottom prop', () => {
  });
  expect(wrapper).toMatchSnapshot();
 });
+
+test('button-color prop', () => {
+  const wrapper = mount(SubmitBar, {
+    context: {
+      props: {
+        buttonColor: 'red',
+      },
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
--- a/src/uploader/index.js
+++ b/src/uploader/index.js
@ -308,14 +308,15 @@ export default createComponent({
      const showDelete = item.status !== 'uploading' && this.deletable;

      const DeleteIcon = showDelete && (
-        <Icon
-          name="clear"
+        <div
          class={bem('preview-delete')}
          onClick={(event) => {
            event.stopPropagation();
            this.onDelete(item, index);
          }}
-        />
+        >
+          <Icon name="cross" class={bem('preview-delete-icon')} />
+        </div>
      );

      const PreviewCoverContent = this.slots('preview-cover', item);
--- a/src/uploader/index.less
+++ b/src/uploader/index.less
@ -43,7 +43,6 @@
    height: @uploader-size;
    margin: 0 @padding-xs @padding-xs 0;
    background-color: @uploader-upload-background-color;
-    border-radius: @uploader-upload-border-radius;

    &:active {
      background-color: @uploader-upload-active-color;
@ -71,17 +70,26 @@
      width: @uploader-size;
      height: @uploader-size;
      overflow: hidden;
-      border-radius: @uploader-upload-border-radius;
    }

    &-delete {
      position: absolute;
-      top: -8px;
-      right: -8px;
-      color: @uploader-delete-color;
-      font-size: @uploader-delete-icon-size;
+      top: 0;
+      right: 0;
+      width: @uploader-delete-icon-size;
+      height: @uploader-delete-icon-size;
      background-color: @uploader-delete-background-color;
-      border-radius: 100%;
+      border-radius: 0 0 0 12px;
+
+      &-icon {
+        position: absolute;
+        top: -2px;
+        right: -2px;
+        color: #fff;
+        color: @uploader-delete-color;
+        font-size: 16px;
+        transform: scale(0.5);
+      }
    }

    &-cover {
@ -105,7 +113,6 @@
    justify-content: center;
    color: @white;
    background-color: @uploader-mask-background-color;
-    border-radius: @uploader-upload-border-radius;

    &-icon {
      font-size: @uploader-mask-icon-size;
@ -133,7 +140,6 @@
    width: @uploader-size;
    height: @uploader-size;
    background-color: @uploader-file-background-color;
-    border-radius: @uploader-upload-border-radius;

    &-icon {
      color: @uploader-file-icon-color;
--- a/src/uploader/test/snapshots/demo.spec.js.snap
+++ b/src/uploader/test/snapshots/demo.spec.js.snap
@ -17,15 +17,17 @@ exports[`renders demo correctly 1`] = `
          <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">
                <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
        </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">
                <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
        </div>
        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
            <!----></i><input multiple="multiple" type="file" accept="*" class="van-uploader__input"></div>
@ -53,8 +55,9 @@ exports[`renders demo correctly 1`] = `
          <div class="van-uploader__mask"><i class="van-icon van-icon-close van-uploader__mask-icon">
              <!----></i>
            <div class="van-uploader__mask-message">上传失败</div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
        </div>
        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -68,8 +71,9 @@ exports[`renders demo correctly 1`] = `
          <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">
                <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
        </div>
        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
            <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
@ -83,8 +87,9 @@ exports[`renders demo correctly 1`] = `
          <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">
                <!----></i></div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
        </div>
        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
            <!----></i><input multiple="multiple" type="file" accept="image/*" class="van-uploader__input"></div>
@ -113,8 +118,9 @@ exports[`renders demo correctly 1`] = `
            <div class="van-uploader__preview-cover">
              <div class="preview-cover van-ellipsis">图片名称</div>
            </div>
-          </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-            <!----></i>
+          </div>
+          <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+              <!----></i></div>
        </div>
        <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
            <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
--- a/src/uploader/test/snapshots/index.spec.js.snap
+++ b/src/uploader/test/snapshots/index.spec.js.snap
@ -44,8 +44,9 @@ exports[`image-fit prop 1`] = `
      <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">
            <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -60,8 +61,9 @@ exports[`max-count prop 1`] = `
      <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">
            <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
  </div>
 </div>
@ -75,16 +77,18 @@ exports[`preview-cover slot 1`] = `
        <div class="van-image__loading"><i class="van-icon van-icon-photo-o van-image__loading-icon">
            <!----></i></div>
        <div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </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">
            <!----></i></div>
        <div class="van-uploader__preview-cover">https://img.yzcdn.cn/vant/cat.jpeg</div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -99,8 +103,9 @@ exports[`preview-size prop 1`] = `
      <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">
            <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
    <div class="van-uploader__upload" style="width: 30px; height: 30px;"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>
@ -115,29 +120,33 @@ exports[`render preview image 1`] = `
      <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">
            <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
    <div class="van-uploader__preview">
      <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
          <!----></i>
        <div class="van-uploader__file-name van-ellipsis">https://img.yzcdn.cn/vant/test.pdf</div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
    <div class="van-uploader__preview">
      <div class="van-uploader__file"><i class="van-icon van-icon-description van-uploader__file-icon">
          <!----></i>
        <div class="van-uploader__file-name van-ellipsis">test.pdf</div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </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">
            <!----></i></div>
-      </div><i class="van-icon van-icon-clear van-uploader__preview-delete">
-        <!----></i>
+      </div>
+      <div class="van-uploader__preview-delete"><i class="van-icon van-icon-cross van-uploader__preview-delete-icon">
+          <!----></i></div>
    </div>
    <div class="van-uploader__upload"><i class="van-icon van-icon-photograph van-uploader__upload-icon">
        <!----></i><input type="file" accept="image/*" class="van-uploader__input"></div>