1.1.5 • Published 1 year ago
wzq-ui v1.1.5
wzq-ui
介绍
vue2基于element封装form表单
依赖组件
element-ui、lodash、wangeditor
安装
npm install wzq-ui
文档
w-form
属性
options 表单配置项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| type | 表单项使用的组件，例el-input | string | — | |
| prop | 表单项绑定字段 | any | ||
| value | 表单项默认值 | any | — | — |
| label | 表单域标签 | string | — | — |
| span | 仅当表单inline=false时生效（inline默认为false） | string/number | — | 24 |
| placeholder | 输入框占位文本 | string | — | — |
| rules | 表单验证规则 | object | — | — |
| attrs | 表单项组件的属性配置（详见具体组件文档） | object | — | — |
| showRule | 表单项是否显示方法 | function | 返回 boolean | — |
| disabled | 表单项是否禁用方法 | function | 返回 boolean | — |
| formItemAttrs | el-form-item属性 详见 | object | — | — |
| children | 主要针对el-radio、el-checkbox、el-select进行的特殊处理；建议使用更简便的w-radio、w-checkbox、w-select | Array | — | — |
| slot | 参考el-inputslot | object | — | — |
| showTitle | 弹窗嵌套表单鼠标是否显示悬浮提示信息,值可通过attrs.title修改 | boolean | true | false |
方法
重写了validate方法，例：
this.$refs.form.validate().then(res => {
console.log('验证成功', res);
})editForm方法，给表单设置默认值
this.$refs.form.editForm(row)w-radio
属性
参考element
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 静态模式数据源 | array | — | — |
| prop | 数据源的属性匹配规则 | object | — | {value:'value',label:'label} |
| action | 动态获取数据方法 | function | — | — |
| dataPreprocess | 对返回的数据进行预处理 | function | — | — |
| radioAttrs | radio配置项 | object | 详见 | — |
| radioType | radio类型 | string | radio/ button | radio |
w-checkbox
属性
参考element
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 静态模式数据源 | array | — | — |
| prop | 数据源的属性匹配规则 | object | — | {value:'value',label:'label} |
| action | 动态获取数据方法 | function | — | — |
| dataPreprocess | 对返回的数据进行预处理 | function | — | — |
| checkboxAttrs | checkbox配置项 | object | 详见 | — |
| checkboxType | checkbox类型 | string | checkbox/ button | checkbox |
w-select
属性
参考element
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| data | 静态模式数据源 | array | — | — |
| prop | 数据源的属性匹配规则 | object | — | {value:'value',label:'label} |
| action | 动态获取数据方法 | function | — | — |
| actionParams | 动态数据传参 | object | — | — |
| dataPreprocess | 对返回的数据进行预处理 | function | — | — |
w-editor
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| toolbarConfig | 工具栏配置 | object | 详见 | {} |
| editorConfig | 编辑器配置 | object | 详见 | {placeholder: '请输入内容...'} |
| mode | default默认模式 - 集成了 wangEditor 所有功能;simple简洁模式 - 仅有部分常见功能，但更加简洁易用 | srting | default / simple | default |
| editorStyle | 富文本样式 | object | — | {height: '300px'} |
w-dialog
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | 表单配置项 | object | 详见 | — |
| editForm | 表单回显数据 | object | 详见 | {placeholder: '请输入内容...'} |
| formAttrs | 表单属性 | object | 详见 | — |
方法
editForm方法，给表单设置默认值
this.$refs['w-dialog'].editForm(row)w-drawer
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| options | 表单配置项 | object | 详见 | — |
| editForm | 表单回显数据 | object | 详见 | {placeholder: '请输入内容...'} |
| formAttrs | 表单属性 | object | 详见 | — |
方法
editForm方法，给表单设置默认值
this.$refs['w-drawer'].editForm(row)