feat: form组件增加submit事件回调及取消默认行为 (#383)

WeBankFinTech · Aug 11, 2023 · 5a566fa · 5a566fa
1 parent 7f660ad
commit 5a566fa
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/components/form/form.vue b/components/form/form.vue
@@ -1,5 +1,5 @@
 <template>
-    <form :class="formClass" :style="formStyle">
+    <form :class="formClass" :style="formStyle" @submit="handleSubmit">
         <slot />
     </form>
 </template>
@@ -20,7 +20,8 @@ const prefixCls = getPrefixCls('form');
 export default defineComponent({
     name: FORM_NAME,
     props: formProps,
-    setup(props) {
+    emits: ['submit'],
+    setup(props, { emit }) {
         useTheme();
 
         const formFields: {
@@ -130,13 +131,20 @@ export default defineComponent({
             removeField,
         });
 
+        const handleSubmit = (e: Event) => {
+            e.preventDefault();
+            e.stopPropagation();
+            emit('submit', e);
+        };
+
         return {
             formClass,
             formStyle,
 
             validate,
             clearValidate,
             resetFields,
+            handleSubmit,
         };
     },
 });

diff --git a/docs/.vitepress/components/form/index.md b/docs/.vitepress/components/form/index.md
@@ -74,6 +74,12 @@ Form 组件提供表单验证的功能，通过 rules 属性传入约定的验
 | clearValidate | 移除表单项的校验结果                                                                                                                                                                                                     | -                                |
 | resetFields   | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果                                                                                                                                                               | -                                |
 
+## Form Events
+
+| 事件名称 | 说明                 | 回调参数        |
+| -------- | -------------------- | --------------- |
+| submit   | 表单原生提交事件触发 | (event) => void |
+
 ## Form-Item Attributes
 
 | 属性        | 说明                                                                               | 类型                       | 默认值 |

diff --git a/docs/.vitepress/components/input/event.vue b/docs/.vitepress/components/input/event.vue
@@ -6,6 +6,8 @@
         <FInput placeholder="请输入" @keydown="keyDown"></FInput>
         Input事件
         <FInput placeholder="请输入" @input="inputChange"></FInput>
+        Enter事件
+        <FInput placeholder="请输入" @keyup.enter="keyupEnter"></FInput>
     </FSpace>
 </template>
 
@@ -24,10 +26,15 @@ export default {
             console.log('inputChange', e);
         };
 
+        const keyupEnter = (e) => {
+            console.log('keyupEnter', e);
+        };
+
         return {
             textChange,
             keyDown,
             inputChange,
+            keyupEnter,
         };
     },
 };

diff --git a/docs/.vitepress/components/tag/edit.vue b/docs/.vitepress/components/tag/edit.vue
@@ -15,7 +15,7 @@
                 v-model="dynamicTags.state.inputValue"
                 class="input-tag"
                 size="small"
-                @blur="dynamicTags.handleInputConfirm"
+                @change="dynamicTags.handleInputConfirm"
             >
             </FInput>
             <FButton v-else class="button-tag" @click="dynamicTags.showInput">

diff --git a/docs/.vitepress/components/tag/withForm.vue b/docs/.vitepress/components/tag/withForm.vue
@@ -18,7 +18,7 @@
                         v-model="dynamicTags.state.inputValue"
                         class="input-tag"
                         size="small"
-                        @blur="dynamicTags.handleInputConfirm"
+                        @change="dynamicTags.handleInputConfirm"
                     >
                     </FInput>
                     <FButton