feat(input): add auto-trimming for vxe-table input components (#3684)

* fix: Correct spelling errors in form component * fix: Correct spelling errors in form component * fix: Correct spelling errors in vxetable component
vbenjs · Mar 25, 2024 · 9882e8d · 9882e8d
1 parent 264f34e
commit 9882e8d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts
@@ -195,15 +195,15 @@ export function useFormEvents({
       fieldList = [fields];
     }
     for (const field of fieldList) {
-      _removeSchemaByFeild(field, schemaList);
+      _removeSchemaByField(field, schemaList);
     }
     schemaRef.value = schemaList;
   }
 
   /**
    * @description: Delete based on field name
    */
-  function _removeSchemaByFeild(field: string, schemaList: FormSchema[]): void {
+  function _removeSchemaByField(field: string, schemaList: FormSchema[]): void {
     if (isString(field)) {
       const index = schemaList.findIndex((schema) => schema.field === field);
       if (index !== -1) {

diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts
@@ -13,7 +13,7 @@ interface UseFormValuesContext {
 }
 
 /**
- * @desription deconstruct array-link key. This method will mutate the target.
+ * @description deconstruct array-link key. This method will mutate the target.
  */
 function tryDeconstructArray(key: string, value: any, target: Recordable) {
   const pattern = /^\[(.+)\]$/;
@@ -31,7 +31,7 @@ function tryDeconstructArray(key: string, value: any, target: Recordable) {
 }
 
 /**
- * @desription deconstruct object-link key. This method will mutate the target.
+ * @description deconstruct object-link key. This method will mutate the target.
  */
 function tryDeconstructObject(key: string, value: any, target: Recordable) {
   const pattern = /^\{(.+)\}$/;

diff --git a/src/components/VxeTable/src/components/common.tsx b/src/components/VxeTable/src/components/common.tsx
@@ -7,7 +7,7 @@ import {
 import XEUtils from 'xe-utils';
 import { componentMap } from '../componentMap';
 import { ComponentType } from '../componentType';
-import { createPlaceholderMessage } from '../helper';
+import { createPlaceholderMessage, sanitizeInputWhitespace } from '../helper';
 
 /**
  * @description: 获取组件
@@ -102,13 +102,13 @@ export function createEvents(
     };
   });
   if (inputFunc) {
-    ons[getOnName(modelEvent)] = function (targetEvnt: any) {
-      inputFunc(targetEvnt);
+    ons[getOnName(modelEvent)] = function (targetEvent: any) {
+      inputFunc(targetEvent);
       if (events && events[modelEvent]) {
-        events[modelEvent](params, targetEvnt);
+        events[modelEvent](params, targetEvent);
       }
       if (isSameEvent && changeFunc) {
-        changeFunc(targetEvnt);
+        changeFunc(targetEvent);
       }
     };
   }
@@ -323,7 +323,7 @@ export function createFormItemRender(
           params,
           (value: any) => {
             // 处理 model 值双向绑定
-            XEUtils.set(data, property, value);
+            XEUtils.set(data, property, sanitizeInputWhitespace(name as ComponentType, value));
           },
           () => {
             // 处理 change 事件相关逻辑

diff --git a/src/components/VxeTable/src/const.ts b/src/components/VxeTable/src/const.ts
@@ -2,3 +2,8 @@
  * @description: 传给vxe-table 时需要忽略的prop
  */
 export const ignorePropKeys = ['tableClass', 'tableStyle'];
+
+/**
+ * @description: 需要忽略内容首尾空格的输入组件列表
+ */
+export const ignoreTrimInputComponents = ['AInput', 'ATextarea'];
diff --git a/src/components/VxeTable/src/helper.ts b/src/components/VxeTable/src/helper.ts
@@ -1,5 +1,7 @@
 import { ComponentType } from './componentType';
 import { useI18n } from '@/hooks/web/useI18n';
+import XEUtils from 'xe-utils';
+import { ignoreTrimInputComponents } from './const';
 
 const { t } = useI18n();
 
@@ -17,3 +19,14 @@ export function createPlaceholderMessage(component: ComponentType) {
     return t('common.chooseText');
   }
 }
+
+/**
+ *
+ * @description: 对输入值进行首尾空格的清理
+ */
+export function sanitizeInputWhitespace(component: ComponentType, value: string) {
+  if (ignoreTrimInputComponents.includes(component)) {
+    return XEUtils.trim(value);
+  }
+  return value;
+}