Skip to content

Commit 2767e20

Browse files
xingyan95kagol
xingyan95
authored and
kagol
committed
feat(InputNumber): 新增精度控制&Input框相关方法
1 parent 93d0fe9 commit 2767e20

File tree

8 files changed

+431
-242
lines changed

8 files changed

+431
-242
lines changed

‎packages/devui-vue/devui/input-number/src/input-number-icons.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { useNamespace } from '../../shared/hooks/use-namespace';
2+
3+
const ns = useNamespace('input-number');
4+
5+
export function IncIcon(): JSX.Element {
6+
return (
7+
<svg class={ns.e('icon-arrow')} width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
8+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
9+
<path
10+
d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 \
11+
L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 \
12+
4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 \
13+
12.2402148,6.7597852 12.1464466,6.85355339 Z"
14+
fill-rule="nonzero"></path>
15+
</g>
16+
</svg>
17+
);
18+
}
19+
20+
export function DecIcon(): JSX.Element {
21+
return (
22+
<svg class={ns.e('icon-arrow')} width="1em" height="1em" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
23+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
24+
<path
25+
d="M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466 \
26+
L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842 \
27+
4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 \
28+
12.2402148,6.7597852 12.1464466,6.85355339 Z"
29+
fill-rule="nonzero"></path>
30+
</g>
31+
</svg>
32+
);
33+
}

‎packages/devui-vue/devui/input-number/src/input-number-types.ts‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export const inputNumberProps = {
1212
},
1313
step: {
1414
type: Number,
15-
default: 0,
15+
default: 1,
1616
},
1717
max: {
1818
type: Number,
@@ -28,27 +28,38 @@ export const inputNumberProps = {
2828
},
2929
modelValue: {
3030
type: Number,
31-
default: 0,
31+
},
32+
precision: {
33+
type: Number,
3234
},
3335
} as const;
3436

3537
export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>;
3638

39+
export interface IState {
40+
currentValue: number | string | undefined;
41+
userInputValue: number | string | undefined;
42+
}
43+
44+
export interface UseExpose {
45+
inputRef: Ref<HTMLElement>;
46+
}
47+
3748
export interface UseRender {
38-
isFocus: Ref<boolean>;
39-
wrapClass: ComputedRef<Record<string, boolean>>;
40-
controlButtonClass: ComputedRef<Record<string, boolean>>;
41-
inputWrapClass: string;
49+
wrapClass: ComputedRef<unknown[]>;
50+
customStyle: unknown;
51+
otherAttrs: unknown;
52+
controlButtonsClass: ComputedRef<Record<string, boolean>>;
53+
inputWrapClass: ComputedRef<Record<string, boolean>>;
4254
inputInnerClass: ComputedRef<Record<string, boolean>>;
4355
}
4456

4557
export interface UseEvent {
46-
inputVal: Ref<number>;
58+
inputVal: ComputedRef<number | string>;
59+
minDisabled: ComputedRef<boolean>;
60+
maxDisabled: ComputedRef<boolean>;
4761
onAdd: () => void;
4862
onSubtract: () => void;
4963
onInput: (val: Event) => void;
50-
onFocus: (event: Event) => void;
51-
onBlur: (event: Event) => void;
5264
onChange: (event: Event) => void;
53-
onKeydown: (event: KeyboardEvent) => void;
5465
}

‎packages/devui-vue/devui/input-number/src/input-number.scss‎

Lines changed: 122 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -4,53 +4,28 @@
44
position: relative;
55
display: inline-block;
66
width: 80px;
7-
line-height: 38px;
8-
margin-right: 12px;
97

10-
&:hover:not(.#{$devui-prefix}-input-number--disabled) {
11-
.#{$devui-prefix}-input-number__input-box {
12-
border-color: var(--devui-form-control-line-hover);
8+
&:hover {
9+
.#{$devui-prefix}-input-number__input-box:not(.disabled) {
10+
border: 1px solid $devui-form-control-line-hover;
11+
padding-right: 24px;
1312
}
1413

15-
.#{$devui-prefix}-input-number__control-button:not(.disabled) {
14+
.#{$devui-prefix}-input-number__control-buttons:not(.disabled) {
1615
display: flex;
17-
border-color: var(--devui-form-control-line-hover);
16+
border-color: $devui-form-control-line-hover;
1817
}
1918
}
2019

