BasicForm的使用

BasicForm是一个非常核心且常用的 ​​表单封装组件​​，它是对 Ant Design Vue 原生 <a-form>的 ​​高度封装和增强​​，简化表单开发流程，提供更强大、灵活、可维护的表单构建能力。

一、基本使用

1.引入 

import { BasicForm } from '@/components/Form';

2.基本使用

举个栗子，若要实现上面示例表单，则可以这样写：

formSchemas 只是一个变量名，而FormSchema才是重要的。

补充：FormSchema 是什么？从哪里来？

回答：可能是一个ts接口interface，或者类型type。然后引入调用来的。

二、全部代码

<!-- 基本用法 -->
<template><!-- 自定表单 --><BasicForm @register="registerForm" @submit="handleSubmit"/>
</template><script lang="ts" setup>//引入依赖import { useForm, BasicForm, FormSchema } from '/@/components/Form';//自定义表单字段const formSchemas: FormSchema[] = [  // 后面有解释{//标题名称label: '用户名(后面根据labelLength定义的长度隐藏)',//字段field: 'username',//组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentTypecomponent: 'Input',//标题宽度,支持数字和字符串labelWidth: 150,//标题长度，超过位数隐藏labelLength: 3,//一列占比总共24，比如一行显示2列colProps: { span: 12 },},{label: '密码',field: 'password',//子标题名称（在主标题后面）subLabel: '(数字和字母组成)',component: 'InputPassword',labelWidth: '150px',//一列占比总共24，比如一行显示2列colProps: { span: 12 },},];/*** BasicForm绑定注册;* useForm 是整个框架的核心用于表单渲染，里边封装了很多公共方法;* 支持（schemas: 渲染表单列，autoSubmitOnEnter：回车提交,* submitButtonOptions：自定义按钮文本和图标等方法）；* 平台通过此封装，简化了代码，支持自定义扩展;*/const [registerForm] = useForm({  //注册表单列schemas: formSchemas,  // schemas api属性、字段详见文档//回车提交autoSubmitOnEnter: true,//不显示重置按钮showResetButton: false,//自定义提交按钮文本和图标submitButtonOptions: { text: '提交', preIcon: '' },//查询列占比 24代表一行 取值范围 0-24actionColOptions: { span: 17 },});/*** 点击提交按钮的value值  value就是用户输入的数据（表单数据）* @param values*/function handleSubmit(values: any) {console.log('提交按钮数据::::', values);}
</script><style scoped></style>