ElemenetPlus 的 Form 组件的二次封装

介绍：二次封装 Element 表单

插件地址：https://www.npmjs.com/package/base-form-v3

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为默认

注意：

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

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'