justine-form

表单的简单封装

在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)