107 lines
2.6 KiB
Vue
107 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
||
import { Page } from '@vben/common-ui';
|
||
|
||
import { NButton, NCard, useMessage } from 'naive-ui';
|
||
|
||
import { useVbenForm } from '#/adapter/form';
|
||
|
||
const message = useMessage();
|
||
const [Form, formApi] = useVbenForm({
|
||
commonConfig: {
|
||
// 所有表单项
|
||
componentProps: {
|
||
class: 'w-full',
|
||
},
|
||
},
|
||
layout: 'horizontal',
|
||
// 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
|
||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||
handleSubmit: (values) => {
|
||
message.success(`表单数据：${JSON.stringify(values)}`);
|
||
},
|
||
schema: [
|
||
{
|
||
component: 'Input',
|
||
fieldName: 'string',
|
||
label: 'String',
|
||
},
|
||
{
|
||
component: 'InputNumber',
|
||
fieldName: 'number',
|
||
label: 'Number',
|
||
},
|
||
{
|
||
component: 'RadioGroup',
|
||
fieldName: 'radio',
|
||
label: 'Radio',
|
||
componentProps: {
|
||
options: [
|
||
{ value: 'A', label: 'A' },
|
||
{ value: 'B', label: 'B' },
|
||
{ value: 'C', label: 'C' },
|
||
{ value: 'D', label: 'D' },
|
||
{ value: 'E', label: 'E' },
|
||
],
|
||
},
|
||
},
|
||
{
|
||
component: 'RadioGroup',
|
||
fieldName: 'radioButton',
|
||
label: 'RadioButton',
|
||
componentProps: {
|
||
isButton: true,
|
||
class: 'flex flex-wrap', // 如果选项过多，可以添加class来自动折叠
|
||
options: [
|
||
{ value: 'A', label: '选项A' },
|
||
{ value: 'B', label: '选项B' },
|
||
{ value: 'C', label: '选项C' },
|
||
{ value: 'D', label: '选项D' },
|
||
{ value: 'E', label: '选项E' },
|
||
{ value: 'F', label: '选项F' },
|
||
],
|
||
},
|
||
},
|
||
{
|
||
component: 'CheckboxGroup',
|
||
fieldName: 'checkbox',
|
||
label: 'Checkbox',
|
||
componentProps: {
|
||
options: [
|
||
{ value: 'A', label: '选项A' },
|
||
{ value: 'B', label: '选项B' },
|
||
{ value: 'C', label: '选项C' },
|
||
],
|
||
},
|
||
},
|
||
{
|
||
component: 'DatePicker',
|
||
fieldName: 'date',
|
||
label: 'Date',
|
||
},
|
||
],
|
||
});
|
||
function setFormValues() {
|
||
formApi.setValues({
|
||
string: 'string',
|
||
number: 123,
|
||
radio: 'B',
|
||
radioButton: 'C',
|
||
checkbox: ['A', 'C'],
|
||
date: Date.now(),
|
||
});
|
||
}
|
||
</script>
|
||
<template>
|
||
<Page
|
||
description="表单适配器重新包装了CheckboxGroup和RadioGroup，可以通过options属性传递选项数据（选项数据将作为子组件的属性）"
|
||
title="表单演示"
|
||
>
|
||
<NCard title="基础表单">
|
||
<template #header-extra>
|
||
<NButton type="primary" @click="setFormValues">设置表单值</NButton>
|
||
</template>
|
||
<Form />
|
||
</NCard>
|
||
</Page>
|
||
</template>
|