init

src/components/BasicControls/Input/index.vue

@@ -0,0 +1,92 @@
+<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>