2120
&:focus-within {
22-
.#{$devui-prefix}-input-number__control-button {
23-
display: flex;
24-
}
25-
}
26-
27-
.active {
28-
border: 1px solid var(--devui-form-control-line-active) !important;
29-
display: flex !important;
30-
}
31-
32-
&.#{$devui-prefix}-input-number--disabled {
33-
.#{$devui-prefix}-subtract,
34-
.#{$devui-prefix}-add,
35-
.#{$devui-prefix}-input-number__input-style {
36-
cursor: not-allowed;
37-
border-color: #e4e7ed;
38-
color: #e4e7ed;
21+
.#{$devui-prefix}-input-number__input-box:not(.disabled) {
22+
border: 1px solid $devui-form-control-line-active;
23+
padding-right: 24px;
3924
}
4025

41-
.#{$devui-prefix}-input-number__input-style {
42-
border-color: var(--devui-disabled-line) !important;
43-
color: var(--devui-disabled-text) !important;
44-
background-color: var(--devui-disabled-bg) !important;
45-
}
46-
}
47-
48-
&.#{$devui-prefix}-input-number--sm {
49-
width: 60px;
50-
51-
.#{$devui-prefix}-input-number__input-box {
52-
height: 26px;
53-
line-height: 26px;
26+
.#{$devui-prefix}-input-number__control-buttons:not(.disabled) {
27+
display: flex;
28+
border-color: $devui-form-control-line-active;
5429
}
5530
}
5631

@@ -63,97 +38,34 @@
6338
}
6439
}
6540

66-
&.#{$devui-prefix}-input-number--lg {
67-
width: 100px;
68-
69-
.#{$devui-prefix}-input-number__input-box {
70-
height: 38px;
71-
line-height: 38px;
72-
}
73-
}
74-
75-
.#{$devui-prefix}-input-number__input-wrap {
76-
line-height: 100%;
77-
}
78-
79-
.#{$devui-prefix}-input-number__input-style::-webkit-outer-spin-button,
80-
.#{$devui-prefix}-input-number__input-style::-webkit-inner-spin-button {
81-
-webkit-appearance: none;
82-
margin: 0;
83-
}
84-
85-
.#{$devui-prefix}-add,
86-
.#{$devui-prefix}-subtract {
87-
display: inline-block;
88-
width: 50px;
89-
height: 38px;
90-
line-height: 38px;
91-
text-align: center;
92-
font-size: 16px;
93-
color: #333333;
94-
background: #f5f7fa;
95-
cursor: pointer;
96-
border: 1px solid #dcdfe6;
97-
}
98-
99-
.#{$devui-prefix}-add {
100-
float: right;
101-
margin-left: -1px;
102-
border-radius: 0 4px 4px 0;
103-
}
104-
105-
.#{$devui-prefix}-subtract {
106-
float: left;
107-
margin-right: -1px;
108-
border-radius: 4px 0 0 4px;
109-
}
110-
111-
.#{$devui-prefix}-input-number__input-style {
112-
display: block;
113-
-moz-appearance: textfield;
114-
}
115-
116-
.#{$devui-prefix}-input-number__input-style {
117-
outline: none;
118-
background-color: var(--devui-base-bg);
119-
border: 1px solid var(--devui-form-control-line);
120-
border-radius: var(--devui-border-radius);
121-
padding: 4px 8px;
122-
line-height: 18px;
123-
font-size: var(--devui-font-size);
124-
color: var(--devui-text);
125-
width: 100%;
126-
display: block;
127-
cursor: text;
128-
height: 28px;
129-
transition: border-color 0.3s var(--devui-animation-ease-in-out-smooth);
130-
}
131-
13241
.#{$devui-prefix}-input-number__input-box {
13342
box-sizing: border-box;
13443
padding: 4px 8px;
135-
font-size: var(--devui-font-size);
136-
vertical-align: middle;
137-
border-radius: var(--devui-border-radius);
44+
font-size: $devui-font-size;
45+
border-radius: $devui-border-radius;
46+
border: 1px solid $devui-form-control-line;
13847
outline: none;
13948
width: 100%;
14049
line-height: 20px;
14150
height: 28px;
142-
border-width: 1px;
143-
border-style: solid;
51+
display: block;
52+
cursor: text;
53+
-moz-appearance: textfield;
54+
transition: border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
14455

