cus-o-components

基于element-plus二次封装组件，可以通过json形式进行自定义表单配置

使用

安装

npm i cus-o-components

项目中引入

1. 按需引入

import { CusForm } from 'cus-o-components'

2. 全局引入

import { createApp } from 'vue'
import App from './App.vue'
import CusOComponents from 'cus-o-components'
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

createApp(App).use(ElementPlus).use(CusOComponents).mount('#app')

CusForm

表单组件基于element-plus的form组件二次封装，可以通过json对表单进行自定义配置，进行动态渲染。

表单相关配置说明

组件属性：CusFormProps(★为必填字段)

| 字段 | 说明 | 类型 | 默认值 | | :------------: | :------------------------------------: | :------------------------------------------------: | :-------: | | formRef | 获取form实例 | (form: InstanceType<typeof ElForm> \|null) => void | - | | ★formList | 表单项配置内容 | Array<CompFormItem> | [] | | modelValue | 绑定表单数据 | CusFormModelValue | - | | cols | 表单栅格列数 | number \| GridResponsive | 1 | | colGap | 表单栅格列间距 | number | 16 | | size | 表单尺寸 | "large" ｜ "default" ｜ "small" | "default" | | disabled | 表单是否禁用 | boolean | false | | editable | 表单是否可编辑 | boolean | true | | scrollToError | 校验失败是否自动定位第一个校验失败字段 | boolean | true | | ignoreBtnLabel | 是否忽略表单按钮组标签宽度 | boolean | true | | btnSpan | 表单按钮组栅格占比 | number\|GridResponsive | 1 | | btnSpanStyle | 表单按钮组内联样式 | string | "" | | submitBtnText | 提交按钮文字 | string | 确定 | | cancelBtnText | 取消按钮文字内容 | string | 取消 | | submitBtnProps | 提交按钮自定义属性 | Partial<ButtonProps> | - | | cancelBtnProps | 取消按钮自定义属性 | Partial<ButtonProps> | - | | tooltipProps | 表单默认提示语自定义样式 | Partial<TooltipProps> | - | | hideBtns | 隐藏表单按钮组 | boolean | false | | emptyText | 只读情况下空内容展示占位符 | string | "-" | | request | 表单提交远程请求方法 | (model: Record\<string, any\>) => Promise\<any\> | - |

表单配置项：CusFormItem(★为必填字段)

| 字段 | 说明 | 类型 | 默认值 | | :-----------: | :------------------------------------------: | :----------------------------------------------------------: | :----------------------------------: | | type | 表单项类型，text表示纯文本，comp表示组件控件 | "text" / "comp" | "comp" | | ★label | 表单项标签名 | string | - | | ★field | 表单项绑定字段名 | string | - | | labelWidth | 表单字段标签名宽度，默认继承el-form配置 | string / number | - | | labelPosition | 表单字段标签名位置，默认继承el-form配置 | number | right | | customClass | form-item样式类 | string | - | | controlClass | 表单控件样式类 | string | - | | span | 表单字段栅格占比 | number / GridResponsive | - | | defaultValue | 默认值 | any | - | | tooltip | 表单字段名后"?"提示 | string | - | | tips | 表单控件下方提示文字内容 | string | - | | tipsClass | 表单控件下方提示文字样式 | string | - | | slot | 表单控件作用域插槽 | string | [field]-control | | labelSlot | 具名插槽 | string | [field]-label | | visible | 表单项是否显示或是字段联动展示配置 | boolean / FormItemVisibleRule / FormItemVisibleRuleCondition | true | | rules | 表单字段校验规则 | Array<FormItemRule> | - | | modelProp | 表单字段控件v-model绑定属性名 | string | - | | modelEvent | 表单字段控件v-model绑定事件名 | string | - | | props | 表单控件其他属性配置 | Record<string, unknown> | - | | comp | type为comp时必填，表单控件组件名 | string | - | | childComp | type为comp时，表单控件嵌套子组件名 | string | el-option ｜ el-radio ｜ el-checkbox | | options | 表单的选项组 | Array<{[labelName]: string, [valueName]: any}> | - | | labelName | 表单选项组options字段名 | string | label | | valueName | 表单选项组options字段值 | string | value | | controlClass | 表单控件样式 | string | - | | events | 表单控件事件监听 | Record<string, Function> | - |

组件方法：CusFormEmits

| 字段 | 说明 | 类型 | | :------------: | :------------------------------------: | :------------------------------------------------: | | change | 表单控件字段值发生变化时触发 | (field: string, value: any, model: MaybeRef<ReFormModelValue>) => void | | update:modelValue | 表单数据更新后触发 | (model: MaybeRef<CusFormModelValue>): void | | submit | 点击默认提交按钮触发 | (formData: CusFormModelValue): void | | cancel | 点击默认取消按钮触发 | void | | success/error | 在表单提交远程请求方法request时触发 | (res: any) => void |

组件插槽配置

| 插槽名 | 说明 | | --------------- | ------------------------------------------------------------ | | btns | 自定义表单按钮组（如果使用此插槽默认的提交和取消按钮不会展示，需要自定义完成） | | [field]-label | 每个表单配置项都自带一个标签插槽，默认按 [field]-label 格式提供，可通过 labelSlot 自定义插槽名 | | [field]-control | 每个表单配置项都自带一个控件插槽，默认按 [field]-control 格式提供，可通过 slot 自定义插槽名 |

CusForm 暴露在外部的方法

| 字段 | 说明 | 类型 | | :-----------: | :------------------------------: | :--------------------------------------------------: | | submiting | 表单提交状态 | boolean | | thisFormRef | ElForm组件示例 | InstanceType<typeof ElForm> | | formData | 表单数据对象 | ShallowRef<Record<string, any>> | | formRules | 表单校验规则集合 | ShallowRef<Partial<FormRules>> | | formItem | 表单配置对象集合 | ShallowRef<CusFormItem[]> | | formVisible | 表单字段显示状态集合 | Ref<Record<string, boolean>> | | validate | 同ElForm，校验表单 | (callback: FormValidateCallback) => void | | clearValidate | 同ElForm，清除表单校验状态 | () => void | | resetFields | 同ElForm，重置表单字段和校验状态 | (props?: Arrayable\<string\> ｜ undefined) => void |