feat(form): add prop autoSubmitOnEnter (#620)

为Form添加autoSubmitOnEnter属性，当设置为true时，可以在input组件上按下回车时自动提交表单

feat(form): add prop autoSubmitOnEnter (#620)
为Form添加autoSubmitOnEnter属性，当设置为true时，可以在input组件上按下回车时自动提交表单
Netfan · GitHub
1 parent 3bb6d11e
Showing 3 changed files with 34 additions and 13 deletions
src/components/Form/src/BasicForm.vue
src/components/Form/src/props.ts
src/components/Form/src/types/form.ts
 <template>
-  <Form v-bind="{ ...$attrs, ...$props }" :class="getFormClass" ref="formElRef" :model="formModel">
+  <Form
+    v-bind="{ ...$attrs, ...$props }"
+    :class="getFormClass"
+    ref="formElRef"
+    :model="formModel"
+    @keypress.enter="handleEnterPress"
+  >
     <Row :style="getRowWrapStyle">
       <slot name="formHeader"></slot>
       <template v-for="schema in getSchema" :key="schema.field">
@@ -81,11 +87,9 @@
       const { prefixCls } = useDesign('basic-form');
       // Get the basic configuration of the form
-      const getProps = computed(
-        (): FormProps => {
-          return { ...props, ...unref(propsRef) } as FormProps;
-        }
-      );
+      const getProps = computed((): FormProps => {
+        return { ...props, ...unref(propsRef) } as FormProps;
+      });
       const getFormClass = computed(() => {
         return [
@@ -97,12 +101,10 @@
       });
       // Get uniform row style
-      const getRowWrapStyle = computed(
-        (): CSSProperties => {
-          const { baseRowStyle = {} } = unref(getProps);
-          return baseRowStyle;
-        }
-      );
+      const getRowWrapStyle = computed((): CSSProperties => {
+        const { baseRowStyle = {} } = unref(getProps);
+        return baseRowStyle;
+      });
       const getSchema = computed((): FormSchema[] => {
         const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
@@ -213,6 +215,17 @@
         formModel[key] = value;
       }
+      function handleEnterPress(e: KeyboardEvent) {
+        const { autoSubmitOnEnter } = unref(getProps);
+        if (!autoSubmitOnEnter) return;
+        if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
+          const target: HTMLElement = e.target as HTMLElement;
+          if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
+            handleSubmit();
+          }
+        }
+      }
+
       const formActionType: Partial<FormActionType> = {
         getFieldsValue,
         setFieldsValue,
@@ -236,6 +249,7 @@
       return {
         handleToggleAdvanced,
+        handleEnterPress,
         formModel,
         defaultValueRef,
         advanceState,
@@ -37,6 +37,8 @@ export const basicProps = {
     type: Object as PropType<Partial<ColEx>>,
   },
   autoSetPlaceHolder: propTypes.bool.def(true),
+  // 在INPUT组件上单击回车时，是否自动提交
+  autoSubmitOnEnter: propTypes.bool.def(false),
   submitOnReset: propTypes.bool,
   size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
   // 禁用表单
@@ -83,6 +83,8 @@ export interface FormProps {
   fieldMapToTime?: FieldMapToTime;
   // Placeholder is set automatically
   autoSetPlaceHolder?: boolean;
+  // Auto submit on press enter on input
+  autoSubmitOnEnter?: boolean;
   // Check whether the information is added to the label
   rulesMessageJoinLabel?: boolean;
   // Whether to show collapse and expand buttons
@@ -125,7 +127,10 @@ export interface FormSchema {
   // Auxiliary text
   subLabel?: string;
   // Help text on the right side of the text
-  helpMessage?: string | string[] | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
+  helpMessage?:
+    | string
+    | string[]
+    | ((renderCallbackParams: RenderCallbackParams) => string | string[]);
   // BaseHelp component props
   helpComponentProps?: Partial<HelpComponentProps>;
   // Label width, if it is passed, the labelCol and WrapperCol configured by itemProps will be invalid