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 }
联系

个人作品，仅供学习

hong-h5-form表单设计器（移动端 ）相关推荐

  1. vue集成Variant Form表单设计器

    1.安装 npm install vform-builds 2.引入并全局注册VForm组件 import Vue from 'vue' import App from './App.vue'impo ...

  2. activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器

    介绍 基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来 工具地址: http://tools.xiaoyaoji.cn/form Gi ...

  3. Antd Vue 表单生成快速开发指南，内附强大的表单设计器

    之前发布了一款基于Element的表单设计器,可以快速设计和生成表单,设计器地址:http://form.making.link/.现在我可以告诉大家,Antd表单支持来了,可以使用设计器设计好表单后 ...

  4. 表单设计器—HTML元素操作

    表单设计器界面图为: 主编辑区域的TabControl分为设计模式和编码模式两个页,设计模式页包含dhtml edit control,实例名称为:axDHTMLEdit:编码模式页包含多行文本框,实 ...

  5. 基于Vue,ElementUI开发的一款表单设计器

    介绍 基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来 工具地址:http://form.making.link GitHub地址:h ...

  6. web表单设计器Ueditor Formdesign Plugins安装使用教程

    安装扩展 请先下载扩展,建议下载完整带示例包,如果你下载独立扩展包,那你还需要另外下载Ueditor 下载扩展 安装 解压后,这个目录便是表单设计器扩展的全部 独立下载的用户,同样 copy 到 Ue ...

  7. 几款常用的表单设计器解决方案

    在日常前端开发中,表单可以说是最常用的一种数据录入及展示组件.如果项目里有成百上千个表单需要手动编写代码,这将极大的一笔极大的人力开支.这时候,选择一款合适的表单设计器,就显得非常重要了,不仅能极大的 ...

  8. FormMaking表单设计器的使用

    在开发过程中有一个可以让客户自己来设计表单的需求,看了多个动态表单生成的,最后选择了FormMaking,主要是这个基于vue和elmenet-ui的一款表单设计器,跟我们的项目更贴合. FormMa ...

  9. SpringBoot +LayUI 实现表单设计器

    在设计OA开发时会涉及流程动态绑定表单,基于这种情况,我集成了网上开源的LayUI 表单设计器:layui-form-create: layui表单生成器 效果展示: 默认展示页面: 修改页面: 项目 ...

  10. flowable表单设计器选型

    用flowable实现工作流不可避免有表单的需求,讲一下flowable表单设计器的选择. flowable有自带的表单设计器,这个结合业务需求看是否合适. 网上也有很多开源的设计器,如果用开源的表单 ...

最新文章

  1. 您有一份意外的福利待领取！
  2. 教你搞定补码不恢复余数除法中够减和商的关系
  3. AR# 58294 Zynq-7000 SoC: PS SPI 控制器文档升级
  4. linux mint 18 mysql_linux mint下mysql中文支持问题
  5. 定义返回函数指针（地址）的函数
  6. Iphone 视图跳转方法总结
  7. 在安装project2010 64位时提示 “无法安装64位office，因为已有32位版本”解决方法
  8. Oracle 11g用户创建、授权和导入dmp文件
  9. vlc的应用之四：vlc的Mozilla Plugin
  10. 服务器为啥要搭建在2012系统,Windows Server2012R2怎么配置为DNS服务器
  11. 河南科技学院新科学院计算机,河南科技学院新科学院
  12. 振动噪声测试分析软件,DASP-V11专业版 振动噪声应变冲击
  13. WPS专业版自带字体
  14. html中小星星打分,折腾：2颗星星+纯CSS实现星星评分交互效果
  15. security+考试的一些整理
  16. 属性的遍历：for...in 循环
  17. android 各国时区
  18. Ps算法Python实现：图层混合模式-色相
  19. GICV2GICV3的基础知识
  20. PHPBB3的用户密码

热门文章

  1. 顺序有序表进行二分查找
  2. PHP炫酷,PHP创建一个炫酷的图表
  3. 【百度AI_人脸识别】图片对比相似度、人脸对比登录（调摄像头）
  4. http://www.xueh188.top/index.php/archives/3/
  5. OpenFire源码学习之二十二：openfie对用户的优化(下)
  6. 2023全球Top1000计算机科学家发布，中国96名科学家上榜，总数世界第二
  7. 软件测试面试真题 | Selenium 的工作原理是什么？
  8. (linux)INIT_WORK和INIT_DELAYED_WORK详解
  9. cocos2dx如何添加popScene的场景动画
  10. Mac应用程序无法打开或文件损坏的处理方法,Mac任何来源开启教程