在我的项目中,我有一个可滚动的项目列表,每个项目都有一个菜单,当其激活按钮悬停时会打开该菜单。
默认情况下, 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 粘在它的激活按钮上?
最佳答案
查看以下链接下的文档并搜索“附加”:
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"
哪里都行。
关于html - 如何在可滚动列表中将 Vuetify v-menu 附加到其父元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50500842/