前端组件库
介绍
前端的组件库 npm:
表单: vue-admin-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/vue-admin-form
使用说明
引入(基础) // main.js
import VueAdmin from 'vue-admin-form';
Vue.use(VueAdmin);
表单:
html
<elm-form ref="myForm" :config="config" :formConfig="{showCancelButton: false, confirmButtonText: '点击添加'}"> </elm-form>
js
import * as type from "vue-admin-form"; // 引入类型
config: [ new type.Input({ key: 'name', label: '名字', value: ''}) ] // 准备表单格式数据......
效果
弹窗式表单
html
<elm-alert-form ref="alertForm" :config="config"> </elm-alert-form>
js
import {Input} from "vue-admin-form";
config: [ new Input({ key: 'name', label: '名字' }) ]
打开 表单js
this.$refs.alertForm.openAlert({name: '名字'}).then( // alertForm是表单html ref的名字 第一个参数是初始化数据对象, 第二个是配置项
({form, close}) => {
this.$message(JSON.stringify(form));
close();//调用close在请求完成之后关闭
}
)
效果
数据类型(扩展)
公用配置项 | 类型 | 说明 |
---|---|---|
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