hong-h5-form表单设计器（移动端 ）

hong-h5-form

注

目前插件版本已更新至v1.4.0（版本更新速率其实是依据项目需求，不断升级迭代）并且也整理了相关的文档在本地。此处只能简单介绍，并且落后版本较多，也没有时间更新博客。

样式风格

一、介绍

说明
hong-h5-form是基于mand-mobile，专门为移动端迅速搭建form表单的一款插件。
通过vue-cli-plugin-mand（详见mand-mobile官方文档）初始化项目之后（建议全量引入，如需主题定制，请使用官网的调色板功能，替换mand-mobile包中的css，如果按需引入，必须在main.js中导入mand-mobile/lib/mand-mobile.css，否则插件样式将不生效）

  npm install hong-h5-form

  // main.js中引入
  import HongH5Form from 'hong-h5-form'
  import 'hong-h5-form/lib/hong-h5-form.css'
  Vue.use(HongH5Form)

使用

  // options为必填项
  <hong-form v-model="form" :options="formOptions"></hong-form>

  <hong-tabs-form :value="form" :options="navOptions" :formOptions="formOptions"></hong-tabs-form>

二、hong-form配置

Variables

属性	功能	类型	默认值
v-model	双向绑定数据	Object	{}
options	表单配置，见options attributes	Object	{}
mark	特殊标记，如：{ isEleSign: true }	Object	{}
dicList	批量获取的字典列表，如{ bank: [] }	Object	{}
isField	是否显示底部边线	Boolean	false
disabled	是否可编辑	Boolean	false

disabled优先级：Variables > Options Attributes > Items Attributes

Options Attributes

属性	功能	类型	默认值
disabled	是否禁用	Boolean	false
items	表单配置，见items attributes	Array	[]

Items Attributes

属性	功能	类型	默认值	可选值
label	label名称	String
name	字段名	String
type	控件类型	String	input
inputType	控件类型(当type=input)	String	text	text、bankCard、phone、money、digit、password等
placeholder	表单占位符	String
brief	描述	String
align	对齐方式	String	right	left、right、center
display	是否可见	Boolean	true
disabled	是否可编辑	Boolean	false
custom	自定义类名	String
isField	是否显示底部边线	Boolean	false
maxlength	最大字符长度（当type=input、textarea）	String
append	后面的辅助文字（当type=input）	String
virtualKeyboard	是否使用金融键盘	Boolean	false
virtualKeyboardOkText	金融键盘确定文案	String
format	日期格式化（当type=date）	String	yyyy-MM-dd
buttonType	button类型（当type=button）	String	default	default, primary, warning, link
loading	点击按钮是否需要loading效果（当type=button）	Boolean	false
round	按钮是否圆角（当type=button）	Boolean	false
capture	调用相机、相册、全部(当type=upload)	String	all	camera、photo、all
accept	调用相机、相册、全部(当type=upload)	String	image/*	原生属性
upload	上传配置，见upload Attributes(当type=upload)	Object
download	下载配置，用于反显图片，见download Attributes(当type=upload)	Object
dic	字典类型(当type=select、picker)	String
dicUrl	字典接口(当type=select、picker)	String
dicMethod	获取字典方法(当type=select、picker)	String	get	post、get
dicParams	请求参数(当type=select、picker)	Object
dicData	静态字典(当type=select、picker)	Array
props	label、value映射(当type=select、picker)	Object
multiple	可否多选（当type=select）	Boolean	false
tag	当多选的数据大于1时，是否已tag形式展示（当type=select且multiple=true）	Boolean	false
cascaderItem	多级联动解决方案，（当type=picker），使用方法见示例	String
cols	展示列数，3=省市区 2=省市 1=省（当type=address）	Number	3
items	多记录配置，基本同于hong-form > Items Attributes，见注释（当type=multi-record）	Object
change	当值改变时触发事件，详情见Items Methods Attributes	Function
click	（当type=button时）点击事件，详情见Items Methods Attributes	Function

字典引用优先级：dicUrl > dic > dicData
配置dicUrl时，由于插件内置使用axios，请自行安装axios，否则将不会生效

items配置项基本同于hong-form > Items Attributes，但暂时不支持formslot

Type Attributes

属性	功能
input	输入框
textarea	文本框
select	选择框（适用于选项较少的情况）
picker	选择框（适用于选项较多的情况）
date	日期选择框
date-during	日期范围选择框
search	搜索框
upload	图片上传
caption	标题
address	地址选择
button	按钮
multi-record	多记录框

当给textarea配置required时，暂不支持*标记，但数据任会被校验

Upload Attributes

属性	功能	默认值
method	一般用axios封装的request方法，返回Promise	null
param	请求参数名称，请求参数以formdata形式	file
prop	接口返回参数的映射	id

接口返回参数格式： { data: { id: ‘1’ } }

Download Attributes

属性	功能	默认值
url	下载图片接口名
param	请求参数名称	id

在实现图片反显时，若没有配置download，则默认认为返回的数据即图片链接
否则接口需直接返回文件流，直接放于img>src用于反显图片，如：localhost:8080/uploadfile?id=1
（暂时只提供当前两种解决图片关联的方案，即通过id、文件链接）

Items Methods Attributes

方法名	功能	回调参数	返回
change	值改变时触发	{ value, options, form, vue, selectItem }
click	按钮点击时触发	{ options, form, loading }

click事件暂只支持按钮点击，后续会拓展

Methods

方法名	功能	参数	返回
valid	校验方法		Promise

Scoped Slot

name	说明	参数
列表单的名称+Form(nameForm)	自定义表单内容	{ $options, $index, $form }

三、hong-tabs-form配置

Variables

属性	功能	类型	默认值
value	表单值	Object	{}
options	tab配置，见options attributes	Object	{}
formOptions	form配置，见formOptions attributes	Object	{}
defaultActive	默认 tab active	String
checkList	特殊标记，用于hong-form的mark标记	Array	[]
disabled	是否禁用	Boolean	false
dicList	批量获取的字典	Object	{}
addressList	用于type=address控件的数据，可选	Array	[]

Options Attributes

属性	功能	类型	默认值
isAdd	是否可动态添加tab	Boolean	false
max	最大可添加tab数量	Number	0
active	默认选中名	String	‘’
items	tab配置，见items attributes	Array	[]

Items Attributes

属性	功能	类型	默认值
name	tab name	String
label	tab label	String
dicNoCache	由dicUrl加载的网络字典，是否不需要缓存	Boolean	false
closable	是否显示可关闭图标	Boolean
column	是否是可动态增删的tab，作为标识	Array	[]

如果配置column，则会将该tab当做多记录处理，有且只有一个tab可配置column

FormOptions Attributes

• @key 对应Options的name，强耦合关系

Events

方法名	功能	参数	说明
init	tabs-form初始化时回调	{dicTypes，addressType}	见注释

@init dicTypes参数为formOption配置的dic数组，一般调用获取批量字典的方法在此处执行
addressType参数，配置中是否存在address控件，如果存在请在此处调用获取省市区字典接口或者赋静态值

Methods

方法名	功能	参数	返回
valid	校验方法		Promise

Scoped Slot

name	说明	参数
footer	底部内容，一般用于放置按钮，保存等
列表单的名称+Form(nameForm)	自定义表单内容	{ $options, $index, $form, $tab }

联系

个人作品，仅供学习