如何创建 vuetify 工具栏链接下拉菜单？答案

【问题标题】：How to create vuetify toolbar link dropdown menu?如何创建 vuetify 工具栏链接下拉菜单？
【发布时间】：2019-06-17 15:46:07
【问题描述】：

转到https://vuetifyjs.com/en/components/toolbars

在左上角的工具栏中，我们看到链接：商店、支持、生态系统、版本、定位

如何创建这种样式的工具栏按钮链接（带有下拉项）？

（我找不到例子）

【问题讨论】：

可以在github中查看vue docs的布局。例如下拉 ecosystem 或 support。主布局页面是here。
如果您看到<core-*> 组件，请查找它here

标签： javascript vue.js material-design vuetify.js

【解决方案1】：

这是一个简单的 menu 组件。
单击示例按钮（下拉菜单）和“支持” 你会看到，它们的行为是一样的。
如果您使用浏览器检查“支持”按钮（Firefox、Chrome 两者的快捷键 F12），
你可以看到那是一个“v-menu”（菜单组件），你可以看到用于它的 CSS。

【讨论】：

我尝试添加 v-menu，但它的外观和行为不同？鼠标悬停时菜单突出显示，单击时菜单显示。

【解决方案2】：

<template>
<div>
        <v-toolbar rounded tile>
        <v-app-bar-nav-icon> </v-app-bar-nav-icon>
        <v-app-bar-title>
            <route-link to="/" tag style="cursor:pointer">ProjectName</route-link>
        </v-app-bar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items>
            <v-btn flat to="/">
                Home
            </v-btn>
            <v-menu :rounded="rounded" open-on-hover offset-y transition="slide-x-transition" bottom right>
                <template v-slot:activator="{ on, attrs }">
                    <v-btn flat v-bind="attrs" v-on="on">
                        Services
                    </v-btn>
                </template>
                <v-list dense>
                    <v-list-item v-for="(item, index) in services" :key="index" router :to="item.link">
                       <v-list-item-action>
                            <v-list-item-title>{{ item.title }}</v-list-item-title>
                        </v-list-item-action>
                    </v-list-item>
                </v-list>
            </v-menu>
            <v-btn to="/about" flat>
                About Us
            </v-btn>
            <v-btn to="/contact" flat>
                Contact Us
            </v-btn>
        </v-toolbar-items>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
            <v-btn to="/signup" flat>Sign Up </v-btn>
            <v-btn to="/login" flat>login</v-btn>
        </v-toolbar-items>
        <v-menu open-on-hover transition="slide-x-transition" bottom right offset-y>
            <template v-slot:activator="{ on, attrs }">
                <v-btn icon v-bind="attrs" v-on="on">
                    <v-icon>mdi-dots-vertical</v-icon>
                </v-btn>
            </template>
            <v-card class="mx-auto" max-width="300" tile>
                <v-list dense>
                    <v-subheader>THEMES</v-subheader>
                    <v-list-item-group v-model="theme" color="primary">
                        <v-list-item v-for="(item, i) in themes" :key="i" router :to="item.link">
                            <v-list-item-action>
                                <v-icon v-text="item.icon"></v-icon>
                            </v-list-item-action>
                            <v-list-item-action>
                                <v-list-item-title v-text="item.text"></v-list-item-title>
                            </v-list-item-action>
                        </v-list-item>
                    </v-list-item-group>
                </v-list>
            </v-card>
        </v-menu>
    </v-toolbar>
</div>
</template>

<script>
export default {
    data: () => ({
        activate: true,
        theme: 1,
        themes: [{
                text: "Dark",
                icon: "mdi-clock"
            },
            {
                text: "Light",
                icon: "mdi-account"
            }
        ],
        mini: true,
        services: [{
                icon: "mdi-domain",
                title: "Media Monitoring",
                link: "/mmrservices"
            },
            {
                icon: "mdi-message-text",
                title: "Audience Measurement",
                link: "/amrservices"
            },
            {
                icon: "mdi-flag",
                title: "Integration Analysis"
            }
        ]
    })
};
</script>

【讨论】：