【发布时间】：2019-10-20 22:02:14
【问题描述】：
我需要创建一个带有图标按钮的菜单。如果一个按钮应该有一个菜单 - 点击它应该打开这个菜单，否则执行某个操作。如果任何菜单项有子菜单 - 单击应该打开子菜单。基本上它应该看起来像这样（抱歉，用 Paint 绘制）：
现在我有具有以下结构的按钮数据：
buttons: [
{
id: 'options',
title: 'More Options',
icon: 'fas fa-bars',
action: '',
options: [
{id: 'dictionary', title: 'Dictionary', action: ''},
{id: 'visualization', title: 'Data Visualization', action: ''},
{id: 'password', title: 'Change Password', action: ''},
{id: 'license', title: 'License Info', action: ''},
{
id: 'tools', title: 'Tools', action: '',
options: [
{id: 'calculator', title: 'Hex to ASCII calculator'}
]
},
{id: 'checkup', title: 'Checkup Report', action: ''},
{id: 'system', title: 'System Monitoring', action: ''},
{id: 'db', title: 'Database Management', action: ''},
]
},
{id: 'reports', title: 'Reports', icon: 'fas fa-chart-line', action: ''},
{
id: 'help',
title: 'Help Options',
icon: 'fas fa-question-circle',
action: '',
options: [
{id: 'user', title: 'User Guide', action: ''},
{id: 'admin', title: 'Admin Guide', action: ''},
]
},
{id: 'settings', title: 'Settings', icon: 'fas fa-cog', action: ''},
{id: 'logout', title: 'Logout', icon: 'fas fa-power-off', action: ''},
]
我尝试使用以下代码创建菜单：
<v-menu v-for='button in $store.state.topbar.buttons'>
<template #activator="{ on: menu }" v-show='button.options'>
<v-tooltip bottom >
<template #activator="{ on: tooltip }">
<v-btn
color="info"
icon small flat
v-on="{ ...tooltip, ...menu }"
>
<v-icon>{{button.icon}}</v-icon>
</v-btn>
</template>
<span>{{button.title}}</span>
</v-tooltip>
</template>
<temmplate #activator="{ on: tooltip }" v-show='!button.options'>
<v-tooltip bottom >
<template #activator="{ on: tooltip }">
<v-btn
color="info"
icon small flat
v-on="{ ...tooltip }"
>
<v-icon>{{button.icon}}</v-icon>
</v-btn>
</template>
<span>{{button.title}}</span>
</v-tooltip>
</temmplate>
<v-list v-show='button.options'>
<v-list-tile
v-for="(item, index) in button.options"
:key="item.id"
@click=""
>
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action v-if='item.options'>
<v-icon color='info' small>fa-chevron-right</v-icon>
</v-list-tile-action>
<v-menu offset-y
<template v-slot:activator="{ on }">
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action v-if='item.options'>
<v-icon color='info' small>fa-chevron-right</v-icon>
</v-list-tile-action>
</template>
<v-list>
<v-list-tile
v-for="(submenu, index) in item.options"
:key="index"
@click=""
>
<v-list-tile-title>{{ submenu.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
我得到了这个结果：
所以子菜单成为菜单的一部分。无论我尝试了什么 - 要么我根本看不到子菜单，要么如图所示。
我在 Vuetify 网站上找不到子菜单的任何文档，尝试遵循菜单、列表、按钮的 API，但无法按照我希望的方式进行操作。可以做到吗？如果是 - 如何？
编辑
我试图在CodePen 中重现该问题，但结果看起来很奇怪......
【问题讨论】：
-
不，有一个[功能请求](github.com/vuetifyjs/vuetify/issues/1877]
-
我知道我来晚了，但对于需要这个的人来说。 Molotoh有一个例子codepen.io/Moloth/pen/ZEBOzQP?editors=1011
标签： vue.js vuetify.js