# el-dialog-form

**Repository Path**: chenfency/el-dialog-form

## Basic Information

- **Project Name**: el-dialog-form
- **Description**: 基于element-ui封装的弹窗式表单组件
- **Primary Language**: Unknown
- **License**: MPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 4
- **Created**: 2021-08-12
- **Last Updated**: 2024-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# el-dialog-form

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

#### 使用说明

1.  插件基于element-ui开发：[element-ui文档](https://element.eleme.cn/#/zh-CN/component/installation)
2.  安装前请先确保已经安装element-ui
3.  npm install element-ui --save
4.  验证器文档地址：[https://github.com/yiminghe/async-validator](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>

```