hong-h5-form表单设计器(移动端 )
hong-h5-form一、介绍说明hong-h5-form是基于mand-mobile,为迅速搭建form表单的一款插件。通过vue-cli-plugin-mand(详见mand-mobile官方文档)初始化项目之后(建议全量引入,如需主题定制,请使用官网的调色板功能,替换mand-mobile包中的css,如果按需引入,必须在main.js中导入mand-mobile/lib/mand-mob
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 }
|
联系
个人作品,仅供学习
更多推荐
所有评论(0)