logpm/compoment/PopUp/PopUp.vue

<template>
	<!-- 弹窗组件 -->
	<view class="popUpMask" @click="showPopUp = false" v-if="showPopUp">
		<view class="container" @click.stop :style="{height:details.height}">
			<scroll-view class="scoolv" scroll-y="true">
				<view class="title">
					{{details.title}}
				</view>
				<!-- 插槽 -->
				<slot></slot>
			</scroll-view>

			<view class="buttonContainer">
				<view class="closeButton" @click="details.close">
					取消
				</view>
				<view class="confirmButton" @click="details.success">
					{{confirmText||'确认'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineExpose
	} from 'vue';
	const details = reactive({
		/**
		 * 确认键内容
		 */
		confirmText: '',
		/**
		 * 是否显示弹框
		 */
		showPopUp: false,
		/**
		 * 内容高度
		 */
		height: '60%',
		/**
		 * 标题
		 */
		title: '',
		/**
		 * 取消按钮事件
		 */
		close() {
			details.showPopUp = false
		},
		/**
		 * 确认按钮事件
		 */
		success() {
			details.showPopUp = false
		}
	})

	const setDetails = (detail) => {
		for (let key in detail) {
			details[key] = detail[key]
		}
	}

	defineExpose({
		setDetails,
		details
	})

	const {
		confirmText,
		showPopUp
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	$subjectColor: #D3832A;

	// 弹出层
	.popUpMask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #00000050;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.container {
		width: 90%;
		height: 60%;
		border-radius: 10upx;
		background: #fff;

		.title {
			text-align: center;
			margin-bottom: 10upx;
		}

		.scoolv {
			height: 80%;
			padding: 20upx;
			padding-bottom: 0upx;
			box-sizing: border-box;
		}

		.buttonContainer {
			height: 20%;
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;

			>view {
				padding: 15upx 50upx;
				border-radius: 10upx;
				background: $subjectColor;
				color: #fff;
			}

			.closeButton {
				color: $subjectColor;
				background: #fff;
				border: 1upx solid $subjectColor;
			}
		}

	}
</style>