3.0.0 • Published 1 year ago
el-dialog-form v3.0.0
el-dialog-form
介绍
基于element-ui封装的弹窗式表单组件
使用说明
- 插件基于element-ui开发：element-ui文档
- 安装前请先确保已经安装element-ui
- npm install element-ui --save
- 验证器文档地址：https://github.com/yiminghe/async-validator
安装使用
- npm install el-dialog-form --save
全局导入
main.js
import Vue from 'vue';
import ElDialogForm from 'el-dialog-form';
Vue.use(ElDialogForm);页面导入
import ElDialogForm from 'el-dialog-form';
export default {
components: {
ElDialogForm
}
}参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| visible | 是否显示dialog | Boolean | true | false |
| title | 标题 | String | - | - |
| width | 表单宽度 | String | - | - |
| items | 表单项，详细见下方说明 | Array | - | [] |
| form | 初始表单值 | Object | - | {} |
items参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| elName | 表单项的类型,element ui的组件标签或者slot,必填 | String | el-input/el-input-number/el-radio-group/el-checkbox-group/el-select/el-switch/el-time-picker/el-date-picker/slot | - |
| span | el-col的span值 | Number | - | 20 |
| label | 表单项label | String | - | - |
| prop | 表单项key | String | - | - |
| tip | 文字提示 | String | - | - |
| rules | 表单验证规则，验证器文档地址:https://github.com/yiminghe/async-validator | Array | - | - |
| hidden | 隐藏条件函数，返回true/false来控制显示隐藏 | Function | - | - |
| disabled | 禁用条件函数，返回true/false来控制禁用启用 | Function | - | - |
| options | 选择项数组，仅type等于radio-group/checkbox-group/select生效,详细见下方说明 | Array | - | - |
| on | 事件监听，key->value形式，key值同element-ui的Events，value为一个函数，详见element-ui文档 | Object | - | - |
| attrs | 属性参数，key->value形式，key值同element-ui的Attributes，详见element-ui文档 | Object | - | - |
options参数说明
| 参数名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 显示的label | String | - | - |
| value | 选中的value | Any | - | - |
elName==='slot'
绑定值为：form
示例代码
<template>
<div class="app-container">
<el-button @click="dialog = true">打开表单</el-button>
<!-- 表单 -->
<el-dialog-form :visible.sync="dialog" title="表单标题" width="500px" :items="items" :form="form"
@submit="onSubmit">
</el-dialog-form>
</div>
</template>
<script>
import elDialogForm from 'el-dialog-form'
export default {
components: {
elDialogForm
},
data() {
return {
form: {
input: '',
inputNumber:0,
switch:false,
timePicker:'',
datePicker:'',
radioGroup:1,
checkboxGroup:[],
select:[],
checkbox:true
},
dialog: false,
items: [
{
elName: 'el-input',
label: '普通输入',
prop: 'input',
rules: [{
required: true,
message: "请输入名称",
trigger: 'blur'
}],
attrs:{
placeholder:'请输入名称'
},
on: {
blur: (e) => {
console.log(e);
}
},
},
{
elName: 'el-input-number',
label: '计数器',
prop: 'inputNumber',
on: {
}
},
{
elName: 'el-switch',
label: '开关',
prop: 'switch',
on: {
}
},
{
elName: 'el-time-picker',
label: '时间选择',
prop: 'timePicker',
on: {
}
},
{
elName: 'el-date-picker',
label: '日期选择',
prop: 'datePicker',
attrs:{
},
},
{
elName: 'el-radio-group',
label: '单选框组',
prop: 'radioGroup',
tip:'radio-group说明',
options:[
{
label:'苹果',
value:1
},
{
label:'西瓜',
value:2
}
],
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
{
elName: 'el-checkbox-group',
label: '多选框组',
prop: 'checkboxGroup',
options:[
{
label:'金毛',
value:1
},
{
label:'哈士奇',
value:2
}
],
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
{
elName: 'el-select',
label: '下拉选择',
prop: 'select',
options:[
{
label:'鼠标',
value:1
},
{
label:'键盘',
value:2
}
],
attrs:{
placeholder:'请输入名称'
},
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
{
elName: 'el-checkbox',
label: '选择',
prop: 'checkbox',
attrs:{
label:"我同意"
},
on:{
change:(e)=>{
console.log('-----------');
console.log(e);
}
}
},
]
}
},
methods: {
onSubmit(form) {
console.log(form);
}
},
}
</script>