198 lines
4.5 KiB
Plaintext
198 lines
4.5 KiB
Plaintext
<template>
|
||
<view class="input-date-test-container">
|
||
<view class="header">
|
||
<text class="title">弹出输入日期组件测试</text>
|
||
<text class="subtitle">点击日期选择器体验弹出输入功能</text>
|
||
</view>
|
||
|
||
<view class="test-content">
|
||
<view class="test-section">
|
||
<text class="section-title">基础版本</text>
|
||
<popup-input-date
|
||
v-model:value="basicDate"
|
||
placeholder="选择日期"
|
||
title="基础日期选择"
|
||
theme="light"
|
||
@change="onBasicDateChange"
|
||
/>
|
||
<text v-if="basicDate" class="result-text">选择结果: {{ basicDate }}</text>
|
||
</view>
|
||
|
||
<view class="test-section">
|
||
<text class="section-title">增强版本（推荐）</text>
|
||
<popup-input-date-enhanced
|
||
v-model:value="enhancedDate"
|
||
placeholder="选择日期"
|
||
title="增强日期选择"
|
||
theme="dark"
|
||
@change="onEnhancedDateChange"
|
||
/>
|
||
<text v-if="enhancedDate" class="result-text">选择结果: {{ enhancedDate }}</text>
|
||
</view>
|
||
|
||
<view class="test-section">
|
||
<text class="section-title">日期范围选择</text>
|
||
<view class="date-range-demo">
|
||
<popup-input-date-enhanced
|
||
v-model:value="startDate"
|
||
placeholder="开始日期"
|
||
title="选择开始日期"
|
||
theme="dark"
|
||
@change="onRangeDateChange"
|
||
/>
|
||
<text class="range-separator">至</text>
|
||
<popup-input-date-enhanced
|
||
v-model:value="endDate"
|
||
placeholder="结束日期"
|
||
title="选择结束日期"
|
||
theme="dark"
|
||
@change="onRangeDateChange"
|
||
/>
|
||
</view>
|
||
<text v-if="startDate && endDate" class="result-text">
|
||
日期范围: {{ startDate }} 至 {{ endDate }}
|
||
</text>
|
||
</view>
|
||
|
||
<view class="feature-list">
|
||
<text class="feature-title">功能特点:</text>
|
||
<text class="feature-item">✅ 弹出输入框，无z-index问题</text>
|
||
<text class="feature-item">✅ 支持手动输入和快捷选择</text>
|
||
<text class="feature-item">✅ 自动日期格式验证</text>
|
||
<text class="feature-item">✅ 支持v-model双向绑定</text>
|
||
<text class="feature-item">✅ 深色/浅色主题支持</text>
|
||
<text class="feature-item">✅ 今天/昨天/一周前快捷选择</text>
|
||
<text class="feature-item">✅ 清空日期功能</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
import PopupInputDate from '@/components/popup-date-picker/popup-input-date.uvue'
|
||
import PopupInputDateEnhanced from '@/components/popup-date-picker/popup-input-date-enhanced.uvue'
|
||
|
||
export default {
|
||
components: {
|
||
PopupInputDate,
|
||
PopupInputDateEnhanced
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
basicDate: '',
|
||
enhancedDate: '',
|
||
startDate: '',
|
||
endDate: ''
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onBasicDateChange(date: string) {
|
||
console.log('基础版本日期选择:', date)
|
||
},
|
||
|
||
onEnhancedDateChange(date: string) {
|
||
console.log('增强版本日期选择:', date)
|
||
},
|
||
|
||
onRangeDateChange() {
|
||
if (this.startDate && this.endDate) {
|
||
console.log('日期范围:', this.startDate, '至', this.endDate)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style> .input-date-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-section {
|
||
gap: 20rpx;
|
||
padding: 30rpx;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.section-title {
|
||
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;
|
||
}
|
||
|
||
.date-range-demo {
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.range-separator {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.feature-list {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
padding: 30rpx;
|
||
border-radius: 15rpx;
|
||
gap: 15rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.feature-title {
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: white;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.feature-item {
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.6;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
</style>
|