tube

components/NumberInput.vue

@@ -1,12 +1,10 @@
 <template>
-  <input 
-    type="text"
+  <input
+    type="number"
     :value="displayValue"
     @input="handleInput"
     @blur="handleBlur"
-    :placeholder="placeholder"
     :class="inputClass"
-    :style="inputStyle"
   />
 </template>
 
@@ -14,109 +12,124 @@
 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的数字'
-    },
+    value: [Number, String],
     inputClass: {
       type: String,
       default: ''
     },
-    inputStyle: {
+    // 输入模式：integer(纯整数), decimal(纯小数), mixed(混合)
+    mode: {
       type: String,
-      default: ''
-    }
+      default: "mixed",
+      validator: (v) => ["integer", "decimal", "mixed"].includes(v),
+    },
+    // 小数位数限制
+    decimalLength: {
+      type: Number,
+      default: 2,
+    },
+    // 最小值
+    min: {
+      type: Number,
+      default: 0,
+    },
+    // 最大值
+    max: {
+      type: Number,
+      default: Infinity,
+    },
   },
   data() {
     return {
-      displayValue: this.value.toString()
+      displayValue: this.value?.toString() || "",
     };
   },
   watch: {
     value(newVal) {
-      // 当外部value变化时更新显示值
-      this.displayValue = newVal.toString();
-    }
+      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');
+      let value = e.detail.value;
       
-      // 处理开头是小数点的情况（添加0前缀）
-      if (filtered.startsWith('.')) {
-        filtered = '0' + filtered;
-      }
+      // 1. 过滤非法字符
+      let filtered = value.replace(/[^\d.]/g, "");
       
-      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));
+      // 2. 处理多余的小数点
+      if (this.mode === "integer") {
+        filtered = filtered.replace(/\./g, ""); // 整数模式删除所有小数点
+      } else {
+        const firstDotIndex = filtered.indexOf(".");
+        if (firstDotIndex !== -1) {
+          // 只保留第一个小数点
+          filtered =
+            filtered.substring(0, firstDotIndex + 1) +
+            filtered.substring(firstDotIndex + 1).replace(/\./g, "");
         }
       }
       
-      // 更新显示值并通知父组件
-      this.displayValue = numValue.toString();
-      this.$emit('input', numValue);
-      this.$emit('change', numValue);
-    }
-  }
-}
+      // 3. 处理前导0
+      if (filtered.startsWith("0") && filtered.length > 1 && !filtered.startsWith("0.")) {
+        filtered = filtered.replace(/^0+/, "0").replace(/^0([^.])/, "$1");
+      }
+      
+      // 4. 处理开头的小数点
+      if (filtered.startsWith(".")) {
+        if (this.mode === "integer") {
+          filtered = "";
+        } else {
+          filtered = "0" + filtered;
+        }
+      }
+      
+      this.displayValue = filtered;
+    },
+    
+    handleBlur() {
+      let value = this.displayValue;
+      
+      // 空值处理
+      if (value === "" || value === ".") {
+        this.$emit("input", "");
+        return;
+      }
+      
+      // 处理结尾的小数点
+      if (value.endsWith(".")) {
+        value = value.slice(0, -1);
+      }
+      
+      // 转换为数字
+      const numValue = Number(value);
+      
+      // 小数位数处理
+      let processedValue = value;
+      if (this.mode !== "integer" && value.includes(".")) {
+        const parts = value.split(".");
+        if (parts[1].length > this.decimalLength) {
+          processedValue = `${parts[0]}.${parts[1].slice(0, this.decimalLength)}`;
+        }
+      }
+      
+      // 范围校验
+      let finalNum = Number(processedValue);
+      if (finalNum < this.min) finalNum = this.min;
+      if (finalNum > this.max) finalNum = this.max;
+      
+      // 更新值
+      this.displayValue = finalNum.toString();
+      this.$emit("input", finalNum);
+    },
+  },
+};
 </script>
+
+<style scoped>
+.number-input {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+</style>