如何在可滚动列表中将 Vuetify v-menu 附加到其父元素？

Question

在我的项目中，我有一个可滚动的项目列表，每个项目都有一个菜单，当其激活按钮悬停时会打开该菜单。

默认情况下， v-menu 元素附加到 v-app 元素，作为许多 Vuetify 元素的安装点。当我使用此默认行为时，生成的 HTML 包含许多用于弹出菜单的分离 div 元素，列表中的每个项目一个，在生成的 v-app div 中：

<div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>

这会影响渲染 DOM 的读取，结果有点混乱，尤其是在调试时。

此外，一旦打开菜单并滚动列表，菜单将保持在固定位置，因此在视觉上与其激活器按钮分离。

我怎样才能将菜单附加到列表的每个项目上，以获得更易读的渲染 DOM（见下文）？

<my-list>
  <my-item>
    <div class="menu__content" style="min-width: 0px; top: 12px; left: 0px; transform-origin: left top 0px; z-index: 0; display: none;"></div>
  </my-item>
</my-list>

以及如何在滚动列表时将 v 菜单粘到其激活按钮上？

Answer 1

查看以下链接下的文档并搜索“attach”：

https://vuetifyjs.com/en/components/menus

“Attach”：指定该组件应分离到哪个 DOM 元素。使用 CSS 选择器字符串或对元素的对象引用。

所以当你有一个像这样的菜单时：

<v-menu>

  <v-btn slot="activator">
  Click
  </v-btn>

  <v-card>
  Content
  </v-card>

</v-menu>

您可以将其附加到一个元素，比如说按钮本身，如下所示：

<v-menu attach="#fooAnchor">

  <v-btn slot="activator" id="fooAnchor">
    Click
  </v-btn>

  <v-card>
    Content
  </v-card>

</v-menu>

当然，您可以放置id="fooAnchor"​​在任何您想要的地方。