ezhizao_dms_app/components/dialog-base/dialog-base.vue

<template>
	<view v-if="visible" class="dialog-container uni-column">
		<view class="bg"></view>
		<view class="dialog-body">
			<view class="close-btn uni-column" @click="close">
				<image class="close-btn-icon" src="../../static/images/login-dialog-close-icon.png" mode="widthFix" />
			</view>
			<view class="dialog-title">
				<text class="label">{{props.title}}</text>
			</view>
			<slot></slot>
			<slot name='footer'></slot>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const visible = ref(false)
	
	const props = defineProps({
	  title: {
		  type: String,
		  default: '对话框'
	  }
	})
	
	const open = () => {
		visible.value = true
	}
	
	const close = () => {
		visible.value = false
	}
	
	/** 暴露给父组件的方法 */
	defineExpose({
	  open, 
	  close
	})
</script>

<style lang="scss">
.dialog-container {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;

	.bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #333333;
		opacity: 0.3;
		z-index: 1001;
	}
	.dialog-body {
		border-radius: 18rpx;
		// position: absolute;
		// top: 400rpx;
		// right: 64rpx;
		// left: 64rpx;
		width: 70%;
		margin: auto auto;
		padding: 0 48rpx 48rpx 48rpx;
		background-color: #FFFFFF;
		z-index: 1002;
	
		.close-btn {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 1003;
	
			.close-btn-icon {
				width: 40rpx;
			}
		}
	
		.dialog-title {
			align-items: center;
			margin-top: 40rpx;
	
			.label {
				font-weight: bold;
				font-size: 40rpx;
			}
		}
	}
}
</style>