Initial commit of akmon project
This commit is contained in:
206
doc_zhipao/POPUP_INPUT_DATE_SOLUTION.md
Normal file
206
doc_zhipao/POPUP_INPUT_DATE_SOLUTION.md
Normal file
@@ -0,0 +1,206 @@
|
||||
# 弹出输入日期组件解决方案
|
||||
|
||||
## 概述
|
||||
|
||||
针对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. **维护简单**: 代码清晰，易于扩展
|
||||
Reference in New Issue
Block a user