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

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;
     }
   }
 

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}
               />
             )}

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)_ | - |

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)_ | - |

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);
-    }
   }
 }

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">

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);

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>

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>

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"
     >

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}

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)_ | - |

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)_ | - |

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 {

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">

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);

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);

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);

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>

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>

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>

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>

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);

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);
       }

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">

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">

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}
           />
         );

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_ | - |

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_ | - |
 

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);

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>

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;

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>
             )}

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 {

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;"
         >

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>
 `;

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>
           )}

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 {

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>

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>

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>
       );

packages/vant/src/picker/index.less

@@ -37,10 +37,6 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__confirm {

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>

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>

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>

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}
           />

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_ | - |

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_ | - |

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);

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"
 >

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;

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')} />

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 {

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();

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);

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');