jtBaseApp/src/components/jt-dialog/dialog.vue

<script setup>
/**
 * element-plus组件
 */
import { ElDialog } from 'element-plus';

/**
 * element-plus字体
 */
import { CircleCloseFilled, Warning } from '@element-plus/icons-vue';
</script>

<template>
	<div class="jt-dialog">
		<!-- 
			modal:是否需要遮罩层
			close-on-click-modal:是否可以通过点击 modal 关闭 Dialog
		 -->
		<el-dialog
			:class="[animationClass]"
			draggable
			:modal="false"
			:destroy-on-close="false"
			v-model="dialogVisible"
			:title="title"
			:style="{ right: right, background: background, height: height, width: width, top: top }"
			@close="handleClose"
		>
			<template #header>
				<div slot="title" class="header-title">
					<span style="line-height:24px;font-size:18px;color:#fff;font-family: 'Alimama_ShuHeiTi_Bold'">{{ title }}</span>
				</div>
			</template>

			<template #default>
				<div class="odin-dialog__content"><slot></slot></div>
			</template>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: '',
	props: {
		showDialog: {
			//接受父级组件的显示标记，用于被watch
			type: Boolean,
			default: false
		},
		title: {
			//Dialog 的标题
			type: String,
			default: 'jt-dialog'
		},
		width: {
			//Dialog 的宽度
			type: String,
			default: '300px'
		},
		top: {
			type: String,
			default: '0px'
		},
		right: {
			type: String,
			default: '0px'
		},
		direction: {
			type: String, //弹出方向
			default: 'rtl' //rtl 从右到左 / ltr 从左到右 / ttb 从上到下/ btt 从下到上
		},

		height: {
			//Dialog 的高度
			type: String,
			default: '100%'
		},
		background: {
			type: String,
			default: 'rgb(0 44 126 / 68%)'
		}
	},

	/**
	 * computed的响应式依赖(缓存)
	 **/
	computed: {
		//渐入动画
		animationClass() {
			if (this.direction === 'rtl') {
				return 'fadein-right';
			} else if (this.direction === 'ltr') {
				return 'fadein-left';
			} else if (this.direction === 'ttb') {
				return 'fadein-top';
			} else if (this.direction === 'btt') {
				return 'fadein-bottom';
			} else {
				return 'fadein-center';
			}
		}
	},

	/* 数据 */
	data() {
		return {
			dialogVisible: this.showDialog // 子组件自己的显示标记，用于真正切换dialog的显示/隐藏
		};
	},
	watch: {
		//观察父级组件的showDialog，并将showDialog的最新值设置给dialogVisible
		showDialog: function(newVal, oldVal) {
			this.dialogVisible = newVal;
		}
	},

	/* 方法 */
	methods: {
		/**
		 * 关闭弹出框事件，触发父级组件的closeJTDialog方法
		 */
		handleClose() {
			this.$emit('closeJTDialog');
		}
	},

	mounted() {}
};
</script>

<style lang="scss">
// el-dialog 加上scoped不起效果
.jt-dialog {
	pointer-events: none; // ***覆盖层元素增加可穿透点击事件***
	.el-dialog {
		pointer-events: auto; // ***弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件）***
		position: absolute !important; //将通知框的position改成absolute，可以在某个div进行显示

		background: rgb(5 45 155 / 70%);
		min-width: 300px;
		overflow: hidden;

		margin-top: 0px !important;

		.el-dialog__header {
			background: url('../../assets/image/backheader.png') no-repeat;
			margin-right: 0px;
			padding: 14px;
		}

		.el-dialog__body {
			padding: 10px;
			color: #fff;
		}
	}
}
</style>