Cus-o-components NPM

cus-o-components

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

使用

安装

npm i cus-o-components

项目中引入

按需引入

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

全局引入

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`

vite vue3 typescript demo

@element-plus/icons-vue @vueuse/core element-plus lodash-es

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago