book-hi/components/custom-popup-example.vue

<template>
	<view class="example">
		<button class="btn" @click="openPopupBottom">底部弹出</button>
		<button class="btn" @click="openPopupCenter">中间弹出</button>
		<button class="btn" @click="openPopupTop">顶部弹出</button>
		<button class="btn" @click="openPopupLeft">左侧弹出</button>
		<button class="btn" @click="openPopupRight">右侧弹出</button>
		
		<!-- 底部弹出示例 -->
		<custom-popup v-model="showBottom" mode="bottom" @close="closeBottom">
			<view class="popup-content">
				<view class="popup-title">底部弹出</view>
				<view class="popup-text">这是一个底部弹出的示例</view>
				<button class="popup-btn" @click="closeBottom">关闭弹窗</button>
			</view>
		</custom-popup>
		
		<!-- 中间弹出示例 -->
		<custom-popup v-model="showCenter" mode="center" border-radius="20" @close="closeCenter">
			<view class="popup-content">
				<view class="popup-title">中间弹出</view>
				<view class="popup-text">这是一个中间弹出的示例</view>
				<button class="popup-btn" @click="closeCenter">关闭弹窗</button>
			</view>
		</custom-popup>
		
		<!-- 顶部弹出示例 -->
		<custom-popup v-model="showTop" mode="top" @close="closeTop">
			<view class="popup-content">
				<view class="popup-title">顶部弹出</view>
				<view class="popup-text">这是一个顶部弹出的示例</view>
				<button class="popup-btn" @click="closeTop">关闭弹窗</button>
			</view>
		</custom-popup>
		
		<!-- 左侧弹出示例 -->
		<custom-popup v-model="showLeft" mode="left" @close="closeLeft">
			<view class="popup-content">
				<view class="popup-title">左侧弹出</view>
				<view class="popup-text">这是一个左侧弹出的示例</view>
				<button class="popup-btn" @click="closeLeft">关闭弹窗</button>
			</view>
		</custom-popup>
		
		<!-- 右侧弹出示例 -->
		<custom-popup v-model="showRight" mode="right" @close="closeRight">
			<view class="popup-content">
				<view class="popup-title">右侧弹出</view>
				<view class="popup-text">这是一个右侧弹出的示例</view>
				<button class="popup-btn" @click="closeRight">关闭弹窗</button>
			</view>
		</custom-popup>
	</view>
</template>

<script>
import CustomPopup from './custom-popup.vue';

export default {
	components: {
		CustomPopup
	},
	data() {
		return {
			showBottom: false,
			showCenter: false,
			showTop: false,
			showLeft: false,
			showRight: false
		}
	},
	methods: {
		// 底部弹出
		openPopupBottom() {
			this.showBottom = true;
		},
		closeBottom() {
			this.showBottom = false;
		},
		
		// 中间弹出
		openPopupCenter() {
			this.showCenter = true;
		},
		closeCenter() {
			this.showCenter = false;
		},
		
		// 顶部弹出
		openPopupTop() {
			this.showTop = true;
		},
		closeTop() {
			this.showTop = false;
		},
		
		// 左侧弹出
		openPopupLeft() {
			this.showLeft = true;
		},
		closeLeft() {
			this.showLeft = false;
		},
		
		// 右侧弹出
		openPopupRight() {
			this.showRight = true;
		},
		closeRight() {
			this.showRight = false;
		}
	}
}
</script>

<style lang="scss">
.example {
	padding: 30rpx;
	
	.btn {
		margin-bottom: 20rpx;
		background-color: #38C148;
		color: #FFFFFF;
	}
}

.popup-content {
	padding: 30rpx;
	
	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
	}
	
	.popup-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 30rpx;
		text-align: center;
	}
	
	.popup-btn {
		background-color: #38C148;
		color: #FFFFFF;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
}
</style>