ErectionPlatform/compoment/MyDrawer/MyDrawer.vue

<template>
	<!-- 弹窗组件 -->
	<view :class="{'popUpMask':true,  'show' : details.showPopUp === true, 'done' : details.showPopUp === false}"
		@touchmove.stop.prevent @click="()=> {
			if (details.cancel) return details.cancel()
			details.close()
		} ">
		<view :class="{'container':true,  'show' : details.showPopUp === true, 'done' : details.showPopUp === false}"
			@click.stop>
			<view class="buttonContainer" v-if="details.isShowButton !== false && details.location === 'top'">
				<view class="closeButton" v-if="details.isShowClose !== false" @click="details.close">
					取消
				</view>
				<view class="confirmButton" @click="details.success">
					{{confirmText||'确认'}}
				</view>
			</view>

			<!-- 插槽 -->
			<slot name="head"></slot>

			<scroll-view :style="{height:details.height}" class="scoolv" scroll-y="true">
				<view class="title">
					{{details.title}}
				</view>
				<!-- 插槽 -->
				<slot name="content"></slot>
			</scroll-view>

			<view class="buttonContainer" v-if="details.isShowButton !== false && details.location === 'bottom'">
				<view class="closeButton" v-if="details.isShowClose !== false" @click="details.close">
					{{ details.cancelText || '取消'}}
				</view>
				<view class="confirmButton" @click="details.success">
					{{ details.confirmText||'确认'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineExpose
	} from 'vue';
	import {
		onShow,
	} from '@dcloudio/uni-app'
	const details = reactive({
		/**
		 * 确认键内容
		 */
		confirmText: '',
		/** 
		 * 取消键内容
		 */
		cancelText: '',
		/**
		 * 是否显示弹框
		 */
		showPopUp: undefined,
		isShowClose: true,
		isShowButton: true,
		/**
		 * 内容高度
		 */
		height: 'auto',
		/**
		 * 标题
		 */
		title: '',
		/**
		 * 取消按钮事件
		 */
		close() {
			details.showPopUp = false
		},
		/**
		 * 弹窗关闭事件
		 */
		cancel() {
			details.showPopUp = false
		},
		/**
		 * 确认按钮事件
		 */
		success() {
			details.showPopUp = false
		},
		/**
		 * 确认按钮显示位置
		 * top -- 顶部
		 * bottom -- 底部 
		 */
		location: 'bottom'
	})

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

	onShow(() => {
		if (!details.showPopUp) details.showPopUp = undefined
	})

	defineExpose({
		setDetails,
		details
	})

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

<style lang="scss" scoped>
	// 显示动画
	@keyframes showMask {
		0% {
			left: -100%;
		}

		100% {
			left: 0;
		}
	}

	@keyframes showContent {
		0% {
			bottom: -100%;
		}

		// 50% {
		// 	bottom: -100%;
		// }

		100% {
			bottom: 0;
		}
	}

	// 关闭动画
	@keyframes doneMask {
		0% {
			left: 0;
		}

		// 50% {
		// 	left: -50%;
		// }

		100% {
			left: -100%;
		}
	}



	@keyframes doneContent {
		0% {
			bottom: 0;
		}

		100% {
			bottom: -100%;
		}
	}

	// 动画时间
	$animationTime: 0.3s;

	// 弹出层
	.popUpMask {
		position: fixed;
		top: 0;
		left: -100%;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		&.show {
			animation: $animationTime forwards showMask;
		}

		&.done {
			animation: calc($animationTime * 1.3) forwards doneMask;
		}
	}

	.container {
		width: 100%;
		background: #fff;
		position: absolute;
		bottom: -100%;
		left: 0;

		&.show {
			animation: calc($animationTime * 1.3) forwards showContent;
		}

		&.done {
			animation: $animationTime forwards doneContent;
		}

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

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

		.buttonContainer {
			width: 100%;
			padding: 20upx 0 60upx;
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;
			zoom: 0.9;

			>view {
				padding: 25upx 100upx;
				border-radius: 10upx;
				background: var(--subjectColor);
				color: #fff;
			}

			.closeButton {
				color: #000;
				background: #F5F5F6;
			}
		}

	}
</style>