Vuetify - v-select 隐藏在 v-dialog 内的 v-stepper 中答案

【问题标题】：Vuetify - v-select hidden inside v-stepper inside v-dialogVuetify - v-select 隐藏在 v-dialog 内的 v-stepper 中
【发布时间】：2021-11-22 10:02:08
【问题描述】：

我正在尝试将 v-select 菜单附加到 v-select 但同时在打开时将其置于对话框上方，在下面的代码笔中，您可以看到 Age 下拉菜单隐藏在其容器内，并且我不知道如何让它可见

我有这个 v-dialog 层次结构 -> v-stepper -> v-select

<v-select
  attach
  :items="['0-17', '18-29', '30-54', '54+', '60', '77']"
  label="Age*"
  required
></v-select>

https://codepen.io/amaieras/pen/VwWRzpL?editors=101

附：我不想删除附件，客户希望它粘在 v-select 上:)

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

因为 Modal 的大小是固定的。而你的v-select 几乎在模态的底部。如果您将该字段移到顶部或中间，它会为您工作。

或者你可以让模态高度比现在更大。

请添加此 CSS。

.v-menu__content .theme--light .menuable__content__active {
  position: initial !important;
}

这对你有用。

【讨论】：

是的，但为什么不让 v-select 成为 z-index 而不是模态？
在这种情况下，它对你不起作用。嗯，您可以通过添加 !important 属性来更改原始 v-menu__content 的位置。
添加 !important 到什么属性？
刚刚编辑的答案。
它看起来更好，但它会移动菜单下方的所有内容，而不是使其与内容重叠，但这是我迄今为止最好的解决方案

【解决方案2】：

vuetify 中的 Stepper 组件默认具有 overflow: hidden 样式。您可以在 CSS 中将此属性更改为visible：

.v-stepper,
.v-stepper__wrapper, 
.v-stepper__items {
  overflow: visible;
}

你也可以访问codepen。

【讨论】：

太棒了，是否可以让选择菜单也越过对话框页脚？我希望它表现得像未附加但仍保持附加到触发元素