实验室 面基输入限制 整数4位 小数2位 .00 . .0会自动抹掉

src/views/integratedManagement/laboratoryManagement/subject/addSubject.vue

@@ -71,8 +71,8 @@
             style="width:320px;"
             v-model="form.subArea"
             placeholder="请输入面积"
-            oninput="value=value.replace(/[^0-9.]/g,'')"
-            maxlength="4"
+            @input="handleAreaInput"
+            @blur="blurInput"
             size="small">
             <template slot="append">M²</template>
           </el-input>
@@ -453,6 +453,57 @@ import { chemicalMsdsEdit } from '@/api/chemicalManage'
         }
       },
       methods:{
+        blurInput(){
+          let filteredValue = this.form.subArea
+          // 2. 拆分整数和小数部分
+          const parts = filteredValue.split('.');
+          // 3. 处理小数部分规则
+          if (parts.length > 1) {
+            const decimalPart = parts[1].slice(0, 2);
+            // 规则1：小数部分不能是00
+            // 规则2：小数点后必须有数字
+            if (decimalPart === '0') {
+              filteredValue = parts[0];  // 转为整数
+            }else if (decimalPart === '00') {
+              filteredValue = parts[0];  // 转为整数
+            } else if (decimalPart === '') {
+              filteredValue = parts[0];  // 移除单独的小数点
+            } else {
+              filteredValue = `${parts[0]}.${decimalPart}`;
+            }
+          }
+          // 4. 处理纯0开头的整数（如00.12 → 0.12）
+          if (/^0+[1-9]/.test(filteredValue)) {
+            filteredValue = filteredValue.replace(/^0+/, '');
+          }
+
+          // 5. 更新数据
+          this.$nextTick(() => {
+            this.form.subArea = filteredValue;
+          });
+        },
+        handleAreaInput(value) {
+          // 1. 过滤非法字符并处理多个小数点
+          let filteredValue = value
+            .replace(/[^\d.]/g, '')            // 只保留数字和小数点
+            .replace(/(\..*)\./g, '$1')        // 禁止输入多个小数点
+            .replace(/^\./g, '0.')             // 小数点开头自动补零
+            .replace(/(-\d+\.\d{2})\d+/, '$1') // 禁止输入超过两位小数
+            .replace(/^(\d{4})\d+/, '$1') // 限制整数部分最多4位
+
+          // 2. 分离整数和小数部分处理
+          const parts = filteredValue.split('.')
+          if (parts.length > 1) {
+            // 截断小数部分到两位
+            parts[1] = parts[1].slice(0, 2)
+            filteredValue = parts.join('.')
+          }
+
+          // 3. 更新模型数据（需要 nextTick 保持光标位置）
+          this.$nextTick(() => {
+            this.form.subArea = filteredValue
+          })
+        },
         LevelClick(){
           this.$set(this,'dialogLevelVisible',true);
         },