50 lines
1.0 KiB
TypeScript
50 lines
1.0 KiB
TypeScript
import { AnForm, IAnForm } from '../components/Form';
|
|
import { FormItem, useItems } from './useItems';
|
|
|
|
export type FormUseOptions = Partial<Omit<IAnForm, 'items'>> & {
|
|
/**
|
|
* 表单项
|
|
* @example
|
|
* ```ts
|
|
* [
|
|
* {
|
|
* field: 'name',
|
|
* label: '昵称',
|
|
* setter: 'input'
|
|
* }
|
|
* ]
|
|
* ```
|
|
*/
|
|
items?: FormItem[];
|
|
};
|
|
|
|
/**
|
|
* 构建表单组件的参数
|
|
*/
|
|
export const useForm = (options: FormUseOptions) => {
|
|
const { items: _items = [], model: _model = {}, submit, formProps: _props = {} } = options;
|
|
const items = useItems(_items, _model);
|
|
const model = ref(_model);
|
|
const formProps = ref(_props);
|
|
const formRef = ref<InstanceType<typeof AnForm> | null>(null);
|
|
|
|
const AnFormer = () => (
|
|
<AnForm
|
|
ref={(el: any) => (formRef.value = el)}
|
|
v-model:model={model.value}
|
|
items={items.value}
|
|
submit={submit}
|
|
formProps={formProps.value}
|
|
></AnForm>
|
|
);
|
|
|
|
return {
|
|
component: AnFormer,
|
|
model,
|
|
items,
|
|
submit,
|
|
formProps,
|
|
formRef,
|
|
};
|
|
};
|