解决Vue3/Vuetify3中日期选择器被卡片遮挡的问题

问题根源 #

Vuetify的v-card默认设置了overflow: hidden，会裁剪超出卡片范围的内容；同时日期选择器的弹出层默认挂载在卡片内部，父元素的层级与溢出限制共同导致了遮挡问题，单纯修改z-index无法突破父元素的overflow限制。

可行解决方案 #

方案1：将弹出层挂载到body（推荐）

利用组件自带的append-to-body属性，让日期选择器的弹出层脱离v-card的上下文，彻底避开父元素的限制：

<vue-date-picker append-to-body></vue-date-picker>

方案2：取消v-card的内容裁剪限制

修改v-card的overflow属性，允许内容超出卡片范围显示：

• 内联样式直接修改：

<v-card class="mt-16" style="overflow: visible;">

• 或在scoped样式中使用深度选择器全局修改卡片样式：

<style scoped>
::v-deep(.v-card) {
  overflow: visible;
}
</style>

方案3：针对性提升弹出层z-index

如果需要保留v-card的overflow设置，可直接给日期选择器的弹出层设置更高层级：

<style scoped>
::v-deep(.picker-container) {
  z-index: 9999 !important;
}
</style>

（注：.picker-container是@vuepic/vue-datepicker弹出层的默认类名，若组件版本不同可通过浏览器开发者工具确认实际类名）

内容的提问来源于stack exchange，提问作者F4lc0n