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">
  //引入Modal
  import 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, {validate,clearValidate,resetFields,setFieldsValue}] = 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 组件类型都有哪些

标签类型	描述
Input	输入框
DatePicker	日期
RangePicker	开始日期~结束日期
Select	下拉框
CheckboxGroup	多选框
RadioGroup	单选框
InputTextArea	内容框