pc端 elementui 弹框

<template>
	<el-dialog :close-on-click-modal="false" :title="addTitle" :visible.sync="open" width="850px" class="formDia">
		<div class="formDiv">
			<el-date-picker v-if="isYear == 'annual'" v-model="planTimes" type="year"
				placeholder="选择年" value-format="yyyy" style="width:100%;"
				clearable/>
			<el-date-picker v-else v-model="planTimes" type="month" placeholder="选择月" format="yyyy-MM"
				value-format="yyyy-MM" style="width:100%;"
				clearable />
    </div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelFn" size="mini">取 消</el-button>
			<el-button type="primary" @click="handleSubmit" size="mini">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		name: 'addTime',
		data() {
			return {
				open: false,
				addTitle: '',
				isYear: false,
				planTimes: ''
			}
		},
		methods: {
			handleSubmit() {
				console.log('carSave ', this.planTimes)
			},
			openFn(o, t) {
				this.isYear = o
				this.addTitle = t
				this.open = true
			},
			cancelFn() {
				this.open = false
			}
		}
	};
</script>

<style lang="less">
	.formDiv {
    margin: 20px;
	}
	.formDia{
		.el-dialog__body{
			padding: 0!important;
		}
    .el-form--label-top .el-form-item__label{
      line-height: 10px!important;
    }
	}
</style>

<addTime @submitOk="submitOk" ref="addTime"/>
import addTime from './compontents/addTime.vue';
components: {
addTime
},
add() {
	this.$refs.addTime.openFn(this.planTimeType, '新增')
},