1.0.7 • Published 5 years ago
##表单的简单封装
在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)