ezhizao_dms_h5/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 emit = defineEmits(['close'])

	const props = defineProps({
		title: {
			type: String,
			default: '对话框'
		}
	})

	const open = () => {
		visible.value = true
	}

	function close() {
		emit('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;
			margin-top: 260rpx;
			margin-left: auto;
			margin-right: auto;
			padding: 0 48rpx 48rpx 48rpx;
			background-color: #FFFFFF;
			z-index: 1002;
			max-height: 64%;
			// overflow: auto;

			.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>