表单的封装
介绍
前端的组件库 npm:
表单: htadmin-form
软件架构
软件架构说明
安装教程
- npm install htadmin-form -S
- 需要element-ui 请 npm install element-ui -S
- 需要jsx 如何安装移步https://github.com/vuejs/babel-plugin-transform-vue-jsx
npm 地址 https://www.npmjs.com/package/htadmin-form
使用说明
在main.js中写入以下内容
;;;;;Vue;Vue;el: '#app';
表单:
html
ps:config是表单的各项数据类型, formConfig是整个表单的配置例如 按钮显示隐藏
js
; // 引入类型config:key: 'name' label: '名字' value: ''// 准备表单格式数据......
效果
弹窗式表单
html
js
;config: key: 'name' label: '名字'
打开 表单js
// 第一个参数是 初始化表单数据,可不传, 第二个参数是各种配置项this$refsalertForm;
效果
数据类型(扩展)
公用配置项 | 类型 | 说明 |
---|---|---|
key | string | 必传且不能重复(表单最后输出对象的key值) |
label | string | 表单控件左侧的标签名。如果不传则无表单格式(适用与在表单中间插入自定义模板) |
value | all | 可以为空,初始化数据作用 |
rules | array | 验证规则,参见 async-validator |
// 特殊配置项
可用控件名称 | 类型 | 特殊配置项 |
---|---|---|
输入框 | Input | inputType(input的type类型), placeholder |
选择框 | Select | options(可选列表-对象/字符串数组,可传一个返回数组的promise),placeholder,labelKey(默认值:label),valueKey(默认值:value) |
单个日期 | SingDate | placeholder |
Switch开关 | Switch | trueValue,falseValue (默认值:true,false) |
单选框 | Radio | options(字符串数组,也可以promise) |
复选框 | Checkbox | options(字符串数组,也可以promise),max(数字类型,最大可选),min(最小可选) |
UploadImg | UploadImg | url(上传图片路径), max(最大数量), size(大小限制/kb) |
富文本 | Editor | . |
自定义控件 | CustomComponent | 见下文 |
......更多
表单配置项
表单使用 formConfig属性 传入一个对象
弹窗表单使用 openAlert函数的 第二个参数 (对象)
传入对象的配置项
参数 | 类型 | 说明 | 例子/默认值 |
---|---|---|---|
label-width | string | 标签的宽度 | '120px' |
showCancelButton | boolean | 是否显示取消按钮 | true |
showConfirmButton | boolean | 是否显示确定按钮 | true |
confirmButtonText | string | 确定按钮的文本 | '确定' |
cancelButtonText | string | 取消按钮的文本 | '取消' |
closeOnClickModal | boolean | 是否可通过点击遮罩关闭(弹窗可用) | false |
... | more | 更多参考element-ui | ... |
DEMO请看附件
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
码云特技
- 使用 Readme_XXX.md 来支持不同的语言,例如 Readme_en.md, Readme_zh.md
- 码云官方博客 blog.gitee.com
- 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
- GVP 全称是码云最有价值开源项目,是码云综合评定出的优秀开源项目
- 码云官方提供的使用手册 https://gitee.com/help
- 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/