justine-form
v1.0.7
Published
在element-ui上封装的配置表单
Downloads
13
Readme
##表单的简单封装 在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)