akoo/akmon

Fork 0

Files

akoo 77a2bab985 Initial commit of akmon project

2026-01-20 08:04:15 +08:00

6.4 KiB

Raw Permalink Blame History

PopupDatePicker Z-Index Fix - Portal Solution

问题描述

在uni-app-x中，使用CSS层叠上下文（z-index）实现的弹出层组件存在显示问题：

Z-Index失效: 即使设置了极高的z-index值（2147483647），弹出层仍然无法显示在其他元素之上
平台限制: uni-app-x的渲染机制对CSS z-index的支持存在限制
用户体验差: 弹出层被遮挡导致用户无法正常操作

解决方案

1. Portal方式（推荐）

创建基于页面导航的Portal组件，通过打开新页面的方式实现日期选择，完全避免z-index问题。

核心文件

popup-date-picker-portal.uvue - Portal触发器组件
pages/common/date-picker-modal.uvue - 专用的日期选择页面

工作原理

用户点击日期触发器
使用 uni.navigateTo() 打开专用的日期选择页面
在新页面中完成日期选择
通过页面间通信（EventChannel）传递选择结果
自动关闭选择页面并返回

优势

✅ 完全避免z-index问题：新页面具有独立的层叠上下文
✅ 用户体验优秀：全屏显示，操作便捷
✅ 平台兼容性好：利用uni-app原生页面导航
✅ 可扩展性强：可以添加更多功能如快捷选择

2. 原有方式（存在问题）

基于CSS z-index的弹出层实现，在uni-app-x中存在显示问题。

问题分析

.popup-overlay {
    position: fixed !important;
    z-index: 2147483647 !important; /* 最大32位整数 */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    /* 即使如此设置，仍然无法在uni-app-x中正常显示 */
}

实现细节

Portal触发器组件

<!-- popup-date-picker-portal.uvue -->
<template>
    <view class="popup-date-picker-portal">
        <view class="date-trigger" @click="openDatePicker">
            <text class="date-text">{{ displayText }}</text>
            <simple-icon type="calendar" :size="16" />
        </view>
    </view>
</template>

<script lang="uts">
export default {
    methods: {
        openDatePicker() {
            uni.navigateTo({
                url: `/pages/common/date-picker-modal?currentDate=${this.currentValue}&title=${encodeURIComponent(this.title)}`,
                events: {
                    dateSelected: (data: any) => {
                        this.currentValue = data.date
                        this.$emit('change', this.currentValue)
                        this.$emit('update:value', this.currentValue)
                    }
                }
            })
        }
    }
}
</script>

日期选择页面

<!-- pages/common/date-picker-modal.uvue -->
<template>
    <view class="date-picker-modal">
        <view class="modal-header">
            <button @click="cancel">取消</button>
            <text>{{ title }}</text>
            <button @click="confirm">确定</button>
        </view>
        
        <view class="modal-content">
            <picker-date 
                :value="selectedDate" 
                @change="onDateChange" 
            />
            <!-- 快捷选择按钮 -->
            <view class="quick-select">
                <button @click="selectToday">今天</button>
                <button @click="selectYesterday">昨天</button>
            </view>
        </view>
    </view>
</template>

<script lang="uts">
export default {
    methods: {
        confirm() {
            const eventChannel = this.getOpenerEventChannel()
            eventChannel.emit('dateSelected', {
                date: this.selectedDate
            })
            uni.navigateBack()
        }
    }
}
</script>

页面配置

// pages.json
{
    "path": "pages/common/date-picker-modal",
    "style": {
        "navigationBarTitleText": "",
        "navigationStyle": "custom",
        "app-plus": {
            "titleNView": false,
            "pullToRefresh": false
        }
    }
}

使用方法

1. 引入Portal组件

<template>
    <popup-date-picker-portal 
        v-model:value="selectedDate"
        placeholder="选择日期"
        title="选择训练日期"
        theme="dark"
        @change="onDateChange"
    />
</template>

<script lang="uts">
import PopupDatePickerPortal from '@/components/popup-date-picker/popup-date-picker-portal.uvue'

export default {
    components: {
        PopupDatePickerPortal
    },
    data() {
        return {
            selectedDate: ''
        }
    },
    methods: {
        onDateChange(date: string) {
            console.log('选择的日期:', date)
        }
    }
}
</script>

2. 替换原有组件

将现有的 popup-date-picker 替换为 popup-date-picker-portal：

<!-- 旧方式 -->
<popup-date-picker 
    v-model:value="startDate"
    placeholder="开始日期"
    @change="onDateChange"
/>

<!-- 新方式 -->
<popup-date-picker-portal 
    v-model:value="startDate"
    placeholder="开始日期"
    @change="onDateChange"
/>

已更新的文件

组件文件

✅ components/popup-date-picker/popup-date-picker-portal.uvue - Portal触发器
✅ pages/common/date-picker-modal.uvue - 日期选择页面

页面文件

✅ pages/sport/student/records.uvue - 学生训练记录页面
✅ pages/sport/teacher/records.uvue - 教师训练记录页面

配置文件

✅ pages.json - 添加了日期选择页面配置

测试文件

✅ pages/test/portal-vs-original-test.uvue - Portal vs 原始方式对比测试

测试验证

功能测试: 点击日期选择器能正常打开选择页面
数据传递: 选择的日期能正确传递回父组件
用户体验: 页面跳转流畅，选择界面友好
兼容性: 在不同设备和平台上都能正常工作

性能优化

页面预加载: 可以考虑预加载日期选择页面
缓存机制: 缓存最近选择的日期
动画效果: 添加页面转场动画提升体验

后续计划

时间选择器: 基于相同原理实现时间选择Portal
其他选择器: 扩展到其他需要弹出层的组件
通用Portal: 开发通用的Portal组件框架

总结

Portal方式通过页面导航完美解决了uni-app-x中z-index失效的问题，提供了更好的用户体验和更稳定的技术实现。这种方案不仅解决了当前问题，还为其他类似的弹出层组件提供了参考。

6.4 KiB Raw Permalink Blame History Unescape Escape