92 lines
1.6 KiB
Vue
92 lines
1.6 KiB
Vue
<template>
|
|
<input
|
|
type="number"
|
|
:value="modelValue"
|
|
@input="handleInput"
|
|
@focus="onFocus"
|
|
:step="step"
|
|
:min="min"
|
|
:max="max"
|
|
:placeholder="placeholder"
|
|
:class="['number-input', { 'full-width': fullWidth }]"
|
|
/>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { NumberInputProps, NumberInputEmits } from './types'
|
|
|
|
const props = withDefaults(defineProps<NumberInputProps>(), {
|
|
step: 0.1,
|
|
fullWidth: false
|
|
})
|
|
|
|
const emit = defineEmits<NumberInputEmits>()
|
|
|
|
const handleInput = (e: Event) => {
|
|
const target = e.target as HTMLInputElement
|
|
const value = parseFloat(target.value)
|
|
if (!isNaN(value)) {
|
|
emit('update:modelValue', value)
|
|
}
|
|
}
|
|
|
|
const onFocus = (e: Event) => {
|
|
(e.target as HTMLInputElement).select()
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.number-input {
|
|
width: 100%;
|
|
min-width: 30px;
|
|
|
|
height: 16px;
|
|
background: #2d2d2d;
|
|
border: 1px solid #4a4a4a;
|
|
border-radius: 2px;
|
|
color: #cccccc;
|
|
font-size: 11px;
|
|
padding: 0 3px;
|
|
text-align: right;
|
|
outline: none;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.number-input.full-width {
|
|
max-width: none;
|
|
}
|
|
|
|
.number-input:focus {
|
|
border-color: #409eff;
|
|
background: #353535;
|
|
}
|
|
|
|
.number-input:hover {
|
|
border-color: #5a5a5a;
|
|
}
|
|
|
|
/* 隐藏数字输入框的箭头 */
|
|
.number-input::-webkit-outer-spin-button,
|
|
.number-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.number-input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
/* 容器自适应 */
|
|
@container (max-width: 200px) {
|
|
.number-input {
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 250px) {
|
|
.number-input {
|
|
max-width: none;
|
|
}
|
|
}
|
|
</style> |