Uniapp易用强大的表单组件(下拉、级联、上传、富文本、树等)

Easy-Form：简易而强大的表单组件

背景

在插件市场中，我们常常面临表单组件功能不全或使用复杂的问题。为了解决这些痛点，我结合了十年的前端开发经验，开发了一款易用且功能全面的表单组件——Easy-Form。

传送门

ext.dcloud.net.cn/plugin?id=2…

DEMO

基础使用

<template>
	<easy-form ref="form" :list="list" v-model="value" :requiredTag="false" />
</template>

<script>
	export default {
		data() {
			return {
				value: {}  // 会根据组件类型自动添加默认值；
			}
		},
		methods: {
			list() {
				return [
					{
						label: '文本输入框',
						desc: '这是额外描述',
						descStyle: 'color:red;font-size:24rpx;',
						type: 'input'
					},
					{
						label: '文本域 ',
						type: 'textarea',
						maxlength: 200
					},
					{
						label: '数组下拉选择',
						type: 'select',
						options: [{label:'张三',id:'a'},{label:'李四',id:'b'}]
					},
					{
						label: '日期',
						type: 'date',
					}
				]
			}
		}
	}
</script>

easy-from 属性

参数	说明	类型	可选值	默认值
list	返回数组，用来表示form-item项	Function	-	-
cacheKey	缓存表单数据，存入storage中	String	-	-
secretKey	缓存表单数据加密密钥，增加安全性	String	-	-
labelPosition	标题文字位置	String	top、left	top
labelWidth	设置文字left位置时，文本最大宽度	String	-	240rpx

easy-from 方法

$check-表单校验

const valid = await this.$refs.form.$check()
if (valid) {
	this.$refs.uToast.show({
		type: 'success',
		message: "校验成功",
	})
} else {
	this.$refs.uToast.show({
		type: 'error',
		message: "校验失败",
	})
}

easy-from list 公有属性

参数	说明	类型	可选值	默认值
label	表单项文本	String	-	-
prop	表单唯一值，必填	String	-	-
desc	表单项描述	String	-	-
descStyle	表单项描述自定义样式	String	-	-
placeholder	输入框占位文本	String	-	-
type	表单项类型	String	input、textarea、select、cascader、date、radio、checkbox、rate、switch、upload	-
required	是否必填	Boolean	-	-
rules	表单校验规则,自定义请看校验规则	Array	['phone','card','email','url',{type: 'array',min: 1,max: 2,message: '请选择1-2个之间'}]	-
show	控制展示表单项目；function中value为表单值，可自动实时显隐控制	Function(value){return boolean}	-	-

easy-from list input额外属性

参数	说明	类型	可选值	默认值
inputType	输入框类型	String	int、number、card、car	-

easy-from textarea 额外属性

参数	说明	类型	可选值	默认值
maxlength	允许输入最大长度	Number	-	-

easy-from select 额外属性

options、flashOptions 属性在checkbox、radio等有一维数组选项值的组件中生效

参数	说明	类型	可选值	默认值
options	选项值 ,Function形势时，可据value值，调用接口动态获取表单选项)	[{label:'',id:''}]、async function(value){return []}	-	-
flashOptions	当options是接口获取数据时，每次显示下拉值时，先动态更新最新数据	Boolean	-	-

easy-from cascader 额外属性

参数	说明	类型	可选值	默认值
valueAllData	value值是否返回整个node；否：只返回node.id	Boolean	-	false
valueByTree	一般级联value是数组，但是有些接口只给某个节点值，设置true会遍历tree节点显示全路径value值，getTree获取数据才生效	Boolean	-	false
props	选项的label、id 的key	-	{label:'label',id:'id'}
getTree	选项值：返回整个树形选项数据	async function(){return [{label:'',id:'',children:[]}]}	-	-
getLevelData	选项值：懒加载；返回每次需要层级的选项数据；index:第几层数据；selectedNode：当前选中的node,一般是接口是parentId:selectedNode.id	async function(index, selectedNode){return [{label:'',id:''}]}	-	-

easy-from upload 额外属性

参数	说明	类型	可选值	默认值
uploadApi	文件上传接口; 一般调用公共uni.uploadFile封装函数;	async funtion(tempUrl){return {url:'',其他额外属性}}	-	-
max	最大上传文件数	Number	-	1
bkImage	自定义上传按钮背景图url，如实现上传身份证	String	-	-
width	宽度	String	-	-
height	高度	String	-	-
isFile	上传其他文件，变更文件列表展示形式	Boolean	-	false