524b9badf2
* feat: add form component * fix: build error * feat: add form adapter * feat: add some component * feat: add some component * feat: add example * feat: suppoer custom action button * chore: update * feat: add example * feat: add formModel,formDrawer demo * fix: build error * fix: typo * fix: ci error --------- Co-authored-by: jinmao <jinmao88@qq.com> Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>
57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
import { useVbenDrawer } from '@vben/common-ui';
|
|
|
|
import { useVbenForm } from '#/adapter';
|
|
|
|
defineOptions({
|
|
name: 'FormDrawerDemo',
|
|
});
|
|
|
|
const [Form, formApi] = useVbenForm({
|
|
schema: [
|
|
{
|
|
component: 'Input',
|
|
componentProps: {
|
|
placeholder: '请输入',
|
|
},
|
|
fieldName: 'field1',
|
|
label: '字段1',
|
|
rules: 'required',
|
|
},
|
|
{
|
|
component: 'Input',
|
|
componentProps: {
|
|
placeholder: '请输入',
|
|
},
|
|
fieldName: 'field2',
|
|
label: '字段2',
|
|
rules: 'required',
|
|
},
|
|
],
|
|
showDefaultActions: false,
|
|
});
|
|
const [Drawer, drawerApi] = useVbenDrawer({
|
|
onCancel() {
|
|
drawerApi.close();
|
|
},
|
|
onConfirm: async () => {
|
|
await formApi.submitForm();
|
|
drawerApi.close();
|
|
},
|
|
onOpenChange(isOpen: boolean) {
|
|
if (isOpen) {
|
|
const { values } = drawerApi.getData<Record<string, any>>();
|
|
if (values) {
|
|
formApi.setValues(values);
|
|
}
|
|
}
|
|
},
|
|
title: '内嵌表单示例',
|
|
});
|
|
</script>
|
|
<template>
|
|
<Drawer>
|
|
<Form />
|
|
</Drawer>
|
|
</template>
|