mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-25 02:58:43 +08:00
feat(BasicForm): add submitOnChange
option (#1521)
This commit is contained in:
parent
dd158a17fe
commit
f964533701
@ -58,6 +58,7 @@
|
|||||||
import { createFormContext } from './hooks/useFormContext';
|
import { createFormContext } from './hooks/useFormContext';
|
||||||
import { useAutoFocus } from './hooks/useAutoFocus';
|
import { useAutoFocus } from './hooks/useAutoFocus';
|
||||||
import { useModalContext } from '/@/components/Modal';
|
import { useModalContext } from '/@/components/Modal';
|
||||||
|
import { useDebounceFn } from '@vueuse/core';
|
||||||
|
|
||||||
import { basicProps } from './props';
|
import { basicProps } from './props';
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
@ -225,6 +226,14 @@
|
|||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => formModel,
|
||||||
|
useDebounceFn(() => {
|
||||||
|
unref(getProps).submitOnChange && handleSubmit();
|
||||||
|
}, 300),
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
|
|
||||||
async function setProps(formProps: Partial<FormProps>): Promise<void> {
|
async function setProps(formProps: Partial<FormProps>): Promise<void> {
|
||||||
propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
|
propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
|
||||||
}
|
}
|
||||||
|
@ -40,6 +40,7 @@ export const basicProps = {
|
|||||||
// 在INPUT组件上单击回车时,是否自动提交
|
// 在INPUT组件上单击回车时,是否自动提交
|
||||||
autoSubmitOnEnter: propTypes.bool.def(false),
|
autoSubmitOnEnter: propTypes.bool.def(false),
|
||||||
submitOnReset: propTypes.bool,
|
submitOnReset: propTypes.bool,
|
||||||
|
submitOnChange: propTypes.bool,
|
||||||
size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
|
size: propTypes.oneOf(['default', 'small', 'large']).def('default'),
|
||||||
// 禁用表单
|
// 禁用表单
|
||||||
disabled: propTypes.bool,
|
disabled: propTypes.bool,
|
||||||
|
@ -60,6 +60,8 @@ export interface FormProps {
|
|||||||
rowProps?: RowProps;
|
rowProps?: RowProps;
|
||||||
// Submit form on reset
|
// Submit form on reset
|
||||||
submitOnReset?: boolean;
|
submitOnReset?: boolean;
|
||||||
|
// Submit form on form changing
|
||||||
|
submitOnChange?: boolean;
|
||||||
// Col configuration for the entire form
|
// Col configuration for the entire form
|
||||||
labelCol?: Partial<ColEx>;
|
labelCol?: Partial<ColEx>;
|
||||||
// Col configuration for the entire form
|
// Col configuration for the entire form
|
||||||
|
@ -23,7 +23,7 @@
|
|||||||
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
|
const { getUseOpenBackTop, getShowSettingButton, getSettingButtonPosition, getFullContent } =
|
||||||
useRootSetting();
|
useRootSetting();
|
||||||
const userStore = useUserStoreWithOut();
|
const userStore = useUserStoreWithOut();
|
||||||
const { prefixCls } = useDesign('setting-drawer-fearure');
|
const { prefixCls } = useDesign('setting-drawer-feature');
|
||||||
const { getShowHeader } = useHeaderSetting();
|
const { getShowHeader } = useHeaderSetting();
|
||||||
|
|
||||||
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
|
const getIsSessionTimeout = computed(() => userStore.getSessionTimeout);
|
||||||
@ -59,7 +59,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@prefix-cls: ~'@{namespace}-setting-drawer-fearure';
|
@prefix-cls: ~'@{namespace}-setting-drawer-feature';
|
||||||
|
|
||||||
.@{prefix-cls} {
|
.@{prefix-cls} {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -134,7 +134,7 @@ const setting: ProjectConfig = {
|
|||||||
// Transition Setting
|
// Transition Setting
|
||||||
transitionSetting: {
|
transitionSetting: {
|
||||||
// Whether to open the page switching animation
|
// Whether to open the page switching animation
|
||||||
// The disabled state will also disable pageLoadinng
|
// The disabled state will also disable pageLoading
|
||||||
enable: true,
|
enable: true,
|
||||||
|
|
||||||
// Route basic switching animation
|
// Route basic switching animation
|
||||||
|
Loading…
Reference in New Issue
Block a user