【uniapp/uview1.x】解决在 u-popup 弹出层中使用 u-calendar 日历组件弹出方向出 bug 的问题

花间半盘棋2024-08-17 6:06

这个方法适用 uview 1.x 版本；

如果这个方法不适用可能是 uview 版本不一样，可以参考：https://github.com/dcloudio/uni-ui/issues/915 试试看

bug 的效果如图所示：

因为我为 popup 设置的方向为 top：

html 复制代码

<u-popup v-model="show" mode="top" height="300px" @close="handleClose">

所以日历的弹出层方向也跟随了 top，显然是不对的，所以需要修改 u-popup 的 css 样式；

这里需要修改 u-drawer-content-visible 类名的样式，要修改为：

css 复制代码

::v-deep {
    .u-drawer-content-visible {
        transform: none !important;
    }
}

就好了：

就是需要额外注意一下，固定在底部的重置和查询按钮，样式不要给 bottom，要不然会变成这样：