0.2.3 • Published 2 years ago
wzk-component-form v0.2.3
安装
这个组件宽度问题需要解决
demo请查看demo中的文件
npm install wzk-component-form初始化
// main.js
import Vue from 'vue'
import LowForm from 'wzk-component-form'
Vue.use(LowForm)
// or
import { LowForm } from 'wzk-component-form'
export default {
components: {
LowForm
}
}使用示例
<low-form :config="config" :data="data" @onEvent="onEvent"></low-form> export default {
data() {
return {
data: {
...
},
config: {
...
}
}
}
}参数
| 参数名 | 类型 | 描述 |
|---|---|---|
| data | Object | 数据源 |
| config | Object | 配置 |
| config.form | Object | 表单配置项，支持el-form所有属性 |
| config.row | Object | 栅格布局参数，支持el-row所有属性 |
| config.columns | Array | 表单项配，支持el-form-item中的所有属性置 |
| config.columns[].type | String | 表单项类型，详见下表表单项配置类型 |
| config.columns[].{MODE}Type | String | 模式对应表单项类型 |
| config.columns[].show | Boolean\Function | 是否展示表单项，如果值为函数，需要返回Boolean值 |
| config.columns[].col | Object | 栅格布局参数，支持el-col所有属性 |
| config.columns[].props | String | 具体展示组件属性，详细可见element-ui组件文档 |
| config.columns[].{MODE}Props | Object | 对应模式配置 |
| config.columns[].props.event | String | 相关事件名 |
表单项配置类型
| 类型值 | 类型名称 | 说明 |
|---|---|---|
| slot | 插槽 | 插槽名同prop属性 |
| text | 文本、html显示 | 通过props内设置type='html'展示html |
| 当type=html时，可使用key对应元素属性，event对应抛出事件名 | ||
| input | 输入框 | 同el-input。添加modifier属性，支持修饰符值 |
| number | 数字输入框 | 同el-input-number |
| radio | 单选框 | 同el-radio |
| checkbox | 多选框 | 同el-checkbox |
| select | 下拉框 | 同el-select |
| date | 日期选择框 | 同el-date-picker |
| time | 时间选择框 | 同el-time-picker |
| cascader | 级联 | 同el-cascader |
| switch | 开关 | 同el-switch |
| slider | 滑块 | 同el-slider |
| rate | 评分 | 同el-rate |
| transfer | 穿梭框 | 同el-transfer |
| progress | 进度条 | 同el-progress |
| tree | 树形控件 | 同el-tree,触发的事件由onFormTreeEvent传出 |
| table | 表格控件 | 同low-table触发的事件由onFormTableEvent传出 |
| button | 按钮控件 | options 同el-button |
| custom（自定义组件后半段名称） | 自定义组件 | 以Form开头，比如FormCustomerComponent，且此组件需要全局注册；但type中只要写CustomerComponent； |
插槽
当type为slot时，提供同prop值一样的插槽
...
事件
onEvent: 事件总处理，所有事件都由此事件发射
event: {String} 子事件名params: {Object} 事件相关参数
onFormDataChange: 表单数据变化
newValue: 新值oldValue: 旧值item: 表单项配置
onFormTreeEvent: 树相关事件传递
event: 事件名params: 事件参数
onFormTableEvent: 表格相关事件传递
event: 事件名params: 事件参数
onFormButtonEvent: 按钮点击相关事件
params: 按钮配置
主题变量
未使用主题变量
依赖
知识点？
使用共识？
如已提供相关表单项，可直接使用。有个性化需要，请通过slot实现
特点？
该组件属性纯组件中的表单组件，属于基础组件