BaseFormV3

介绍：二次封装 Element 表单

Api 介绍：

| Api 名称 | 说明 | | ----------- | ------------------------------------------------------------------------------------------------------------------ | | v-model | 绑定的表单数据 | | formItemArr | 表单数组 | | rules | 规则 | | ref | 获取内部 el-form 的 ref | | isSpan | 是否开启 span，默认为 true | | isItem | select 的 options 中，是单个数据，没有 label 与 value，每一项的值就是 label 与 value，将他开启即可，默认值为 flase | | isSpacing | 是否开启缩小间距，默认为 true,true 为缩小间距 |

1.formItemArr

传入的表单数组，一个对象即对应一个表单

参数介绍：

| 参数 | 说明 | | ---------- | ------------------------------ | | formType | 表单类型 | | name | 绑定的参数名 | | span | 占几份，共 24 份，默认值 6 份 | | on | 事件绑定 | | slots | 插槽绑定 | | computed | 计算几个表单的数据 | | visible | 是否展示某个表单，用于动态表单 | | isReadOnly | 动态只读 | | isDisabled | 动态禁用 |

1.1 formType

当内部有使用二次封装的组件时，类型定义为modelType 多选类型： checkbox,checkboxGroup,checkboxButton 默认：checkbox 单选类型： radio,radioGroup,radioButton 默认：radio 下拉：select,selectGroup 默认：select

customLabel,customValue,为二次封装组件自定义的数据，同样，label,value 为原本的展示数据与展示数据

如若需要定义 el-option-group 的 label,请使用 customGroupLabel

表单类型:

| 名称 | 对应 | 是否二次封装 | | ------------ | --------------- | ------------ | | autocomplete | el-autocomplete | | | cascader | el-cascader | | | checkbox | el-checkbox | 是 | | datePicker | el-date-picker | | | input | el-input | | | inputNumber | el-input-number | | | inputTag | el-input-tag | | | mention | el-mention | | | radio | el-radio | 是 | | rate | el-rate | | | select | el-select | 是 | | selectV2 | el-select-v2 | 是 | | slider | el-slider | | | switch | el-switch | | | timePicker | el-time-picker | | | timeSelect | el-time-select | | | transfer | el-transfer | | | treeSelect | el-tree-select | |

input为默认

注意：

1. 默认值为input
2. 每个类型都是去除el后的单词，单个单词为小写，多个单词为小驼峰
3. checkBox，radio，select，selectV2这 4 个由于有多种组合，因此进行了二次封装，二次封装的组件不需要在formItemArr中定义slot
4. 进行二次封装的组件与未进行封装的使用插槽的方式不一致，后续会讲
5. 由于上传类型很多因此并未加入该组件，如需使用请使用插槽

1.2 name

表单单项的绑定值，同时会决定表单插槽的绑定

1.3 span

默认值 6 份，共 24 份，

1.4 on

事件绑定，只能绑定该表单的对应的事件

示例：

on: {
  input: (val: any) => { console.log('输入内容', val) },
  blur: (e: any) => { console.log('失焦', e) }
}

1.5 slots

插槽绑定，分为 4 种情况

第一种：el-form的插槽，直接使用template绑上default即可

<template #default></template>

第二种：el-form-item 的插槽，开启需要传参，如果是default，每项定义，defaultSlot为 true，soltName为你该项的唯一值,依次类推，label，就是labelSlot为 true，soltName为你该项的唯一值,依次类推

<template #soltName值+插槽名="{参数与el-form-item插槽参数一致}"></template>

**第三种：**进行二次封装的组件插槽，开启同样需要传参，与第二种差不多，如果是default，每项定义，defaultSlot为 true，依次类推，soltName不用传，他绑定的是name，由于他可能存在几层，因此每层的返参不一样

// 第一层
<template #name值+插槽名="{ info }"></template>
// info:该项数据 // 非第一层
<template #name值+插槽名="{ info, index }"></template>
// info:该项数据 index:该项索引

**第四种：**未进行二次封装的，直接在该项中去定义

// 封装的组件
<template>
  <div>
    <span style="color: red">{{ node.label }}</span>
    <el-button size="mini" @click="handleClick">点我</el-button>
  </div>
</template>
<script setup>
const props = defineProps(['node', 'data'])
const handleClick = () => {
  alert(`你点击了 ${props.node.label}`)
}
</script>

slots: {
    default: (slotProps) => h('封装的组件名', { ...slotProps })   // 参数与该表单的插槽传参一致，可定义多个插槽
}

或

slots: {
    default: (slotProps) => h('span', {span的属性}, 展示内容))   // 参数与该表单的插槽传参一致，可定义多个插槽
}

1.6 computed

计算，当有一个表单的值是根据其余表单的值计算出来的时候使用 computed

// 例如：计算其余两个表单的乘
computed: (formData) => Number(formData.price) * Number(formData.count)

1.7 visible

动态表单，表单是根据某个或多个表单的值来决定是否展示

visible: (formData: any) => formData.age == 3 && formData.sex == 0

2.rules

与 el-form 定义规则一致

3.ref

操作组件 ref，内部会给你暴露出一个 formRef，获取使用即可，与 el-form 一致

注意：未展示的属性，方法，插槽名称与 element-plus 的表单组件一致，如果使用请写入到对应的对象中

4.使用

// 全局
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import BaseFormV3 from 'base-form-v3'
import 'base-form-v3/dist/style.css'

app.use(ElementPlus)
app.use(BaseFormV3)

// 按需
import { BaseFormV3, FormComponents } from 'base-form-v3'

禁用： isDisabled: (formData) => !!formData.id 只读： isReadOnly: (formData) => 逻辑