我目前正在使用Vuetify 1.5.18,在尝试使用toolbar
组件和list-group
来创建嵌套菜单时遇到一些问题。
该菜单正在运行,但是当我单击以将其关闭时。
以下是代码笔:https://codepen.io/fabiozanchi/pen/dybBmKj
这里是以下代码:
HTML
<div id="app">
<v-app id="inspire">
<v-toolbar>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
<v-menu open-on-hover bottom offset-y>
<template v-slot:activator="{ on }">
<v-btn
color="primary"
dark
v-on="on"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-group
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
no-action
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
@click=""
>
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-menu>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>
JavaScript
new Vue({
el: '#app',
data: () => ({
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
})
})
答案 0 :(得分:1)
默认情况下,您也可以在v-list-group中以(:close-on-content-click =“ true”)的方式进行此操作,在我的情况下,我通过添加(@ click.stop)解决了此问题。>
<v-list-group
@click.stop
v-for="item in items"
:key="item.title"
v-model="item.active"
:prepend-icon="item.action"
no-action
>
答案 1 :(得分:0)
已修复。正在在:close-on-content-click="false"
上添加v-menu
:
<v-menu
v-model="menu"
:close-on-content-click="false"
:nudge-width="200"
offset-x
>