akmon/pages/test/portal-vs-original-test.uvue

<template>
	<view class="portal-test-container">
		<view class="header">
			<text class="title">Portal日期选择器测试</text>
			<text class="subtitle">点击下方按钮测试新的portal解决方案</text>
		</view>
		
		<view class="test-content">
			<view class="test-item">
				<text class="test-label">Portal方式（推荐）:</text>
				<popup-date-picker-portal 
					v-model:value="portalDate"
					placeholder="选择日期（Portal）"
					title="Portal日期选择"
					theme="light"
					@change="onPortalDateChange"
				/>
				<text v-if="portalDate" class="result-text">选择结果: {{ portalDate }}</text>
			</view>
			
			<view class="test-item">
				<text class="test-label">原有方式（z-index问题）:</text>
				<popup-date-picker 
					v-model:value="originalDate"
					placeholder="选择日期（原始）"
					title="原始日期选择"
					theme="light"
					@change="onOriginalDateChange"
				/>
				<text v-if="originalDate" class="result-text">选择结果: {{ originalDate }}</text>
			</view>
			
			<view class="problem-demo">
				<text class="demo-title">z-index覆盖测试</text>
				<view class="high-z-box">
					<text class="high-z-text">高z-index元素 (50000)</text>
				</view>
				<view class="medium-z-box">
					<text class="medium-z-text">中等z-index元素 (10000)</text>
				</view>
			</view>
			
			<view class="instructions">
				<text class="instruction-title">测试说明:</text>
				<text class="instruction-text">1. Portal方式会跳转到新页面选择日期，确保不受z-index影响</text>
				<text class="instruction-text">2. 原始方式的弹窗可能被上方的高z-index元素遮挡</text>
				<text class="instruction-text">3. Portal方式提供更好的用户体验和更稳定的显示效果</text>
			</view>
		</view>
	</view>
</template>

<script lang="uts">
	import PopupDatePicker from '@/components/popup-date-picker/popup-date-picker.uvue'
	import PopupDatePickerPortal from '@/components/popup-date-picker/popup-date-picker-portal.uvue'
	
	export default {
		components: {
			PopupDatePicker,
			PopupDatePickerPortal
		},
		
		data() {
			return {
				portalDate: '',
				originalDate: ''
			}
		},
		
		methods: {
			onPortalDateChange(date: string) {
				console.log('Portal选择日期:', date)
				uni.showToast({
					title: `Portal选择: ${date}`,
					icon: 'success'
				})
			},
			
			onOriginalDateChange(date: string) {
				console.log('原始选择日期:', date)
				uni.showToast({
					title: `原始选择: ${date}`,
					icon: 'success'
				})
			}
		}
	}
</script>

<style>	.portal-test-container {
		min-height: 100vh;
		background-image: linear-gradient(to bottom right, #667eea, #764ba2);
		padding: 40rpx;
	}
	
	.header {
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		line-height: 1.6;
	}
	
	.test-content {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		padding: 40rpx;
		backdrop-filter: blur(10px);
		gap: 40rpx;
	}
	
	.test-item {
		gap: 20rpx;
	}
	
	.test-label {
		font-size: 32rpx;
		font-weight: 400;
		color: white;
		margin-bottom: 15rpx;
	}
	
	.result-text {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		background: rgba(255, 255, 255, 0.1);
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;
	}
	
	.problem-demo {
		position: relative;
		margin: 40rpx 0;
		padding: 30rpx;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 15rpx;
	}
	
	.demo-title {
		font-size: 28rpx;
		color: white;
		margin-bottom: 20rpx;
		font-weight: 400;
	}
	
	.high-z-box {
		position: absolute;
		top: 80rpx;
		right: 20rpx;
		width: 200rpx;
		height: 80rpx;
		background: #FF6B6B;
		z-index: 50000;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
		box-shadow: 0 10rpx 30rpx rgba(255, 107, 107, 0.3);
	}
	
	.high-z-text {
		color: white;
		font-size: 22rpx;
		font-weight: bold;
		text-align: center;
	}
	
	.medium-z-box {
		position: absolute;
		top: 180rpx;
		right: 40rpx;
		width: 160rpx;
		height: 60rpx;
		background: #4ECDC4;
		z-index: 10000;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
		box-shadow: 0 8rpx 25rpx rgba(78, 205, 196, 0.3);
	}
	
	.medium-z-text {
		color: white;
		font-size: 20rpx;
		font-weight: bold;
		text-align: center;
	}
	
	.instructions {
		background: rgba(255, 255, 255, 0.1);
		padding: 30rpx;
		border-radius: 15rpx;
		gap: 15rpx;
		margin-top: 40rpx;
	}
	
	.instruction-title {
		font-size: 30rpx;
		font-weight: 400;
		color: white;
		margin-bottom: 15rpx;
	}
	
	.instruction-text {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.6;
		margin-bottom: 10rpx;
	}
</style>