justine-form
1.0.7 • Public • Published 表单的简单封装
在element-ui上进行的封装,具体的传参可以参考element-ui传参方式
参数设置
参数 |
说明 |
类型 |
默认值 |
inline |
行内表单模式 |
boolean |
false |
formOptions |
表单样式及保存按钮样式 |
Object |
|
formData |
表单模板 |
Object |
|
formTemplate |
表单模板 |
Object |
|
formRules |
表单验证规则,具体的使用可以参照eleemnt-ui表单的规则验证 |
Object |
|
formOptions 参数设置
参数 |
说明 |
类型 |
可选值 |
默认值 |
labelWidth |
表单 label 宽度 |
String |
|
|
labelPosition |
表单 label 位置 |
String |
|
|
saveButtonSize |
保存按钮尺寸 |
String |
medium / small / mini |
|
saveButtonType |
保存按钮类型 |
String |
primary / success / warning / danger / info / text |
|
saveButtonIcon |
保存按钮图标类名 |
String |
|
|
saveButtonText |
保存按钮文字 |
String |
|
|
saveLoading |
保存按钮是否加载中状态 |
Boolean |
|
false |
|
|
|
|
|
formTemplate参数设置
参数 |
说明 |
类型 |
可选值 |
默认值 |
title |
表单 label 的名称 |
String |
|
|
value |
表单模板的默认值 |
|
|
|
component.name |
表单渲染的组件名,组件请参考 组件,自定义组件写法请参考自定义组件示例 |
String |
el-input / el-input-number / el-radio / el-checkbox / el-select / el-cascader / el-switch / el-slider / el-time-select / el-time-picker / el-date-picker / el-rate / el-color-picker / 自定义组件 |
el-input |
component.options |
el-radio / el-checkbox / el-select 中的 options |
Array |
|
|
component.show |
是否显示此项 |
Boolean |
|
|
component.disabled |
是否禁用此项 |
Boolean |
|
|
component.span |
表单布局所占栅格数,栅格布局请参考 Layout 布局 |
Number |
|
|
component.offset |
表单栅格布局偏移量,栅格布局请参考 Layout 布局 |
Number |
|
|
安装
npm i justine-form
使用
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import JustineForm from 'justine-form'
Vue.use(ElementUI)
Vue.use(JustineForm)
Package Sidebar
Install
Weekly Downloads