彈窗表單的使用，基於element-ui二次封裝

el-dialog-form

介紹

基於element-ui封裝的彈窗式表單組件

git地址

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

安裝教程

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>