vben admin BasicModal和BasicForm的使用

工作笔记，只供参考
一、BasicModal使用

1.创建文件为component在里面创建index.vue

注意 v-bind="$attrs"记得写，用于将弹窗组件的 attribute 传入 BasicModal 组件
1.register:BasicModal的配置项
2.title:标题
3.ok:点击确认按钮
4.closeModal:关闭弹框
5.setModalProps:设置弹出框的某些属性
6.data:为接受的参数

<template><div><BasicModal@register="registerModal"v-bind="$attrs"title="音乐人考核"@ok="handleSubmit"></BasicModal></div>
</template>
<script lang="ts" setup>import { BasicModal, useModalInner } from '@/components/Modal';const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data: any) => {setModalProps({ confirmLoading: false });console.log(data);});const handleSubmit = () => {closeModal();};
</script>

2.在需要的页面引入BasicModal

2.1 引入Modal
3.success 成功时用来接收的回调

<template><div><Modal width="50%" @register="modalOpen" @success="handleSuccess" ></Modal></div>
</template><script setup lang="ts">//引入Modalimport Modal from './components/Modal/index.vue';// 引入usModal 用来打开弹框import { useModal } from '@/components/Modal';const [modalOpen, { openModal }] = useModal();//打开Modal框 true 为打开  后面为传的参数const handleExamine = (record: any) => {openModal(true, { isUpdate: true, record });};
<script>

一、BasicForm使用

<template><div><BasicModal @register="registerModal" v-bind="$attrs" title="音乐人考核" @ok="handleSubmit"><BasicForm @register="registerForm"> </BasicForm></BasicModal></div>
</template>
<script lang="ts" setup>import { BasicModal, useModalInner } from '@/components/Modal';import { BasicForm, useForm } from '@/components/Form';import { formSchemas } from './index.data';const [registerForm, {}] = useForm({labelWidth: 80, // 前面间距baseColProps: { span: 24 },schemas: formSchemas,actionColOptions: {span: 24,},showActionButtonGroup: false, //是否显示 重置 查询按钮});const [registerModal, { closeModal, setModalProps }] = useModalInner(async (data: any) => {setModalProps({ confirmLoading: false });console.log(data);});const handleSubmit = () => {closeModal();};
</script>

1. 引入BasicForm

1.1.registerForm 常用配置项

方法	可选值	描述
labelWidth	100	表单增加 label 宽度
baseColProps	{ span: 24 }	配置所有选子项的 ColProps
schemas		表单的配置项，具体看下方
actionColOptions	{ span: 24 }	操作按钮外层 Col 组件配置
showActionButtonGroup	true/false	是否显示重置查询按钮
size	'default' , 'small' , 'large'	向表单内所有组件传递 size 参数,自定义组件需自行实现 size 接收
compact	true/fasle	紧凑类型表单，减少 margin-bottom

2.form表单方法

方法	使用方法	描述
validate	validate()	校验整个表单
validateFields	validateFields()	手动验证表单是否通过
clearValidate	clearValidate()	清空校验
getFieldsValue	getFieldsValue()	获取表单值
setFieldsValue	setFieldsValue({ field1: 111， field33: '2020-12-12', field3: dayjs('2020-12-12', 'YYYY-MM-DD'), });	设置表单值
resetFields	resetFields()	重置
updateSchema	`updateSchema({ field: 'filed', componentProps: { disabled: true } });`	指定某个禁用

  import { BasicForm, useForm } from '@/components/Form';import { formSchemas } from './index.data';const [registerForm, {resetFields, setFieldsValue, validate}] = useForm({labelWidth: 80, // 前面间距baseColProps: { span: 24 },schemas: formSchemas,actionColOptions: {span: 24,},showActionButtonGroup: false, //是否显示 重置 查询按钮});

2.在template里面使用BasicForm标签

  <BasicForm @register="registerForm"> </BasicForm>

3.BasicForm schemas配置项

属性类型 可选值 说明

field string - 字段名

label string - 标签名

component string - 组件类型，见下方 ComponentType

subLabel string - 二级标签名灰色

suffix sring / number / ()=>{} 组件后面的内容

labelWidth

string , number

覆盖统一设置的 labelWidth

show boolean / ()=>{} - 动态判断当前组件是否显示，css 控制，不会删除 dom

ifShow boolean / ()=>{} - 动态判断当前组件是否显示，js 控制，会删除 dom

helpMessage

string , string[]

标签名右侧温馨提示

required boolean - 是否校验该字段

rules ValidationRule[] 校验复杂比如是否为数字、不能有小数点等

  {field: 'field1',component: 'Input',label: '字段1',colProps: { span: 8 },componentProps: {placeholder: '自定义placeholder',onChange: (e: any) => {console.log(e);},},},

4.BasicForm 组件类型都有哪些