对element的dialog对话框进行二次封装

子组件

<template>
	<div>
		<el-dialog :title="dialogTitle" :visible.sync="visible" :before-close="cancel">
			<slot>
				<p>弹框自定义的内容</p>
			</slot>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		props: {
			dialogTitle: {
				type: String,
				default: '标题',
			},
			visible: {
				type: Boolean,
				default: false,
			},
		},

		methods: {
			// 取消按钮
			cancel() {
				this.$emit('cancel')
			},
			// 确认按钮
			confirm() {
				this.$emit('confirm')
			},
			// 关闭前的回调
			handleClose() {
				this.$emit('handleClose')
			},
		},
	}
</script>

</script>

父组件

<template>
			<Dialog 
				 :visible="dialogVisible"
				 @cancel="cancel" 
				 @confirm="confirm"
				 @handleClose="handleClose">
				 
				 <div>具体的内容</div>
				   
			</Dialog>
</template>
 

<script> 
	// 这里的 Dialog是在全局注册的
	export default {  
		data() {
			return {
				 dialogVisible: true
			}
		},
		methods: {
			// 关闭对话框
			handleClose() {},
			// 确认对话框
			confirm() {},
			// 取消对话框
			cancel() {},
	}
</script>