el-dialog-form

介绍

基于element-ui封装的弹窗式表单组件

git地址

https://gitee.com/chenfency/el-dialog-form.git

更新日志

2021-8-12

• 版本1.0.0

2021-8-17

• 优化组件，兼容element原组件所有Attributes及Events

2021-9-9

• 新增tip提示

安装教程

1. npm install el-dialog-form --save

使用说明

1. 插件基于element-ui开发：element-ui文档
2. 安装前请先确保已经安装element-ui
3. npm install element-ui --save
4. 验证器文档地址：https://github.com/yiminghe/async-validator

参数说明

参数名	说明	类型	可选值	默认值
visible	是否显示dialog	Boolean	true	false
title	标题	String	-	-
width	表单宽度	String	-	-
items	表单项，详细见下方说明	Array	-	[]
form	初始表单值	Object	-	{}

items参数说明

参数名	说明	类型	可选值	默认值
type	表单项的类型,必填	String	input/input-number/radio-group/checkbox-group/select/switch/time-picker/date-picker	-
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	-	-
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	-	-

示例代码

<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: [
                    {
                        type: 'input',
                        label: '普通输入',
                        prop: 'input',
                        rules: [{
                            required: true,
                            message: "请输入名称",
                            trigger: 'blur'
                        }],
                        attrs:{
                            placeholder:'请输入名称'
                        },
                        on: {
                            blur: (e) => {
                                console.log(e);
                            }
                        },
                    },
                    {
                        type: 'input-number',
                        label: '计数器',
                        prop: 'inputNumber',
                        on: {
                            
                        }
                    },
                    {
                        type: 'switch',
                        label: '开关',
                        prop: 'switch',
                        on: {
                            
                        }
                    },
                    {
                        type: 'time-picker',
                        label: '时间选择',
                        prop: 'timePicker',
                        on: {
                            
                        }
                    },
                    {
                        type: 'date-picker',
                        label: '日期选择',
                        prop: 'datePicker',
                        attrs:{
                            
                        },
                    },
                    {
                        type: 'radio-group',
                        label: '单选框组',
                        prop: 'radioGroup',
                        tip:'radio-group说明',
                        options:[
                            {
                                label:'苹果',
                                value:1
                            },
                            {
                                label:'西瓜',
                                value:2
                            }
                        ],
                        on:{
                            change:(e)=>{
                                console.log('-----------');
                                console.log(e);
                            }
                        }
                    },
                    {
                        type: 'checkbox-group',
                        label: '多选框组',
                        prop: 'checkboxGroup',
                        options:[
                            {
                                label:'金毛',
                                value:1
                            },
                            {
                                label:'哈士奇',
                                value:2
                            }
                        ],
                        on:{
                            change:(e)=>{
                                console.log('-----------');
                                console.log(e);
                            }
                        }
                    },
                    {
                        type: 'select',
                        label: '下拉选择',
                        prop: 'select',
                        options:[
                            {
                                label:'鼠标',
                                value:1
                            },
                            {
                                label:'键盘',
                                value:2
                            }
                        ],
                        attrs:{
                            placeholder:'请输入名称'
                        },
                        on:{
                            change:(e)=>{
                                console.log('-----------');
                                console.log(e);
                            }
                        }
                    },
                    {
                        type: 'checkbox',
                        label: '选择',
                        prop: 'checkbox',
                        attrs:{
                            label:"我同意"
                        },
                        on:{
                            change:(e)=>{
                                console.log('-----------');
                                console.log(e);
                            }
                        }
                    },
                ]
            }
        },
        methods: {
            onSubmit(form) {
                console.log(form);
            }
        },
    }
</script>