14556
&:not(.disabled) {
146-
background-color: var(--devui-base-bg);
147-
border-color: var(--devui-line);
148-
color: var(--devui-text);
57+
background-color: $devui-base-bg;
58+
border-color: $devui-line;
59+
color: $devui-text;
14960
}
150-
}
15161

152-
.disabled {
153-
cursor: not-allowed;
62+
&::-webkit-inner-spin-button,
63+
&::-webkit-outer-spin-button {
64+
-webkit-appearance: none;
65+
}
15466
}
15567

156-
.#{$devui-prefix}-input-number__control-button {
68+
.#{$devui-prefix}-input-number__control-buttons {
15769
display: none;
15870
position: absolute;
15971
right: 0;
@@ -162,17 +74,107 @@
16274
flex-direction: column;
16375
justify-content: center;
16476
align-items: center;
165-
border-left: 1px solid var(--devui-line);
77+
border: 1px solid transparent;
78+
border-left-color: $devui-line;
16679
box-sizing: border-box;
16780
line-height: 100%;
168-
border-radius: 0 var(--devui-border-radius) var(--devui-border-radius) 0;
81+
border-radius: 0 $devui-border-radius $devui-border-radius 0;
16982

170-
&:not(.disabled) {
171-
cursor: pointer;
83+
&.disabled {
84+
border-left-color: $devui-disabled-line;
17285
}
17386

174-
& > span {
87+
.control-button {
88+
user-select: none;
89+
box-sizing: border-box;
90+
height: 50%;
91+
line-height: 50%;
92+
border-width: 0 1px;
93+
transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out-smooth;
17594
display: flex;
95+
justify-content: center;
96+
align-items: center;
97+
background-color: $devui-base-bg;
98+
99+
&.control-inc svg {
100+
position: relative;
101+
top: 2px;
102+
transform: rotate(180deg);
103+
}
104+
105+
&.control-dec svg {
106+
position: relative;
107+
bottom: 2px;
108+
}
109+
110+
svg path {
111+
fill: $devui-text-weak;
112+
}
113+
114+
&:not(.disabled) {
115+
cursor: pointer;
116+
117+
&:hover {
118+
& > svg path {
119+
fill: $devui-icon-fill-active-hover;
120+
}
121+
}
122+
}
123+
124+
&.disabled {
125+
& > svg path {
126+
fill: $devui-disabled-text;
127+
}
128+
}
129+
}
130+
}
131+
132+
.#{$devui-prefix}-input-number--lg {
133+
& > .#{$devui-prefix}-input-number__input-box {
134+
font-size: $devui-font-size-lg;
135+
line-height: 24px;
136+
height: 46px;
137+
}
138+
139+
&.#{$devui-prefix}-input-number__control-buttons .control-button .#{$devui-prefix}-input-number__icon-arrow {
140+
width: 16px;
141+
height: 16px;
176142
}
177143
}
144+
145+
.#{$devui-prefix}-input-number--md {
146+
& > .#{$devui-prefix}-input-number__input-box {
147+
font-size: $devui-font-size;
148+
line-height: 20px;
149+
height: 28px;
150+
}
151+
}
152+
153+
.#{$devui-prefix}-input-number--sm {
154+
& > .#{$devui-prefix}-input-number__input-box {
155+
font-size: $devui-font-size-sm;
156+
line-height: 18px;
157+
height: 26px;
158+
}
159+
160+
&.#{$devui-prefix}-input-number__control-buttons .control-button {
161+
&:first-child .#{$devui-prefix}-input-number__icon-arrow {
162+
width: 14px;
163+
height: 14px;
164+
}
165+
166+
&:last-child .#{$devui-prefix}-input-number__icon-arrow {
167+
width: 14px;
168+
height: 14px;
169+
}
170+
}
171+
}
172+
173+
.#{$devui-prefix}-input-number__input-wrap {
174+
line-height: 100%;
175+
}
176+
177+
.disabled {
178+
cursor: not-allowed;
179+
}
178180
}

0 commit comments

Comments
 (0)