logpm/compoment/PopUp/PopUp.vue

<template>
	<!-- 弹窗组件 -->
	<view :class="popUpClass" @click="details.close" v-if="isShow">
		<view :class="{container: true, fullScreen: details.fullScreen}" @click.stop :style="{height:details.height}">
			<scroll-view class="scoolv" scroll-y="true">
				<view class="title">
					{{details.title}}
				</view>
				<view class="tip pt20" :style="{color: details.tipColor}" v-if="details.tip">
					提示：{{details.tip}}
				</view>
				<!-- 插槽 -->
				<slot></slot>
			</scroll-view>

			<view class="buttonContainer" v-if="details.isShowButton !== false">
				<view class="closeButton" v-if="details.isShowClose !== false" @click="details.close"
					hover-class="clickClass">
					{{details.closeText||'取消'}}
				</view>

				<view class="confirmButton" @click="details.success" hover-class="clickClass">
					{{details.confirmText||'确认'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineExpose,
		watch,
		ref,
		nextTick
	} from 'vue';
	const details = reactive({
		/**
		 * 确认键内容
		 */
		confirmText: '',
		/** 
		 * 取消键内容
		 */
		closeText: '',
		/** 提示内容 */
		tip: '',
		/** 提示文字颜色 */
		tipColor: '#000',
		/**
		 * 是否显示弹框
		 */
		showPopUp: false,
		isShowClose: true,
		isShowButton: true,
		/**
		 * 内容高度
		 */
		height: 'auto',
		/**
		 * 标题
		 */
		title: '',
		/**
		 * 取消按钮事件
		 */
		close() {
			details.showPopUp = false
		},
		/**
		 * 确认按钮事件
		 */
		success() {
			details.showPopUp = false
		},
		/** 是否全屏 */
		fullScreen: false
	})

	const popUpClass = reactive({
		popUpMask: true,
		close: false,
		active: false
	})

	const isShow = ref(false)

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

	defineExpose({
		setDetails,
		details
	})

	const {
		showPopUp
	} = toRefs(details)

	watch(showPopUp, () => {
		if (isShow.value === details.showPopUp) return

		if (details.showPopUp) {
			isShow.value = details.showPopUp

			nextTick(() => {
				popUpClass.active = true
			})
		} else {
			popUpClass.active = false

			const timer = setTimeout(() => {
				isShow.value = details.showPopUp
				clearTimeout(timer)
			}, 500)
		}
	})
</script>

<style lang="scss" scoped>
	// 弹出层
	.popUpMask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		opacity: 0;
		transition: all 0.5s;

		&.active {
			opacity: 1;
		}
	}

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

		&.fullScreen {
			width: 100vw !important;
			height: 100vh !important;
			border-radius: 0;

			.title {
				background-color: var(--subjectColor);
				color: #fff;
				padding: 10upx;
			}
		}

		// 标题
		.title {
			text-align: center;
			margin-bottom: 10upx;
			font-weight: bold;
		}

		// 提示
		.tip {
			font-size: 0.9rem;
			margin-top: 20upx;
		}

		.scoolv {
			max-height: 70vh;
			padding: 20upx;
			// padding-bottom: 0upx;
			box-sizing: border-box;
		}

		.buttonContainer {
			width: 100%;
			font-size: 1rem;
			padding: 20upx 0;
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;

			>view {
				transition: all 0.3s;
				padding: 20upx 70upx;
				border-radius: 10upx;
				background: var(--subjectColor);
				color: #fff;
			}

			.closeButton {
				color: #000;
				background: #F5F5F6;
				// border: 2upx solid var(--subjectColor);
			}
		}

	}

	.clickClass {
		opacity: 0.7;
	}
</style>