Skip to content

Commit 96e1e8b

Browse files
committed
fix
1 parent 6f61e01 commit 96e1e8b

File tree

2 files changed

+50
-44
lines changed

2 files changed

+50
-44
lines changed

src/components/Stepper/index.scss

Lines changed: 35 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,6 @@
1313
}
1414
}
1515

16-
17-
18-
1916
$baseClass: 'vant-stepper';
2017
.step-container {
2118
display: flex;
@@ -24,7 +21,7 @@ $baseClass: 'vant-stepper';
2421
input {
2522
margin: 0px 2px;
2623
border-radius: 5px;
27-
font-size: 20px;
24+
font-size: 10px;
2825
border: none;
2926
display: flex;
3027
justify-content: center;
@@ -34,25 +31,31 @@ $baseClass: 'vant-stepper';
3431
}
3532
button {
3633
border-radius: 5px;
37-
font-size: 25px;
34+
font-size: 20px;
3835
outline: none;
3936
background-color: rgba(128, 128, 128, 0.137);
4037
border: none;
4138
font-weight: 100;
39+
text-align: center;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
padding: 0px;
44+
margin: 0;
4245
}
43-
.load-background{
46+
.load-background {
4447
display: inline-block;
4548
border: 4px solid rgba(0, 0, 0, 0.1);
4649
border-left-color: white;
4750
border-radius: 50%;
48-
width: 35px;
49-
height: 35px;
51+
width: 25px;
52+
height: 25px;
5053
animation: donut-spin 1.2s linear infinite;
5154
position: relative;
52-
55+
5356
opacity: 0;
5457
}
55-
.load{
58+
.load {
5659
width: 85px;
5760
height: 85px;
5861
position: absolute;
@@ -65,13 +68,16 @@ $baseClass: 'vant-stepper';
6568
margin: auto;
6669
opacity: 0;
6770
}
68-
6971
}
7072

7173
button.#{$baseClass} {
72-
width: 50px;
73-
height: 50px;
74-
74+
width: 25px;
75+
height: 25px;
76+
text-align: center;
77+
display: flex;
78+
justify-content: center;
79+
align-items: center;
80+
margin: auto;
7581

7682
&__disabled {
7783
cursor: not-allowed;
@@ -83,21 +89,26 @@ button.#{$baseClass} {
8389
}
8490
}
8591
input.#{$baseClass} {
86-
width: 55px;
87-
height: 50px;
92+
width: 30px;
93+
height: 25px;
8894

89-
&__disabled {
95+
&__disableInput {
9096
cursor: not-allowed;
9197
opacity: $button-disabled-opacity;
9298
}
9399
&__theme {
94100
border-radius: 50%;
101+
95102
}
96-
97-
98103
}
99-
100-
101-
102-
103-
104+
.step-container button p {
105+
display: flex;
106+
justify-content: center;
107+
align-items: center;
108+
text-align: center;
109+
height: inherit;
110+
width: inherit;
111+
padding: 0;
112+
font-size: 20px;
113+
margin: 0;
114+
}

src/components/Stepper/index.tsx

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default function Stepper({
4848
style: {}
4949
};
5050
const inputProps = {
51-
className: classnames(baseClass, [{}]),
51+
className: classnames(baseClass, [{ disableInput }]),
5252
style: {}
5353
};
5454

@@ -119,20 +119,24 @@ export default function Stepper({
119119
}
120120
};
121121
useEffect(() => {
122-
if (value === 0 || value === min) {
123-
setIsMinus(true);
124-
} else if (value === max) {
122+
if (disabled) {
125123
setIsPlus(true);
124+
setIsMinus(true);
126125
} else {
127-
setIsMinus(false);
128-
setIsPlus(false);
126+
if (value === 0 || value === min) {
127+
setIsMinus(true);
128+
} else if (value === max) {
129+
setIsPlus(true);
130+
} else {
131+
setIsMinus(false);
132+
setIsPlus(false);
133+
}
129134
}
130-
}, [value, max, min]);
135+
}, [disabled, value, max, min, handleDecrementProps, handleIncrementBtProps]);
131136

132137
if (disabled) {
133138
Object.assign(handleDecrementProps, { disabled });
134139
Object.assign(handleIncrementBtProps, { disabled });
135-
Object.assign(inputProps, { disabled });
136140
}
137141
if (theme) {
138142
Object.assign(handleIncrementBtProps, {
@@ -187,18 +191,9 @@ export default function Stepper({
187191
useEffect(() => {
188192
if (disableInput) {
189193
setIsInput(true);
194+
Object.assign(inputProps, { disabled });
190195
}
191196
}, [disableInput]);
192-
useEffect(() => {
193-
if (disabled) {
194-
setIsMinus(true);
195-
}
196-
}, [disabled]);
197-
useEffect(() => {
198-
if (disabled) {
199-
setIsPlus(true);
200-
}
201-
}, [disabled]);
202197

203198
return (
204199
<div className='step-container'>
@@ -207,7 +202,7 @@ export default function Stepper({
207202
{...handleDecrementProps}
208203
disabled={isMinus}
209204
>
210-
-
205+
<p>-</p>
211206
</button>
212207
<input
213208
value={value}
@@ -221,7 +216,7 @@ export default function Stepper({
221216
{...handleIncrementBtProps}
222217
disabled={isPlus}
223218
>
224-
+
219+
<p>+</p>
225220
</button>
226221
{loading && (
227222
<div id='loading-background' className='load'>

0 commit comments

Comments
 (0)