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

Posted 2023-02-22

【中文标题】如何将 Vuetify v-menu 附加到可滚动列表中的父元素？

【英文标题】：How to attach a Vuetify v-menu to its parent element in a scrollable list?

【发布时间】：2018-11-03 04:18:22

【问题描述】：

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

默认情况下，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-menu 粘在其激活按钮上？

【参考方案1】：

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

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

“附加”：指定该组件应该分离到哪个 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" 放在任何您想要的位置。

【讨论】：

它不再这么说了:(