diff --git a/packages/vant/src/stepper/README.md b/packages/vant/src/stepper/README.md index 1bed8f99b..c5e030247 100644 --- a/packages/vant/src/stepper/README.md +++ b/packages/vant/src/stepper/README.md @@ -173,7 +173,6 @@ The component provides the following CSS variables, which can be used to customi | Name | Default Value | Description | | --- | --- | --- | -| --van-stepper-active-color | _#e8e8e8_ | - | | --van-stepper-background-color | _var(--van-active-color)_ | - | | --van-stepper-button-icon-color | _var(--van-text-color)_ | - | | --van-stepper-button-disabled-color | _var(--van-background-color)_ | - | diff --git a/packages/vant/src/stepper/README.zh-CN.md b/packages/vant/src/stepper/README.zh-CN.md index c56bfbc4f..ac3b6fb09 100644 --- a/packages/vant/src/stepper/README.zh-CN.md +++ b/packages/vant/src/stepper/README.zh-CN.md @@ -193,7 +193,6 @@ import type { StepperTheme, StepperProps } from 'vant'; | 名称 | 默认值 | 描述 | | --- | --- | --- | -| --van-stepper-active-color | _#e8e8e8_ | - | | --van-stepper-background-color | _var(--van-active-color)_ | - | | --van-stepper-button-icon-color | _var(--van-text-color)_ | - | | --van-stepper-button-disabled-color | _var(--van-background-color)_ | - | diff --git a/packages/vant/src/stepper/Stepper.tsx b/packages/vant/src/stepper/Stepper.tsx index ebcb7bfa5..2d4026d0d 100644 --- a/packages/vant/src/stepper/Stepper.tsx +++ b/packages/vant/src/stepper/Stepper.tsx @@ -23,6 +23,7 @@ import { createNamespace, callInterceptor, makeNumericProp, + HAPTICS_FEEDBACK, } from '../utils'; // Composables @@ -297,7 +298,10 @@ export default defineComponent({ v-show={props.showMinus} type="button" style={buttonStyle.value} - class={bem('minus', { disabled: minusDisabled.value })} + class={[ + bem('minus', { disabled: minusDisabled.value }), + { [HAPTICS_FEEDBACK]: !minusDisabled.value }, + ]} {...createListeners('minus')} /> diff --git a/packages/vant/src/stepper/index.less b/packages/vant/src/stepper/index.less index fed44b85e..627a6afac 100644 --- a/packages/vant/src/stepper/index.less +++ b/packages/vant/src/stepper/index.less @@ -1,7 +1,6 @@ @import './var.less'; :root { - --van-stepper-active-color: @stepper-active-color; --van-stepper-background-color: @stepper-background-color; --van-stepper-button-icon-color: @stepper-button-icon-color; --van-stepper-button-disabled-color: @stepper-button-disabled-color; @@ -55,18 +54,10 @@ content: ''; } - &:active { - background-color: var(--van-stepper-active-color); - } - &--disabled { color: var(--van-stepper-button-disabled-icon-color); background-color: var(--van-stepper-button-disabled-color); cursor: not-allowed; - - &:active { - background-color: var(--van-stepper-button-disabled-color); - } } } @@ -123,15 +114,9 @@ .van-stepper__minus { border-radius: 100%; - &:active { - opacity: var(--van-active-opacity); - } - &--disabled { - &, - &:active { - opacity: 0.3; - } + opacity: 0.3; + cursor: not-allowed; } } diff --git a/packages/vant/src/stepper/var.less b/packages/vant/src/stepper/var.less index 79df7edb0..8024fa257 100644 --- a/packages/vant/src/stepper/var.less +++ b/packages/vant/src/stepper/var.less @@ -1,6 +1,5 @@ @import '../style/var.less'; -@stepper-active-color: #e8e8e8; @stepper-background-color: var(--van-active-color); @stepper-button-icon-color: var(--van-text-color); @stepper-button-disabled-color: var(--van-background-color);