no message

src/components/jt-dialog/dialog.vue

@@ -0,0 +1,157 @@
+<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: '10px'
+		},
+		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;
+
+		.el-dialog__header {
+			background: url('../../assets/image/backheader.png') no-repeat;
+			margin-right: 0px;
+			padding: 14px;
+		}
+
+		.el-dialog__body {
+			padding: 10px;
+			color: #fff;
+		}
+	}
+}
+</style>