如何使用 Vuetify 创建带有子菜单的菜单？
Posted
技术标签:
【中文标题】如何使用 Vuetify 创建带有子菜单的菜单？【英文标题】：How to create menu with sub-menu with Vuetify? 【发布时间】：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 【参考方案1】：您可以使用技巧来实现这一点，试试这个。 https://codepen.io/anon/pen/yWdBoG?editors=1010
<div id="app">
<v-app id='menu-app'>
<v-toolbar light dense color='white' class='top-toolbar'>
<v-menu v-for='button in buttons' :close-on-content-click="content_click_option">
<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 v-if="content_click_option" #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="item.options?content_click_option=false:content_click_option=true"
>
<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-menu
v-model="menu"
:close-on-content-click="false"
:nudge-
offset-x
>
<template v-slot:activator=" on ">
<v-icon v-on="on" color='info' small @click="menu=true">fa-chevron-right</v-icon>
</template>
<v-card>
<v-list>
<v-list-tile avatar>
<v-list-tile-avatar>
<img src="https://cdn.vuetifyjs.com/images/john.jpg" >
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John Leider</v-list-tile-title>
<v-list-tile-sub-title>Founder of Vuetify.js</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn
:class="fav ? 'red--text' : ''"
icon
@click="fav = !fav"
>
<v-icon>favorite</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
<v-divider></v-divider>
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-switch v-model="message" color="purple"></v-switch>
</v-list-tile-action>
<v-list-tile-title>Enable messages</v-list-tile-title>
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-switch v-model="hints" color="purple"></v-switch>
</v-list-tile-action>
<v-list-tile-title>Enable hints</v-list-tile-title>
</v-list-tile>
</v-list>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat @click="menu = false">Cancel</v-btn>
<v-btn color="primary" flat @click="menu = false;">Save</v-btn>
</v-card-actions>
</v-card>
</v-menu>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-menu>
</v-toolbar>
</v-app>
</div>
data:
fav: true,
menu: false,
message: false,
hints: true,
content_click_option:false,
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: '',
]
【讨论】：
以上是关于如何使用 Vuetify 创建带有子菜单的菜单？的主要内容，如果未能解决你的问题，请参考以下文章