工作笔记，只供参考
一、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 | | 指定某个禁用 |
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 |
| - |
| ||
| 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 | 单选框 |
