fix(numeric): add parse-input prop (#4205)

* fix(numeric): add parse-input prop

* fix:  调整一下逻辑

* fix: 删除多余文件

Author: shenjunjian

examples/sites/demos/apis/numeric.js

@@ -409,6 +409,22 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'string-mode',
           mfDemo: ''
+        },
+        {
+          name: 'parse-input',
+          type: '(value:string)=>string',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '自定义输入值解析函数，优先级较高。当输入字符以及粘贴时，会调用该函数进行解析。',
+            'en-US':
+              'custom input value parsing function with high priority.This function is called for parsing when input characters are entered or pasted'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'parse-input',
+          mfDemo: '',
+          meta: {
+            stable: '3.31.0'
+          }
         }
       ],
       events: [

examples/sites/demos/pc/app/numeric/parse-input-composition-api.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-numeric v-model="value" placeholder="请输入非空数值" :parse-input="parseInput"></tiny-numeric>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TinyNumeric } from '@opentiny/vue'
+
+const value = ref(1)
+const parseInput = (value: string) => {
+  return value.replaceAll(',', '').replaceAll('_', '')
+}
+</script>

examples/sites/demos/pc/app/numeric/parse-input.vue

@@ -0,0 +1,24 @@
+<template>
+  <tiny-numeric v-model="value" placeholder="请输入非空数值" :parse-input="parseInput"></tiny-numeric>
+</template>
+
+<script lang="ts">
+import { TinyNumeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyNumeric
+  },
+  data() {
+    return {
+      value: 1
+    }
+  },
+  methods: {
+    parseInput(value: string) {
+      // 允许输入千分符， _ 分隔符等，比如  1,000.00 或者 1_000.00
+      return value.replaceAll(',', '').replaceAll('_', '')
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/numeric/webdoc/numeric.js

@@ -69,6 +69,23 @@ export default {
       },
       codeFiles: ['dynamic-disabled.vue']
     },
+    {
+      demoId: 'parse-input',
+      name: {
+        'zh-CN': '自定义输入值解析',
+        'en-US': 'Custom Input Value Parsing'
+      },
+      desc: {
+        'zh-CN': '自定义输入值解析函数，优先级较高。当输入字符以及粘贴时，会调用该函数进行解析。',
+        'en-US':
+          'Custom input value parsing function with high priority. This function is called for parsing when input characters are entered or pasted'
+      },
+      codeFiles: ['parse-input.vue'],
+      meta: {
+        stable: '3.31.0'
+      }
+    },
+
     {
       demoId: 'allow-empty',
       name: {

packages/renderless/src/numeric/index.ts

@@ -313,7 +313,7 @@ export const setCurrentValue =
     }
   }
 
-/** 处理输入字符： input / compositionend 事件均进入该函数 */
+/** 处理输入字符： input / compositionend , paste 事件均进入该函数 */
 export const handleInput =
   ({ state, api, emit, props }: Pick<INumericRenderlessParams, 'state' | 'api' | 'emit' | 'props'>) =>
   (event: InputEvent): void => {
@@ -322,15 +322,18 @@ export const handleInput =
       return
     }
 
-    // 此时为输入了1个有效的: 数字\英文\中文
+    // 此时为输入了1个有效的: 数字\英文\中文, 或者paste进来
+    let value = event.target.value.replace(/^-+/, '-')
+
+    if (props.parseInput) {
+      value = props.parseInput(value)
+    }
     const { fraction } = state.format
     const emitError = () => {
       if (state.pasting) {
         emit('paste-error', event.target.value)
       }
     }
-    let value = event.target.value.replace(/^-+/, '-')
-
     if (value !== '-' && api.getDecimal(value).isNaN()) {
       emitError()
 

packages/vue/src/numeric/src/index.ts

@@ -157,6 +157,9 @@ export const numericProps = {
   changeCompat: {
     type: Boolean,
     default: false
+  },
+  parseInput: {
+    type: Function
   }
 }
 

packages/vue/src/numeric/src/mobile-first.vue

@@ -177,7 +177,8 @@ export default defineComponent({
     'hideUnit',
     'unitCenter',
     'displayOnly',
-    'changeCompat'
+    'changeCompat',
+    'parseInput'
   ],
   emits: ['update:modelValue', 'change', 'blur', 'focus'],
   setup(props, context): any {

packages/vue/src/numeric/src/pc.vue

@@ -276,7 +276,8 @@ export default defineComponent({
     'clearable',
     'filter',
     'blank',
-    'changeCompat'
+    'changeCompat',
+    'parseInput'
   ],
   emits: ['update:modelValue', 'change', 'blur', 'focus', 'paste-error', 'filter-change', 'clear'],
   setup(props, context) {