update

package/component/src/component/input/index.vue

@@ -29,7 +29,7 @@ export interface InputProps {
   maxlength?: number;
   max?: number;
   min?: number;
-  qfw?:boolean;
+  qfw?: boolean;
 }
 
 const props = withDefaults(defineProps<InputProps>(), {
@@ -40,7 +40,7 @@ const props = withDefaults(defineProps<InputProps>(), {
   password: false,
   modelValue: "",
   size: "md",
-  qfw: false
+  qfw: false,
 });
 
 interface InputEmits {
@@ -63,18 +63,48 @@ const hasContent = computed(() => (props.modelValue as string)?.length > 0);
 const isPassword = computed(() => type.value == "password");
 const composing = ref(false);
 
+const formatMoney = function (s: string) {
+  var noNegative = true;
+  s = parseFloat((s + "").replace(/[^\d\.-]/g, "")) + "";
+  if (parseFloat(s) < 0) {
+    s = Math.abs(s) + "";
+    noNegative = false;
+  }
+
+  var l = s.split(".")[0].split("").reverse(),
+    r = s.split(".")[1];
+  var t = "";
+  for (let i = 0; i < l.length; i++) {
+    if (i % 3 == 2 && i != l.length - 1) {
+      t += l[i] + ",";
+    } else {
+      t += l[i] + ""; //加上空格
+    }
+  }
+  let z: any = (noNegative ? "" : "-") + t.split("").reverse().join("");
+  // z = isNaN(z) ? 0 : z;
+  if (r) {
+    return z + "." + r;
+  } else {
+    return isNaN(parseInt(z)) ? 0 : z;
+  }
+};
+
 watch(
   () => props.type,
   () => {
     type.value = props.type;
   }
 );
+const input: any = ref<Element>();
 
 watch(
   () => props.modelValue,
   () => {
-    if(props.qfw && currentValue.value.indexOf(",") != -1){
-      return
+    console.log(input);
+    if (!(input.value == document.activeElement) && props.qfw) {
+      currentValue.value = formatMoney(props.modelValue.toString());
+      return;
     }
     currentValue.value = String(
       props.modelValue == null ? "" : props.modelValue
@@ -87,8 +117,8 @@ const onInput = function (event: Event) {
   let value = inputElement.value;
   emit("input", value);
   if (composing.value) return;
-  if(props.qfw){
-    value = value.replace(/,/g,"")
+  if (props.qfw) {
+    value = value.replace(/,/g, "");
   }
   emit("update:modelValue", value);
 };
@@ -99,15 +129,15 @@ const onClear = () => {
 };
 
 const onFocus = (event: Event) => {
-  currentValue.value = new String(props.modelValue).replace(/,/g,"")
+  currentValue.value = new String(props.modelValue).replace(/,/g, "");
   emit("focus", event);
 };
 
 const onChange = (event: Event) => {
   const inputElement = event.target as HTMLInputElement;
   let value = inputElement.value;
-  if(props.qfw){
-    value = value.replace(/,/g,"")
+  if (props.qfw) {
+    value = value.replace(/,/g, "");
   }
   emit("change", value);
 };
@@ -116,6 +146,17 @@ const onBlur = (event: Event) => {
   if (props.type === "number") {
     onNumberBlur(event);
   }
+  if (props.qfw) {
+    try {
+      let reg = /\d{1,3}(?=(\d{3})+$)/g;
+      // new String(props.modelValue).replace(reg, '$&,');
+      console.log("添加，", formatMoney(props.modelValue.toString()));
+      currentValue.value = formatMoney(props.modelValue.toString());
+    } catch {
+      currentValue.value = "输入错误";
+    }
+  }
+
   emit("blur", event);
 };
 
@@ -127,10 +168,9 @@ const onNumberBlur = (event: Event) => {
     if (props.max && props.max < Number(value)) value = props.max.toString();
     if (props.min && props.min > Number(value)) value = props.min.toString();
   }
-  if(props.qfw){
-    value = value.replace(/,/g,"")
+  if (props.qfw) {
+    value = value.replace(/,/g, "");
   }
-  currentValue.value = new String(props.modelValue).toLocaleString()
   emit("update:modelValue", value);
 };
 
@@ -191,6 +231,7 @@ const showPassword = () => {
         @blur="onBlur"
         @compositionstart="onCompositionstart"
         @compositionend="onCompositionend"
+        ref="input"
       />
       <span
         class="layui-input-password"