精简优化number组件
parent
eba5090656
commit
7654fc8da7
|
@ -106,39 +106,13 @@ class InputNumber extends Component {
|
||||||
`,
|
`,
|
||||||
// 尺寸
|
// 尺寸
|
||||||
css`
|
css`
|
||||||
@use 'sass:map';
|
:host([size='small']) {
|
||||||
$sizes: (
|
min-width: 72px;
|
||||||
s: (
|
height: 24px;
|
||||||
w: 52px,
|
font-size: 12px;
|
||||||
h: 20px,
|
|
||||||
f: 12px
|
|
||||||
),
|
|
||||||
m: (
|
|
||||||
w: 72px,
|
|
||||||
h: 24px,
|
|
||||||
f: 12px
|
|
||||||
),
|
|
||||||
xl: (
|
|
||||||
w: 132px,
|
|
||||||
h: 36px,
|
|
||||||
f: 14px
|
|
||||||
),
|
|
||||||
xxl: (
|
|
||||||
w: 160px,
|
|
||||||
h: 44px,
|
|
||||||
f: 16px
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
@loop $s, $v in $sizes {
|
button {
|
||||||
:host([size='#{$s}']) {
|
width: 26px;
|
||||||
min-width: map.get($v, 'w');
|
|
||||||
height: map.get($v, 'h');
|
|
||||||
font-size: map.get($v, 'f');
|
|
||||||
|
|
||||||
button {
|
|
||||||
width: map.get($v, 'h') + 2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -160,9 +134,7 @@ class InputNumber extends Component {
|
||||||
info: 'blue',
|
info: 'blue',
|
||||||
success: 'green',
|
success: 'green',
|
||||||
warning: 'orange',
|
warning: 'orange',
|
||||||
danger: 'red',
|
danger: 'red'
|
||||||
secondary: 'dark',
|
|
||||||
help: 'grey'
|
|
||||||
);
|
);
|
||||||
|
|
||||||
@loop $t, $c in $colors {
|
@loop $t, $c in $colors {
|
||||||
|
@ -225,7 +197,17 @@ class InputNumber extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
#fetch(value) {
|
#fetch(value) {
|
||||||
|
let now = Date.now()
|
||||||
|
let { lazy } = this
|
||||||
this.value = value
|
this.value = value
|
||||||
|
|
||||||
|
// 并发拦截
|
||||||
|
if (lazy && now - this.#stamp < lazy) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.#stamp = now
|
||||||
|
|
||||||
this.$emit('input')
|
this.$emit('input')
|
||||||
this.$emit('change')
|
this.$emit('change')
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue