feat: 为VbenFormProps添加componentEvents,使VbenForm支持自定义组件的自定义事件,简单实现后续优化
parent
2c209d15f2
commit
73e1ae0a4e
|
|
@ -28,6 +28,7 @@ interface Props extends FormSchema {}
|
||||||
const {
|
const {
|
||||||
commonComponentProps,
|
commonComponentProps,
|
||||||
component,
|
component,
|
||||||
|
componentEvents,
|
||||||
componentProps,
|
componentProps,
|
||||||
dependencies,
|
dependencies,
|
||||||
description,
|
description,
|
||||||
|
|
@ -159,6 +160,12 @@ const computedProps = computed(() => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const computedEvents = computed(() => {
|
||||||
|
return isFunction(componentEvents)
|
||||||
|
? componentEvents(values.value, formApi!)
|
||||||
|
: componentEvents;
|
||||||
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => computedProps.value?.autofocus,
|
() => computedProps.value?.autofocus,
|
||||||
(value) => {
|
(value) => {
|
||||||
|
|
@ -315,6 +322,7 @@ function autofocus() {
|
||||||
'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
|
'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
|
||||||
isInValid,
|
isInValid,
|
||||||
}"
|
}"
|
||||||
|
v-on="computedEvents"
|
||||||
v-bind="createComponentProps(slotProps)"
|
v-bind="createComponentProps(slotProps)"
|
||||||
:disabled="shouldDisabled"
|
:disabled="shouldDisabled"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -128,6 +128,10 @@ export interface FormItemDependencies {
|
||||||
triggerFields: string[];
|
triggerFields: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type ComponentEvents = {
|
||||||
|
[K: string]: (...args: any[]) => void;
|
||||||
|
} & Record<string, any>;
|
||||||
|
|
||||||
type ComponentProps =
|
type ComponentProps =
|
||||||
| ((
|
| ((
|
||||||
value: Partial<Record<string, any>>,
|
value: Partial<Record<string, any>>,
|
||||||
|
|
@ -217,6 +221,8 @@ export interface FormSchema<
|
||||||
> extends FormCommonConfig {
|
> extends FormCommonConfig {
|
||||||
/** 组件 */
|
/** 组件 */
|
||||||
component: Component | T;
|
component: Component | T;
|
||||||
|
/** 组件事件 */
|
||||||
|
componentEvents?: ComponentEvents;
|
||||||
/** 组件参数 */
|
/** 组件参数 */
|
||||||
componentProps?: ComponentProps;
|
componentProps?: ComponentProps;
|
||||||
/** 默认值 */
|
/** 默认值 */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue