matrix_components 2.0.359 → 2.0.360

package/README.md

@@ -1,6 +1,13 @@
 # **组件库2.0**
 组件使用示例参考dist/ComponentDemo
 
+```
+version:2.0.360
+2025-11-29
+更新日志：
+1.增加数值范围指令 v-length.range="{ min: 0, max: 100, int: true, maxLength: 10 }"
+```
+
 ```
 version:2.0.352
 2025-11-28

package/dist/ComponentDemo/Test.vue

@@ -31,7 +31,7 @@
         <span>当前: "{{ numberInput }}" ({{ numberInput.length }}/8)</span>
       </div>
 
-      <h3>正则模式 - v-length.regex</h3>
+      <h3>正则模式（不支持小数，使用v-length.range） - v-length.regex</h3>
       <div class="input-group">
         <label>字母数字，限制6位:</label>
         <el-input
@@ -42,6 +42,87 @@
         />
         <span>当前: "{{ regexInput }}" ({{ regexInput.length }}/6)</span>
       </div>
+
+      <h3>范围模式 - v-length.range</h3>
+      <div class="input-group">
+        <label>数字范围 0-100:</label>
+        <el-input
+          v-model="rangeInput1"
+          v-length.range="{ min: 0, max: 100 }"
+          placeholder="输入0-100之间的数字"
+          style="width: 300px;"
+        />
+        <span>当前: "{{ rangeInput1 }}"</span>
+      </div>
+
+      <div class="input-group">
+        <label>负数范围 -50到50:</label>
+        <el-input
+          v-model="rangeInput2"
+          v-length.range="{ min: -50, max: 50, maxLength: 10 }"
+          placeholder="输入-50到50之间的数字"
+          style="width: 300px;"
+        />
+        <span>当前: "{{ rangeInput2 }}"</span>
+      </div>
+
+      <div class="input-group">
+        <label>小数范围 0.1-99.9:</label>
+        <el-input
+          v-model="rangeInput3"
+          v-length.range="{ min: 0.1, max: 99.9 }"
+          placeholder="输入0.1-99.9之间的小数"
+          style="width: 300px;"
+        />
+        <span>当前: "{{ rangeInput3 }}"</span>
+      </div>
+
+      <div class="input-group">
+        <label>百分比范围 0-100%:</label>
+        <el-input
+          v-model="rangeInput4"
+          v-length.range="{ min: 0, max: 100, maxLength: 5 }"
+          placeholder="输入0-100之间的百分比数值"
+          style="width: 300px;"
+        >
+          <template #suffix>%</template>
+        </el-input>
+        <span>当前: "{{ rangeInput4 }}%"</span>
+      </div>
+
+      <h3>整数范围模式 - v-length.range (integerOnly)</h3>
+      <div class="input-group">
+        <label>整数范围 0-100 (仅整数):</label>
+        <el-input
+          v-model="rangeInput5"
+          v-length.range="{ min: 0, max: 100, integerOnly: true }"
+          placeholder="仅能输入0-100之间的整数"
+          style="width: 300px;"
+        />
+        <span>当前: "{{ rangeInput5 }}"</span>
+      </div>
+
+      <div class="input-group">
+        <label>年龄范围 1-120 (仅整数):</label>
+        <el-input
+          v-model="rangeInput6"
+          v-length.range="{ min: 1, max: 120, integerOnly: true, maxLength: 3 }"
+          placeholder="输入年龄1-120岁"
+          style="width: 300px;"
+        />
+        <span>当前: "{{ rangeInput6 }}"岁</span>
+      </div>
+
+      <div class="input-group">
+        <label>负整数范围 -10到10 (仅整数):</label>
+        <el-input
+          v-model="rangeInput7"
+          v-length.range="{ min: -10, max: 10, integerOnly: true }"
+          placeholder="输入-10到10之间的整数"
+          style="width: 300px;"
+        />
+        <span>当前: "{{ rangeInput7 }}"</span>
+      </div>
     </div>
 
     <!-- v-permission 指令演示 -->
@@ -154,6 +235,15 @@ const regexInput = ref('')
 const chineseInput = ref('')
 const autocompleteInput = ref('')
 
+// v-length.range 演示数据
+const rangeInput1 = ref('')
+const rangeInput2 = ref('')
+const rangeInput3 = ref('')
+const rangeInput4 = ref('')
+const rangeInput5 = ref('')
+const rangeInput6 = ref('')
+const rangeInput7 = ref('')
+
 // v-permission 演示数据
 const btnsPermission = ref(JSON.parse(sessionStorage.getItem('btnsPermission')) || ['add_btn', 'edit_btn', 'admin-btn'])
 sessionStorage.setItem('btnsPermission', JSON.stringify(btnsPermission.value))

package/dist/matrix_components.js

@@ -7318,14 +7318,17 @@ function registerDirective(app2) {
   });
   app2.directive("length", {
     mounted(el2, binding) {
-      var _a3, _b;
+      var _a3, _b, _c2;
       const config = parseBindingValue(binding);
       const handleInput = (e6) => {
-        var _a4, _b2;
-        if ((_a4 = binding.modifiers) == null ? void 0 : _a4.number) {
+        var _a4, _b2, _c3;
+        if ((_a4 = binding.modifiers) == null ? void 0 : _a4.range) {
+          e6.target.value = formatRangeInput(e6.target.value, config);
+          e6.target.dispatchEvent(new Event("input"));
+        } else if ((_b2 = binding.modifiers) == null ? void 0 : _b2.number) {
           e6.target.value = formatNumberInput(e6.target.value, config.maxLength);
           e6.target.dispatchEvent(new Event("input"));
-        } else if (((_b2 = binding.modifiers) == null ? void 0 : _b2.regex) && config.pattern) {
+        } else if (((_c3 = binding.modifiers) == null ? void 0 : _c3.regex) && config.pattern) {
           e6.target.value = formatRegexInput(e6.target.value, config.maxLength, config.pattern);
           e6.target.dispatchEvent(new Event("input"));
         } else {
@@ -7336,10 +7339,13 @@ function registerDirective(app2) {
       el2.addEventListener("input", handleInput);
       el2.addEventListener("change", handleInput);
       if (el2.tagName === "INPUT") {
-        if ((_a3 = binding.modifiers) == null ? void 0 : _a3.number) {
+        if ((_a3 = binding.modifiers) == null ? void 0 : _a3.range) {
+          el2.value = formatRangeInput(el2.value, config);
+          el2.dispatchEvent(new Event("input"));
+        } else if ((_b = binding.modifiers) == null ? void 0 : _b.number) {
           el2.value = formatNumberInput(el2.value, config.maxLength);
           el2.dispatchEvent(new Event("input"));
-        } else if (((_b = binding.modifiers) == null ? void 0 : _b.regex) && config.pattern) {
+        } else if (((_c2 = binding.modifiers) == null ? void 0 : _c2.regex) && config.pattern) {
           el2.value = formatRegexInput(el2.value, config.maxLength, config.pattern);
           el2.dispatchEvent(new Event("input"));
         } else {
@@ -7364,7 +7370,7 @@ function registerDirective(app2) {
   });
 }
 function parseBindingValue(binding) {
-  const defaultConfig = { maxLength: 50, pattern: null };
+  const defaultConfig = { maxLength: 50, pattern: null, min: null, max: null, int: false };
   if (!binding.value) {
     return defaultConfig;
   }
@@ -7374,7 +7380,10 @@ function parseBindingValue(binding) {
   if (typeof binding.value === "object") {
     return {
       maxLength: binding.value.maxLength || defaultConfig.maxLength,
-      pattern: binding.value.pattern || null
+      pattern: binding.value.pattern || null,
+      min: binding.value.min || null,
+      max: binding.value.max || null,
+      int: binding.value.int || false
     };
   }
   return defaultConfig;
@@ -7394,12 +7403,15 @@ function updatedCheck(el2, binding) {
   const config = parseBindingValue(binding);
   const els = el2.querySelectorAll("input, textarea");
   els.forEach((element) => {
-    var _a3, _b;
+    var _a3, _b, _c2;
     if (element == null ? void 0 : element.value) {
-      if ((_a3 = binding.modifiers) == null ? void 0 : _a3.number) {
+      if ((_a3 = binding.modifiers) == null ? void 0 : _a3.range) {
+        element.value = formatRangeInput(element.value, config);
+        element.dispatchEvent(new Event("input"));
+      } else if ((_b = binding.modifiers) == null ? void 0 : _b.number) {
         element.value = formatNumberInput(element.value, config.maxLength);
         element.dispatchEvent(new Event("input"));
-      } else if (((_b = binding.modifiers) == null ? void 0 : _b.regex) && config.pattern) {
+      } else if (((_c2 = binding.modifiers) == null ? void 0 : _c2.regex) && config.pattern) {
         element.value = formatRegexInput(element.value, config.maxLength, config.pattern);
         element.dispatchEvent(new Event("input"));
       } else {
@@ -7435,6 +7447,64 @@ function formatNumberInput(value, maxLength) {
   }
   return result.slice(0, maxLength);
 }
+function formatIntegerInput(value, maxLength) {
+  let result = "";
+  let hasMinus = false;
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (char === "-") {
+      if (i === 0 && !hasMinus) {
+        result += char;
+        hasMinus = true;
+      }
+      continue;
+    }
+    if (/^\d$/.test(char)) {
+      result += char;
+    }
+  }
+  return result.slice(0, maxLength);
+}
+function formatRangeInput(value, config) {
+  if (config.int) {
+    let result2 = formatIntegerInput(value, config.maxLength || 50);
+    if (config.min === null && config.max === null) {
+      return result2;
+    }
+    if (result2 === "" || result2 === "-") {
+      return result2;
+    }
+    const numValue2 = parseInt(result2, 10);
+    if (isNaN(numValue2)) {
+      return "";
+    }
+    if (config.min !== null && numValue2 < config.min) {
+      return Math.ceil(config.min).toString();
+    }
+    if (config.max !== null && numValue2 > config.max) {
+      return Math.floor(config.max).toString();
+    }
+    return result2;
+  }
+  let result = formatNumberInput(value, config.maxLength || 50);
+  if (config.min === null && config.max === null) {
+    return result;
+  }
+  if (result === "" || result === "-" || result === ".") {
+    return result;
+  }
+  const numValue = parseFloat(result);
+  if (isNaN(numValue)) {
+    return "";
+  }
+  if (config.min !== null && numValue < config.min) {
+    return config.min.toString();
+  }
+  if (config.max !== null && numValue > config.max) {
+    return config.max.toString();
+  }
+  return result;
+}
 NsVideo.install = (app2) => {
   app2.component(NsVideo.name, NsVideo);
   try {