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

“附加”：指定此组件应分离到的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"放在任何需要的地方。

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

1 个答案: