el-dialog-form

介绍

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

使用说明

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

安装使用

1. 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>