207 lines
5.8 KiB
Markdown
207 lines
5.8 KiB
Markdown
# 弹出输入日期组件解决方案
|
||
|
||
## 概述
|
||
|
||
针对uni-app-x中z-index弹出层显示问题，开发了基于原生弹出输入框的日期选择组件，完全避免了CSS层叠上下文的限制。
|
||
|
||
## 解决方案特点
|
||
|
||
### 🎯 **核心优势**
|
||
- ✅ **无z-index问题**: 使用uni-app原生弹窗API，完全避免层叠上下文问题
|
||
- ✅ **用户体验优秀**: 直接弹出输入框，操作简单直观
|
||
- ✅ **功能丰富**: 支持手动输入和快捷选择
|
||
- ✅ **格式验证**: 自动验证日期格式和有效性
|
||
- ✅ **兼容性强**: 基于uni-app原生API，全平台兼容
|
||
|
||
### 📱 **两个版本**
|
||
|
||
#### 1. 基础版本 (`popup-input-date.uvue`)
|
||
- 简单的弹出输入框
|
||
- 基础的日期格式验证
|
||
- 支持v-model双向绑定
|
||
|
||
#### 2. 增强版本 (`popup-input-date-enhanced.uvue`) - **推荐使用**
|
||
- 弹出选项菜单，包含快捷选择
|
||
- 支持今天、昨天、一周前快捷选择
|
||
- 支持清空日期功能
|
||
- 更好的用户体验和操作反馈
|
||
|
||
## 技术实现
|
||
|
||
### 核心API使用
|
||
|
||
#### ActionSheet选择菜单
|
||
```javascript
|
||
uni.showActionSheet({
|
||
itemList: [
|
||
'手动输入日期',
|
||
`今天 (${today})`,
|
||
`昨天 (${yesterday})`,
|
||
`一周前 (${lastWeek})`,
|
||
'清空日期'
|
||
],
|
||
success: function (res) {
|
||
// 处理用户选择
|
||
}
|
||
})
|
||
```
|
||
|
||
#### Modal输入框
|
||
```javascript
|
||
uni.showModal({
|
||
title: '选择日期',
|
||
content: '请输入日期 (格式: YYYY-MM-DD)',
|
||
editable: true,
|
||
placeholderText: 'YYYY-MM-DD',
|
||
success: function (res) {
|
||
// 验证并处理输入的日期
|
||
}
|
||
})
|
||
```
|
||
|
||
### 日期验证逻辑
|
||
```javascript
|
||
validateDateFormat(dateString: string): boolean {
|
||
// 格式检查
|
||
const dateRegex = /^\d{4}-\d{2}-\d{2}$/
|
||
if (!dateRegex.test(dateString)) {
|
||
return false
|
||
}
|
||
|
||
// 日期有效性检查
|
||
const date = new Date(dateString)
|
||
const [year, month, day] = dateString.split('-').map(Number)
|
||
|
||
return date.getFullYear() === year &&
|
||
date.getMonth() === month - 1 &&
|
||
date.getDate() === day
|
||
}
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 基本使用
|
||
```vue
|
||
<template>
|
||
<popup-input-date-enhanced
|
||
v-model:value="selectedDate"
|
||
placeholder="选择日期"
|
||
title="选择训练日期"
|
||
theme="dark"
|
||
@change="onDateChange"
|
||
/>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
import PopupInputDateEnhanced from '@/components/popup-date-picker/popup-input-date-enhanced.uvue'
|
||
|
||
export default {
|
||
components: {
|
||
PopupInputDateEnhanced
|
||
},
|
||
data() {
|
||
return {
|
||
selectedDate: ''
|
||
}
|
||
},
|
||
methods: {
|
||
onDateChange(date: string) {
|
||
console.log('选择的日期:', date)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
```
|
||
|
||
### 日期范围选择
|
||
```vue
|
||
<view class="date-range">
|
||
<popup-input-date-enhanced
|
||
v-model:value="startDate"
|
||
placeholder="开始日期"
|
||
title="选择开始日期"
|
||
theme="dark"
|
||
/>
|
||
<text class="separator">至</text>
|
||
<popup-input-date-enhanced
|
||
v-model:value="endDate"
|
||
placeholder="结束日期"
|
||
title="选择结束日期"
|
||
theme="dark"
|
||
/>
|
||
</view>
|
||
```
|
||
|
||
## 组件属性
|
||
|
||
### Props
|
||
| 属性 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `value` | String | `''` | 当前选中的日期值 (YYYY-MM-DD格式) |
|
||
| `placeholder` | String | `'请选择日期'` | 占位符文本 |
|
||
| `title` | String | `'选择日期'` | 弹出框标题 |
|
||
| `theme` | String | `'light'` | 主题色调 ('light' \| 'dark') |
|
||
|
||
### Events
|
||
| 事件名 | 参数 | 说明 |
|
||
|--------|------|------|
|
||
| `change` | `(date: string)` | 日期改变时触发 |
|
||
| `update:value` | `(date: string)` | v-model更新事件 |
|
||
|
||
## 用户操作流程
|
||
|
||
### 增强版本操作流程
|
||
1. **点击日期触发器** → 显示选项菜单
|
||
2. **选择操作类型**:
|
||
- 手动输入日期 → 弹出输入框
|
||
- 今天 → 直接设置为今天日期
|
||
- 昨天 → 直接设置为昨天日期
|
||
- 一周前 → 直接设置为一周前日期
|
||
- 清空日期 → 清空当前选择
|
||
3. **手动输入时** → 验证格式 → 设置日期 → 显示成功提示
|
||
|
||
## 已更新的页面
|
||
|
||
### 教师端
|
||
- ✅ `pages/sport/teacher/records.uvue` - 训练记录页面
|
||
|
||
### 学生端
|
||
- ✅ `pages/sport/student/records.uvue` - 训练历史页面
|
||
|
||
### 测试页面
|
||
- ✅ `pages/test/popup-input-date-test.uvue` - 组件功能测试
|
||
|
||
## 与之前方案对比
|
||
|
||
| 特性 | Portal方案 | 弹出输入方案 | 原始z-index方案 |
|
||
|------|------------|-------------|-----------------|
|
||
| z-index问题 | ✅ 完全解决 | ✅ 完全解决 | ❌ 存在问题 |
|
||
| 用户体验 | 🔶 需要页面跳转 | ✅ 直接弹窗操作 | ✅ 页面内操作 |
|
||
| 实现复杂度 | 🔶 需要额外页面 | ✅ 简单直接 | ✅ 相对简单 |
|
||
| 平台兼容性 | ✅ 优秀 | ✅ 优秀 | ❌ uni-app-x限制 |
|
||
| 快捷选择 | ✅ 支持 | ✅ 支持 | ✅ 支持 |
|
||
| 代码维护性 | 🔶 中等 | ✅ 优秀 | 🔶 中等 |
|
||
|
||
## 推荐使用场景
|
||
|
||
### 适合弹出输入方案的场景
|
||
- ✅ 简单的日期选择需求
|
||
- ✅ 需要快捷选择功能
|
||
- ✅ 对页面跳转体验敏感的应用
|
||
- ✅ 移动端应用（输入体验优秀）
|
||
|
||
### 适合Portal方案的场景
|
||
- ✅ 需要复杂的日期选择界面
|
||
- ✅ 需要显示日历视图
|
||
- ✅ 对视觉效果要求较高的应用
|
||
|
||
## 总结
|
||
|
||
弹出输入日期组件通过使用uni-app原生弹窗API，完美解决了z-index层叠问题，同时提供了优秀的用户体验。增强版本支持快捷选择，能够满足大部分日期选择需求，是当前推荐的解决方案。
|
||
|
||
该方案的核心优势在于：
|
||
1. **技术稳定**: 基于成熟的原生API
|
||
2. **用户友好**: 直观的操作流程
|
||
3. **功能完整**: 支持手动输入和快捷选择
|
||
4. **维护简单**: 代码清晰，易于扩展
|