NumberInput

components/NumberInput.vue

@@ -0,0 +1,122 @@
+<template>
+  <input 
+    type="text"
+    :value="displayValue"
+    @input="handleInput"
+    @blur="handleBlur"
+    :placeholder="placeholder"
+    :class="inputClass"
+    :style="inputStyle"
+  />
+</template>
+
+<script>
+export default {
+  name: "NumberInput",
+  props: {
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    min: {
+      type: Number,
+      default: 0.001
+    },
+    max: {
+      type: Number,
+      default: 100000
+    },
+    placeholder: {
+      type: String,
+      default: '请输入大于0的数字'
+    },
+    inputClass: {
+      type: String,
+      default: ''
+    },
+    inputStyle: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      displayValue: this.value.toString()
+    };
+  },
+  watch: {
+    value(newVal) {
+      // 当外部value变化时更新显示值
+      this.displayValue = newVal.toString();
+    }
+  },
+  methods: {
+    handleInput(e) {
+      const rawValue = e.detail.value;
+      let filtered = rawValue
+        // 移除非数字和小数点的字符
+        .replace(/[^\d.]/g, '')
+        // 只保留第一个小数点
+        .replace(/(\.+)/g, '.')
+        .replace(/(\..*)\./g, '$1')
+        // 避免以0开头（0后面没有小数点的情况）
+        .replace(/^0+(\d)/, '$1');
+      
+      // 处理开头是小数点的情况（添加0前缀）
+      if (filtered.startsWith('.')) {
+        filtered = '0' + filtered;
+      }
+      
+      this.displayValue = filtered;
+      this.$emit('input', filtered);
+    },
+    
+    handleBlur() {
+      let finalValue = this.displayValue;
+      
+      // 空值处理
+      if (!finalValue) {
+        finalValue = this.min.toString();
+      }
+      
+      // 处理以小数点结尾的情况
+      if (finalValue.endsWith('.')) {
+        finalValue = finalValue.slice(0, -1);
+      }
+      
+      // 转换为数字
+      let numValue = parseFloat(finalValue);
+      
+      // 验证数字有效性
+      if (isNaN(numValue)) {
+        numValue = this.min;
+      }
+      
+      // 边界校验
+      if (numValue <= 0) {
+        numValue = this.min;
+      } else if (numValue > this.max) {
+        numValue = this.max;
+      } else if (numValue < this.min) {
+        numValue = this.min;
+      }
+      
+      // 小数位处理（最多3位）
+      const numStr = numValue.toString();
+      const decimalIndex = numStr.indexOf('.');
+      if (decimalIndex !== -1) {
+        const decimalPart = numStr.slice(decimalIndex + 1);
+        if (decimalPart.length > 3) {
+          // 直接截断而非四舍五入
+          numValue = parseFloat(numStr.substring(0, decimalIndex + 4));
+        }
+      }
+      
+      // 更新显示值并通知父组件
+      this.displayValue = numValue.toString();
+      this.$emit('input', numValue);
+      this.$emit('change', numValue);
+    }
+  }
+}
+</script>