Initial commit of akmon project
This commit is contained in:
197
pages/test/popup-input-date-test.uvue
Normal file
197
pages/test/popup-input-date-test.uvue
Normal file
@@ -0,0 +1,197 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user