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