custom-components/src/components/Dialog/index.vue

<template>
	<div class="dialog-com">
		<el-dialog 
			v-on="$listeners"
			v-bind="$attrs"
			:close-on-click-modal="closeOnClickModal"
			custom-class="dialog-com-el-dialog">
			<!-- <div > -->
				<el-scrollbar v-loading="loading" :style="oriHeight? ('height:'+ oriHeight) : ''">
					<div class="pr10 pb1"><slot></slot></div>
				</el-scrollbar>
				<div v-if="hasFooter" class="dialog-com-dialog-footer pt10 pr10" >
						<div slot="footer" v-if="!$scopedSlots['footer']">
							<el-button v-if="showCancelButton" @click="dialogOnClose">{{cancelButtonText}}</el-button>
							<el-button v-if="showConfirmButton" @click="$emit('onSubmit');" :type="confirmButtonType">{{confirmButtonText}}</el-button>
						</div>
					<div slot="footer" v-else>
						<slot name="footer"></slot>
					</div>
				</div>
			<!-- </div> -->
		</el-dialog>
		
	</div>
</template>

<script>
export default {
	name: 'CustomDialog',
	props: {
		'height':{},
		'close-on-click-modal':{
			default: false
		},
		'showConfirmButton': {
			default: true
		},
		'showCancelButton': {
			default: true
		},
		'confirmButtonText': {
			default: '确 定'
		},
		confirmButtonType: {
			default: 'primary'
		},
		'cancelButtonText': {
			default: '取 消'
		},
		beforeClose: {

		},
		loading: {
			default: false
		}
	},
	computed:{
		hasFooter(){
			return this.showConfirmButton||this.showCancelButton||this.$scopedSlots['footer']
		}
	},
	data(){
		return {
			oriHeight: ''
		}
	},
	created(){
		if(this.height){
			if(typeof this.height == 'number'){
				this.oriHeight = this.height+ 'px'
			} else {
				this.oriHeight = this.height
			}
		}
	},
	mounted() {
		
	},
	methods: {
		dialogOnClose(){
			if(this.beforeClose){
				this.beforeClose().then(()=>{
					this.$emit('update:visible', false);
				})
			} else {
				this.$emit('update:visible', false);
			}
		}
	}
}
</script>

<style lang="scss">
.el-dialog.dialog-com-el-dialog{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
	margin-top: 0!important;
	.el-dialog__body{
		padding: 10px 10px 10px 15px;
		>.el-scrollbar{
			.el-scrollbar__wrap{
				overflow-x: hidden;
			}
		}
	}
	.el-dialog__header{
		padding: 15px;
		padding-bottom: 10px;
	}
	.dialog-com-dialog-footer{
		text-align: right;
		border-top: 1px solid #ccc;
	}
}
</style>