html - 如何在可滚动列表中将 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-menu 粘在它的激活按钮上？

Answer 1

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

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

"Attach": Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

所以当你有一个菜单时，例如这个:

<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"哪里都行。