制作响应式 v-toolbar vuejs

Question

我有这个代码

<template>

<V-toolbar>

Button 1
Button 2 
.....
Button n

<\V-toolbar>
<\template>

并且按钮的数量会随着应用程序的缩放而增加。

我的问题是如何让它响应，以便在小屏幕上可以将这些按钮视为菜单 (...)。

谢谢

Answer 1

您可以使用 Vuetify 断点服务，如下所示：

<v-toolbar>
    <v-menu bottom left v-if="$vuetify.breakpoint.xs || $vuetify.breakpoint.sm">
        <template v-slot:activator="{ on, attrs }">
            <v-btn
               dark
               icon
               v-bind="attrs"
               v-on="on">
               <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
        </template>
        Button 1
        Button 2 
        .....
        Button n
    </v-menu>
    <template v-else>
        Button 1
        Button 2 
        .....
        Button n
    </template>
</v-toolbar>

您可以查看更多断点选项here。

制作响应式 v-toolbar vuejs

Make a responsive v-toolbar vuejs

javascript

vue.js

vuetify.js