style: add van-haptics-feedback class helper (#9774)

2025-04-05 19:41:42 +08:00 · 2021-11-01 17:40:13 +08:00 · 2021-11-01 17:40:13 +08:00 · c5f14d52e5
commit c5f14d52e5
parent 38d2dea1dc
56 changed files with 190 additions and 208 deletions
--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/packages/vant-cli/site/desktop/components/Content.vue
@ -73,7 +73,7 @@ export default {
  > h6 {
    color: @van-doc-black;
    font-weight: normal;
-    line-height: 1.5;
+    line-height: 1.6;

    &[id] {
      cursor: pointer;
@ -83,19 +83,19 @@ export default {
  > h3 {
    margin-bottom: 16px;
    font-weight: 600;
-    font-size: 19px;
+    font-size: 20px;
  }

  > h4 {
    margin: 24px 0 12px;
    font-weight: 600;
-    font-size: 16px;
+    font-size: 18px;
  }

  > h5 {
    margin: 24px 0 12px;
    font-weight: 600;
-    font-size: 15px;
+    font-size: 16px;
  }

  > p,
@ -206,7 +206,6 @@ export default {
    font-family: inherit;
    font-weight: 600;
    word-break: keep-all;
-    background-color: @van-doc-background-color;
    border-radius: 4px;
    -webkit-font-smoothing: antialiased;
  }
@ -248,13 +247,13 @@ export default {

    h1 {
      margin: 0 0 30px;
-      font-size: 30px;
+      font-size: 34px;
      cursor: default;
    }

    h2 {
      margin: 45px 0 20px;
-      font-size: 25px;
+      font-size: 26px;
    }
  }

--- a/packages/vant/src/action-sheet/ActionSheet.tsx
+++ b/packages/vant/src/action-sheet/ActionSheet.tsx
@ -8,6 +8,7 @@ import {
  makeArrayProp,
  makeStringProp,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';

 // Components
@ -73,7 +74,7 @@ export default defineComponent({
            {props.closeable && (
              <Icon
                name={props.closeIcon}
-                class={bem('close')}
+                class={[bem('close'), HAPTICS_FEEDBACK]}
                onClick={onCancel}
              />
            )}
--- a/packages/vant/src/action-sheet/README.md
+++ b/packages/vant/src/action-sheet/README.md
@ -256,7 +256,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - |
 | --van-action-sheet-close-icon-size | _22px_ | - |
 | --van-action-sheet-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-action-sheet-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
 | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
 | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
--- a/packages/vant/src/action-sheet/README.zh-CN.md
+++ b/packages/vant/src/action-sheet/README.zh-CN.md
@ -268,7 +268,6 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - |
 | --van-action-sheet-close-icon-size | _22px_ | - |
 | --van-action-sheet-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-action-sheet-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
 | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
 | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
--- a/packages/vant/src/action-sheet/index.less
+++ b/packages/vant/src/action-sheet/index.less
@ -18,7 +18,6 @@
  --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
  --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
  --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
-  --van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color;
  --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
  --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
  --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
@ -129,9 +128,5 @@
    color: var(--van-action-sheet-close-icon-color);
    font-size: var(--van-action-sheet-close-icon-size);
    line-height: inherit;
-
-    &:active {
-      color: var(--van-action-sheet-close-icon-active-color);
-    }
  }
 }
--- a/packages/vant/src/action-sheet/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/action-sheet/test/snapshots/index.spec.ts.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`should allow to custom close icon with closeIcon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close">
+<i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close van-haptics-feedback">
 </i>
 `;

@ -22,7 +22,7 @@ exports[`should render default slot correctly 1`] = `
  <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet">
    <div class="van-action-sheet__header">
      Title
-      <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close">
+      <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close van-haptics-feedback">
      </i>
    </div>
    <div class="van-action-sheet__content">
--- a/packages/vant/src/action-sheet/var.less
+++ b/packages/vant/src/action-sheet/var.less
@ -16,7 +16,6 @@
@action-sheet-subname-line-height: var(--van-line-height-sm);
@action-sheet-close-icon-size: 22px;
@action-sheet-close-icon-color: var(--van-gray-5);
-@action-sheet-close-icon-active-color: var(--van-gray-6);
@action-sheet-close-icon-padding: 0 var(--van-padding-md);
@action-sheet-cancel-text-color: var(--van-gray-7);
@action-sheet-cancel-padding-top: var(--van-padding-xs);
--- a/packages/vant/src/area/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/area/test/snapshots/demo.spec.ts.snap
@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-area">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -180,7 +180,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-area">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -188,7 +188,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -346,7 +346,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-area">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -354,7 +354,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -425,7 +425,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-area">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -433,7 +433,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
--- a/packages/vant/src/area/test/snapshots/index.spec.js.snap
+++ b/packages/vant/src/area/test/snapshots/index.spec.js.snap
@ -4,12 +4,12 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
 <div class="van-picker van-area">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -52,13 +52,13 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
 exports[`should render title slot correctly 1`] = `
 <div class="van-picker__toolbar">
  <button type="button"
-          class="van-picker__cancel"
+          class="van-picker__cancel van-haptics-feedback"
  >
    Cancel
  </button>
  Custom Title
  <button type="button"
-          class="van-picker__confirm"
+          class="van-picker__confirm van-haptics-feedback"
  >
    Confirm
  </button>
@ -69,12 +69,12 @@ exports[`should render two columns when columns-num prop is two 1`] = `
 <div class="van-picker van-area">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
--- a/packages/vant/src/calendar/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/calendar/test/snapshots/index.spec.ts.snap
@ -633,7 +633,7 @@ exports[`popup wrapper 2`] = `
        </button>
      </div>
    </div>
-    <i class="van-badge__wrapper van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
+    <i class="van-badge__wrapper van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
       role="button"
       tabindex="0"
    >
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@ -13,6 +13,7 @@ import {
  makeArrayProp,
  makeStringProp,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';

 // Components
@ -192,7 +193,7 @@ export default defineComponent({
        {props.closeable ? (
          <Icon
            name={props.closeIcon}
-            class={bem('close-icon')}
+            class={[bem('close-icon'), HAPTICS_FEEDBACK]}
            onClick={onClose}
          />
        ) : null}
--- a/packages/vant/src/cascader/README.md
+++ b/packages/vant/src/cascader/README.md
@ -306,7 +306,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cascader-title-line-height | _20px_ | - |
 | --van-cascader-close-icon-size | _22px_ | - |
 | --van-cascader-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-cascader-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-cascader-selected-icon-size | _18px_ | - |
 | --van-cascader-tabs-height | _48px_ | - |
 | --van-cascader-active-color | _var(--van-danger-color)_ | - |
--- a/packages/vant/src/cascader/README.zh-CN.md
+++ b/packages/vant/src/cascader/README.zh-CN.md
@ -318,7 +318,6 @@ import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';
 | --van-cascader-title-line-height | _20px_ | - |
 | --van-cascader-close-icon-size | _22px_ | - |
 | --van-cascader-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-cascader-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-cascader-selected-icon-size | _18px_ | - |
 | --van-cascader-tabs-height | _48px_ | - |
 | --van-cascader-active-color | _var(--van-danger-color)_ | - |
--- a/packages/vant/src/cascader/index.less
+++ b/packages/vant/src/cascader/index.less
@ -7,7 +7,6 @@
  --van-cascader-title-line-height: @cascader-title-line-height;
  --van-cascader-close-icon-size: @cascader-close-icon-size;
  --van-cascader-close-icon-color: @cascader-close-icon-color;
-  --van-cascader-close-icon-active-color: @cascader-close-icon-active-color;
  --van-cascader-selected-icon-size: @cascader-selected-icon-size;
  --van-cascader-tabs-height: @cascader-tabs-height;
  --van-cascader-active-color: @cascader-active-color;
@ -35,10 +34,6 @@
  &__close-icon {
    color: var(--van-cascader-close-icon-color);
    font-size: var(--van-cascader-close-icon-size);
-
-    &:active {
-      color: var(--van-cascader-close-icon-active-color);
-    }
  }

  &__tabs {
--- a/packages/vant/src/cascader/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/snapshots/index.spec.ts.snap
@ -21,7 +21,7 @@ exports[` should allow more custom content 1`] = `
 `;

 exports[`should change close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon">
+<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
 </i>
 `;

@ -52,7 +52,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
  <div class="van-cascader__header">
    <h2 class="van-cascader__title">
    </h2>
-    <i class="van-badge__wrapper van-icon van-icon-cross van-cascader__close-icon">
+    <i class="van-badge__wrapper van-icon van-icon-cross van-cascader__close-icon van-haptics-feedback">
    </i>
  </div>
  <div class="van-tabs van-tabs--line van-cascader__tabs">
--- a/packages/vant/src/cascader/var.less
+++ b/packages/vant/src/cascader/var.less
@ -6,7 +6,6 @@
@cascader-title-line-height: 20px;
@cascader-close-icon-size: 22px;
@cascader-close-icon-color: var(--van-gray-5);
-@cascader-close-icon-active-color: var(--van-gray-6);
@cascader-selected-icon-size: 18px;
@cascader-tabs-height: 48px;
@cascader-active-color: var(--van-danger-color);
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@ -159,7 +159,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-text-color-secondary: var(--van-gray-6);
 --van-text-link-color: #576b95;
 --van-active-color: var(--van-gray-2);
--van-active-opacity: 0.7;
+--van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background-color: var(--van-gray-1);
 --van-background-color-light: var(--van-white);
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@ -161,7 +161,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-text-color-secondary: var(--van-gray-6);
 --van-text-link-color: #576b95;
 --van-active-color: var(--van-gray-2);
--van-active-opacity: 0.7;
+--van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background-color: var(--van-gray-1);
 --van-background-color-light: var(--van-white);
--- a/packages/vant/src/datetime-picker/test/snapshots/date-picker.spec.ts.snap
+++ b/packages/vant/src/datetime-picker/test/snapshots/date-picker.spec.ts.snap
@ -4,12 +4,12 @@ exports[`filter prop 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -297,12 +297,12 @@ exports[`formatter prop 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
--- a/packages/vant/src/datetime-picker/test/snapshots/datetime-picker.spec.tsx.snap
+++ b/packages/vant/src/datetime-picker/test/snapshots/datetime-picker.spec.tsx.snap
@ -3,13 +3,13 @@
 exports[`should render title slot correctly 1`] = `
 <div class="van-picker__toolbar">
  <button type="button"
-          class="van-picker__cancel"
+          class="van-picker__cancel van-haptics-feedback"
  >
    Cancel
  </button>
  Custom title
  <button type="button"
-          class="van-picker__confirm"
+          class="van-picker__confirm van-haptics-feedback"
  >
    Confirm
  </button>
@ -20,12 +20,12 @@ exports[`time type 1`] = `
 <div class="van-picker van-datetime-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
--- a/packages/vant/src/datetime-picker/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/datetime-picker/test/snapshots/demo.spec.ts.snap
@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
        Choose Date
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -495,7 +495,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -503,7 +503,7 @@ exports[`should render demo and match snapshot 1`] = `
        Choose Year-Month
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -700,7 +700,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -708,7 +708,7 @@ exports[`should render demo and match snapshot 1`] = `
        Choose Month-Day
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -1130,7 +1130,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -1138,7 +1138,7 @@ exports[`should render demo and match snapshot 1`] = `
        Choose Time
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -1812,7 +1812,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -1820,7 +1820,7 @@ exports[`should render demo and match snapshot 1`] = `
        Choose DateTime
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -3070,7 +3070,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -3078,7 +3078,7 @@ exports[`should render demo and match snapshot 1`] = `
        Choose DateHour
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -3782,7 +3782,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -3790,7 +3790,7 @@ exports[`should render demo and match snapshot 1`] = `
        Option Filter
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -4149,7 +4149,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker van-datetime-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -4157,7 +4157,7 @@ exports[`should render demo and match snapshot 1`] = `
        Columns Order
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
--- a/packages/vant/src/datetime-picker/test/snapshots/time-picker.spec.tsx.snap
+++ b/packages/vant/src/datetime-picker/test/snapshots/time-picker.spec.tsx.snap
@ -4,12 +4,12 @@ exports[`filter prop 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -144,12 +144,12 @@ exports[`format initial value 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -221,12 +221,12 @@ exports[`formatter prop 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -361,12 +361,12 @@ exports[`max-hour & max-minute 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
--- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx
+++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
@ -15,6 +15,7 @@ import {
  makeStringProp,
  makeNumericProp,
  createNamespace,
+  HAPTICS_FEEDBACK,
  ComponentInstance,
 } from '../utils';

@ -115,7 +116,7 @@ export default defineComponent({
        <div
          role="button"
          tabindex={disabled ? -1 : 0}
-          class={bem('item', { disabled })}
+          class={[bem('item', { disabled }), { [HAPTICS_FEEDBACK]: !disabled }]}
          onClick={() => {
            if (!disabled) {
              toggleItem(index);
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/packages/vant/src/dropdown-menu/index.less
@ -38,15 +38,7 @@
    min-width: 0; // hack for flex ellipsis
    cursor: pointer;

-    &:active {
-      opacity: var(--van-active-opacity);
-    }
-
    &--disabled {
-      &:active {
-        opacity: 1;
-      }
-
      .van-dropdown-menu__title {
        color: var(--van-dropdown-menu-title-disabled-text-color);
      }
--- a/packages/vant/src/dropdown-menu/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/dropdown-menu/test/snapshots/demo.spec.ts.snap
@ -6,7 +6,7 @@ exports[`should render demo and match snapshot 1`] = `
    <div class="van-dropdown-menu__bar">
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title">
          <div class="van-ellipsis">
@ -16,7 +16,7 @@ exports[`should render demo and match snapshot 1`] = `
      </div>
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title">
          <div class="van-ellipsis">
@ -48,7 +48,7 @@ exports[`should render demo and match snapshot 1`] = `
    <div class="van-dropdown-menu__bar">
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title">
          <div class="van-ellipsis">
@ -58,7 +58,7 @@ exports[`should render demo and match snapshot 1`] = `
      </div>
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title">
          <div class="van-ellipsis">
@ -90,7 +90,7 @@ exports[`should render demo and match snapshot 1`] = `
    <div class="van-dropdown-menu__bar">
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title">
          <div class="van-ellipsis">
@ -100,7 +100,7 @@ exports[`should render demo and match snapshot 1`] = `
      </div>
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title">
          <div class="van-ellipsis">
@ -132,7 +132,7 @@ exports[`should render demo and match snapshot 1`] = `
    <div class="van-dropdown-menu__bar">
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
          <div class="van-ellipsis">
@ -142,7 +142,7 @@ exports[`should render demo and match snapshot 1`] = `
      </div>
      <div role="button"
           tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
      >
        <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
          <div class="van-ellipsis">
--- a/packages/vant/src/dropdown-menu/test/snapshots/index.spec.tsx.snap
+++ b/packages/vant/src/dropdown-menu/test/snapshots/index.spec.tsx.snap
@ -5,7 +5,7 @@ exports[`click option 1`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -15,7 +15,7 @@ exports[`click option 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -82,7 +82,7 @@ exports[`close-on-click-outside 1`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -92,7 +92,7 @@ exports[`close-on-click-outside 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -159,7 +159,7 @@ exports[`destroy one item 1`] = `
  <div class="van-dropdown-menu__bar">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -184,7 +184,7 @@ exports[`direction up 1`] = `
  <div class="van-dropdown-menu__bar">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
        <div class="van-ellipsis">
@ -194,7 +194,7 @@ exports[`direction up 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
        <div class="van-ellipsis">
@ -227,7 +227,7 @@ exports[`direction up 2`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--active">
        <div class="van-ellipsis">
@ -237,7 +237,7 @@ exports[`direction up 2`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
        <div class="van-ellipsis">
@ -304,7 +304,7 @@ exports[`disable close-on-click-outside 1`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
        <div class="van-ellipsis">
@ -314,7 +314,7 @@ exports[`disable close-on-click-outside 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -406,7 +406,7 @@ exports[`render option icon 1`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
        <div class="van-ellipsis">
@ -416,7 +416,7 @@ exports[`render option icon 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -487,7 +487,7 @@ exports[`show dropdown item 1`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
        <div class="van-ellipsis">
@ -497,7 +497,7 @@ exports[`show dropdown item 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -564,7 +564,7 @@ exports[`show dropdown item 2`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -574,7 +574,7 @@ exports[`show dropdown item 2`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
        <div class="van-ellipsis">
@ -675,7 +675,7 @@ exports[`show dropdown item 3`] = `
  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -685,7 +685,7 @@ exports[`show dropdown item 3`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -786,7 +786,7 @@ exports[`title prop 1`] = `
  <div class="van-dropdown-menu__bar">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -796,7 +796,7 @@ exports[`title prop 1`] = `
    </div>
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
@ -829,7 +829,7 @@ exports[`title slot 1`] = `
  <div class="van-dropdown-menu__bar">
    <div role="button"
         tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
    >
      <span class="van-dropdown-menu__title">
        <div class="van-ellipsis">
--- a/packages/vant/src/image-preview/ImagePreview.tsx
+++ b/packages/vant/src/image-preview/ImagePreview.tsx
@ -21,6 +21,7 @@ import {
  makeNumericProp,
  callInterceptor,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';

 // Composables
@ -165,7 +166,10 @@ export default defineComponent({
          <Icon
            role="button"
            name={props.closeIcon}
-            class={bem('close-icon', props.closeIconPosition)}
+            class={[
+              bem('close-icon', props.closeIconPosition),
+              HAPTICS_FEEDBACK,
+            ]}
            onClick={emitClose}
          />
        );
--- a/packages/vant/src/image-preview/README.md
+++ b/packages/vant/src/image-preview/README.md
@ -245,6 +245,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - |
 | --van-image-preview-close-icon-size | _22px_ | - |
 | --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-image-preview-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - |
 | --van-image-preview-close-icon-z-index | _1_ | - |
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@ -297,7 +297,6 @@ imagePreviewRef.value?.swipeTo(1);
 | --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - |
 | --van-image-preview-close-icon-size | _22px_ | - |
 | --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-image-preview-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - |
 | --van-image-preview-close-icon-z-index | _1_ | - |

--- a/packages/vant/src/image-preview/index.less
+++ b/packages/vant/src/image-preview/index.less
@ -8,7 +8,6 @@
  --van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
  --van-image-preview-close-icon-size: @image-preview-close-icon-size;
  --van-image-preview-close-icon-color: @image-preview-close-icon-color;
-  --van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color;
  --van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
  --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
 }
@ -91,10 +90,6 @@
    font-size: var(--van-image-preview-close-icon-size);
    cursor: pointer;

-    &:active {
-      color: var(--van-image-preview-close-icon-active-color);
-    }
-
    &--top-left {
      top: var(--van-image-preview-close-icon-margin);
      left: var(--van-image-preview-close-icon-margin);
--- a/packages/vant/src/image-preview/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/image-preview/test/snapshots/index.spec.ts.snap
@ -27,14 +27,14 @@ exports[`render image 1`] = `
 `;

 exports[`should change close icon position when using close-icon-position prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left"
+<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left van-haptics-feedback"
   role="button"
 >
 </i>
 `;

 exports[`should change close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right"
+<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right van-haptics-feedback"
   role="button"
 >
 </i>
--- a/packages/vant/src/image-preview/var.less
+++ b/packages/vant/src/image-preview/var.less
@ -7,6 +7,5 @@
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
@image-preview-close-icon-size: 22px;
@image-preview-close-icon-color: var(--van-gray-5);
-@image-preview-close-icon-active-color: var(--van-gray-6);
@image-preview-close-icon-margin: var(--van-padding-md);
@image-preview-close-icon-z-index: 1;
--- a/packages/vant/src/nav-bar/NavBar.tsx
+++ b/packages/vant/src/nav-bar/NavBar.tsx
@ -7,6 +7,7 @@ import {
  BORDER_BOTTOM,
  getZIndexStyle,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';

 // Composables
@ -82,7 +83,10 @@ export default defineComponent({
        >
          <div class={bem('content')}>
            {hasLeft && (
-              <div class={bem('left')} onClick={onClickLeft}>
+              <div
+                class={[bem('left'), HAPTICS_FEEDBACK]}
+                onClick={onClickLeft}
+              >
                {renderLeft()}
              </div>
            )}
@ -90,7 +94,10 @@ export default defineComponent({
              {slots.title ? slots.title() : title}
            </div>
            {hasRight && (
-              <div class={bem('right')} onClick={onClickRight}>
+              <div
+                class={[bem('right'), HAPTICS_FEEDBACK]}
+                onClick={onClickRight}
+              >
                {renderRight()}
              </div>
            )}
--- a/packages/vant/src/nav-bar/index.less
+++ b/packages/vant/src/nav-bar/index.less
@ -65,10 +65,6 @@
    padding: 0 var(--van-padding-md);
    font-size: var(--van-font-size-md);
    cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
  }

  &__left {
--- a/packages/vant/src/nav-bar/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/nav-bar/test/snapshots/demo.spec.ts.snap
@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-nav-bar van-hairline--bottom">
    <div class="van-nav-bar__content">
-      <div class="van-nav-bar__left">
+      <div class="van-nav-bar__left van-haptics-feedback">
        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
        </i>
        <span class="van-nav-bar__text">
@ -29,7 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-nav-bar van-hairline--bottom">
    <div class="van-nav-bar__content">
-      <div class="van-nav-bar__left">
+      <div class="van-nav-bar__left van-haptics-feedback">
        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
        </i>
        <span class="van-nav-bar__text">
@ -39,7 +39,7 @@ exports[`should render demo and match snapshot 1`] = `
      <div class="van-nav-bar__title van-ellipsis">
        Title
      </div>
-      <div class="van-nav-bar__right">
+      <div class="van-nav-bar__right van-haptics-feedback">
        <span class="van-nav-bar__text">
          Button
        </span>
@ -50,7 +50,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
  <div class="van-nav-bar van-hairline--bottom">
    <div class="van-nav-bar__content">
-      <div class="van-nav-bar__left">
+      <div class="van-nav-bar__left van-haptics-feedback">
        <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
        </i>
        <span class="van-nav-bar__text">
@ -60,7 +60,7 @@ exports[`should render demo and match snapshot 1`] = `
      <div class="van-nav-bar__title van-ellipsis">
        Title
      </div>
-      <div class="van-nav-bar__right">
+      <div class="van-nav-bar__right van-haptics-feedback">
        <i class="van-badge__wrapper van-icon van-icon-search"
           style="font-size: 18px;"
        >
--- a/packages/vant/src/nav-bar/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/nav-bar/test/snapshots/index.spec.ts.snap
@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`should render left slot correctly 1`] = `
-<div class="van-nav-bar__left">
+<div class="van-nav-bar__left van-haptics-feedback">
  Custom Left
 </div>
 `;

 exports[`should render left slot correctly 2`] = `
-<div class="van-nav-bar__right">
+<div class="van-nav-bar__right van-haptics-feedback">
  Custom Right
 </div>
 `;
--- a/packages/vant/src/number-keyboard/NumberKeyboard.tsx
+++ b/packages/vant/src/number-keyboard/NumberKeyboard.tsx
@ -20,6 +20,7 @@ import {
  makeNumericProp,
  stopPropagation,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';

 // Composables
@ -181,7 +182,11 @@ export default defineComponent({
          {leftSlot && <span class={bem('title-left')}>{leftSlot()}</span>}
          {title && <h2 class={bem('title')}>{title}</h2>}
          {showClose && (
-            <button type="button" class={bem('close')} onClick={onClose}>
+            <button
+              type="button"
+              class={[bem('close'), HAPTICS_FEEDBACK]}
+              onClick={onClose}
+            >
              {closeButtonText}
            </button>
          )}
--- a/packages/vant/src/number-keyboard/index.less
+++ b/packages/vant/src/number-keyboard/index.less
@ -75,10 +75,6 @@
    background-color: transparent;
    border: none;
    cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
  }

  &__sidebar {
--- a/packages/vant/src/number-keyboard/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/number-keyboard/test/snapshots/demo.spec.ts.snap
@ -341,7 +341,7 @@ exports[`should render demo and match snapshot 1`] = `
  >
    <div class="van-number-keyboard__header">
      <button type="button"
-              class="van-number-keyboard__close"
+              class="van-number-keyboard__close van-haptics-feedback"
      >
        Close
      </button>
@ -464,7 +464,7 @@ exports[`should render demo and match snapshot 1`] = `
        Keyboard Title
      </h2>
      <button type="button"
-              class="van-number-keyboard__close"
+              class="van-number-keyboard__close van-haptics-feedback"
      >
        Close
      </button>
--- a/packages/vant/src/number-keyboard/test/snapshots/index.spec.ts.snap
+++ b/packages/vant/src/number-keyboard/test/snapshots/index.spec.ts.snap
@ -24,7 +24,7 @@ exports[`should render title and close button correctly 1`] = `
    Title
  </h2>
  <button type="button"
-          class="van-number-keyboard__close"
+          class="van-number-keyboard__close van-haptics-feedback"
  >
    Close
  </button>
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@ -17,6 +17,7 @@ import {
  makeStringProp,
  makeNumericProp,
  createNamespace,
+  HAPTICS_FEEDBACK,
  BORDER_UNSET_TOP_BOTTOM,
 } from '../utils';

@ -298,7 +299,11 @@ export default defineComponent({
    const renderCancel = () => {
      const text = props.cancelButtonText || t('cancel');
      return (
-        <button type="button" class={bem('cancel')} onClick={cancel}>
+        <button
+          type="button"
+          class={[bem('cancel'), HAPTICS_FEEDBACK]}
+          onClick={cancel}
+        >
          {slots.cancel ? slots.cancel() : text}
        </button>
      );
@ -307,7 +312,11 @@ export default defineComponent({
    const renderConfirm = () => {
      const text = props.confirmButtonText || t('confirm');
      return (
-        <button type="button" class={bem('confirm')} onClick={confirm}>
+        <button
+          type="button"
+          class={[bem('confirm'), HAPTICS_FEEDBACK]}
+          onClick={confirm}
+        >
          {slots.confirm ? slots.confirm() : text}
        </button>
      );
--- a/packages/vant/src/picker/index.less
+++ b/packages/vant/src/picker/index.less
@ -37,10 +37,6 @@
    background-color: transparent;
    border: none;
    cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
  }

  &__confirm {
--- a/packages/vant/src/picker/test/snapshots/cascade.spec.ts.snap
+++ b/packages/vant/src/picker/test/snapshots/cascade.spec.ts.snap
@ -16,12 +16,12 @@ exports[`should move to first option when all options are disabled 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -93,12 +93,12 @@ exports[`should move to next option when default option is disabled 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
--- a/packages/vant/src/picker/test/snapshots/demo.spec.ts.snap
+++ b/packages/vant/src/picker/test/snapshots/demo.spec.ts.snap
@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -87,7 +87,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -95,7 +95,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -169,7 +169,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -177,7 +177,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -284,7 +284,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -292,7 +292,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -387,7 +387,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -395,7 +395,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -451,7 +451,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -459,7 +459,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -557,7 +557,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -565,7 +565,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
@ -704,7 +704,7 @@ exports[`should render demo and match snapshot 1`] = `
  <div class="van-picker">
    <div class="van-picker__toolbar">
      <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
      >
        Cancel
      </button>
@ -712,7 +712,7 @@ exports[`should render demo and match snapshot 1`] = `
        Title
      </div>
      <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
      >
        Confirm
      </button>
--- a/packages/vant/src/picker/test/snapshots/index.spec.tsx.snap
+++ b/packages/vant/src/picker/test/snapshots/index.spec.tsx.snap
@ -148,12 +148,12 @@ exports[`columns-top、columns-bottom prop 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -185,12 +185,12 @@ exports[`not allow html 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -229,12 +229,12 @@ exports[`render option slot with object columns 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -282,12 +282,12 @@ exports[`render option slot with simple columns 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -331,12 +331,12 @@ exports[`set rem item-height 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -384,12 +384,12 @@ exports[`should render confirm/cancel slot correctly 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Custom Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Custom Confirm
    </button>
@ -419,13 +419,13 @@ exports[`should render title slot correctly 1`] = `
 <div class="van-picker">
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    Custom title
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
@ -499,12 +499,12 @@ exports[`toolbar-position prop 1`] = `
  </div>
  <div class="van-picker__toolbar">
    <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
    >
      Cancel
    </button>
    <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
    >
      Confirm
    </button>
--- a/packages/vant/src/popup/Popup.tsx
+++ b/packages/vant/src/popup/Popup.tsx
@ -21,6 +21,7 @@ import {
  makeStringProp,
  callInterceptor,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';

 // Composables
@ -164,7 +165,10 @@ export default defineComponent({
            role="button"
            tabindex={0}
            name={props.closeIcon}
-            class={bem('close-icon', props.closeIconPosition)}
+            class={[
+              bem('close-icon', props.closeIconPosition),
+              HAPTICS_FEEDBACK,
+            ]}
            classPrefix={props.iconPrefix}
            onClick={onClickCloseIcon}
          />
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@ -167,6 +167,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-popup-round-border-radius | _16px_ | - |
 | --van-popup-close-icon-size | _22px_ | - |
 | --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-popup-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-popup-close-icon-margin | _16px_ | - |
 | --van-popup-close-icon-z-index | _1_ | - |
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@ -173,6 +173,5 @@ import type { PopupProps, PopupPosition, PopupCloseIconPosition } from 'vant';
 | --van-popup-round-border-radius | _16px_ | - |
 | --van-popup-close-icon-size | _22px_ | - |
 | --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-popup-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-popup-close-icon-margin | _16px_ | - |
 | --van-popup-close-icon-z-index | _1_ | - |
--- a/packages/vant/src/popup/index.less
+++ b/packages/vant/src/popup/index.less
@ -6,7 +6,6 @@
  --van-popup-round-border-radius: @popup-round-border-radius;
  --van-popup-close-icon-size: @popup-close-icon-size;
  --van-popup-close-icon-color: @popup-close-icon-color;
-  --van-popup-close-icon-active-color: @popup-close-icon-active-color;
  --van-popup-close-icon-margin: @popup-close-icon-margin;
  --van-popup-close-icon-z-index: @popup-close-icon-z-index;
 }
@ -119,10 +118,6 @@
      font-size: var(--van-popup-close-icon-size);
      cursor: pointer;

-      &:active {
-        color: var(--van-popup-close-icon-active-color);
-      }
-
      &--top-left {
        top: var(--van-popup-close-icon-margin);
        left: var(--van-popup-close-icon-margin);
--- a/packages/vant/src/popup/test/snapshots/index.spec.js.snap
+++ b/packages/vant/src/popup/test/snapshots/index.spec.js.snap
@ -7,7 +7,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 </transition-stub>
 <transition-stub>
  <div class="van-popup van-popup--center">
-    <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
+    <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
       role="button"
       tabindex="0"
    >
@ -17,7 +17,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 `;

 exports[`should render correct close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right"
+<i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
   role="button"
   tabindex="0"
 >
--- a/packages/vant/src/popup/var.less
+++ b/packages/vant/src/popup/var.less
@ -5,6 +5,5 @@
@popup-round-border-radius: 16px;
@popup-close-icon-size: 22px;
@popup-close-icon-color: var(--van-gray-5);
-@popup-close-icon-active-color: var(--van-gray-6);
@popup-close-icon-margin: 16px;
@popup-close-icon-z-index: 1;
--- a/packages/vant/src/share-sheet/ShareSheet.tsx
+++ b/packages/vant/src/share-sheet/ShareSheet.tsx
@ -7,6 +7,7 @@ import {
  truthProp,
  makeArrayProp,
  createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';

@ -103,7 +104,7 @@ export default defineComponent({
        <div
          role="button"
          tabindex={0}
-          class={[bem('option'), className]}
+          class={[bem('option'), className, HAPTICS_FEEDBACK]}
          onClick={() => onSelect(option, index)}
        >
          <img src={getIconURL(icon)} class={bem('icon')} />
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@ -64,10 +64,6 @@
    align-items: center;
    cursor: pointer;
    user-select: none;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
  }

  &__icon {
--- a/packages/vant/src/style/base.less
+++ b/packages/vant/src/style/base.less
@ -31,6 +31,10 @@
  padding-bottom: env(safe-area-inset-bottom);
 }

+.van-haptics-feedback:active {
+  opacity: var(--van-active-opacity);
+}
+
 [class*='van-hairline'] {
  &::after {
    .hairline();
--- a/packages/vant/src/style/var.less
+++ b/packages/vant/src/style/var.less
@ -29,7 +29,7 @@
@text-color-secondary: var(--van-gray-6);
@text-link-color: #576b95;
@active-color: var(--van-gray-2);
-@active-opacity: 0.7;
+@active-opacity: 0.6;
@disabled-opacity: 0.5;
@background-color: var(--van-gray-1);
@background-color-light: var(--van-white);
--- a/packages/vant/src/utils/constant.ts
+++ b/packages/vant/src/utils/constant.ts
@ -9,4 +9,6 @@ export const BORDER_SURROUND = `${BORDER}--surround`;
 export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
 export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;

+export const HAPTICS_FEEDBACK = 'van-haptics-feedback';
+
 export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');