Vuetify：完全在断点处更改导航栏答案

【问题标题】：Vuetify: Changing navbar entirely at breakpointVuetify：完全在断点处更改导航栏
【发布时间】：2021-01-04 09:10:25
【问题描述】：

我正在使用 nuxt 和 vuetify，我有一个非常正常的默认布局，并添加了一个导航栏，如下所示：

<v-app dark>
 <v-app-bar height="60" max-height="60" app>
   <Navbar />
 </v-app-bar>
...
<v-app />

Navbar 是一个自定义组件。但是，我需要将当前组件换成另一个组件（例如，将基于网格的布局完全更改为添加一些断点来对齐和对齐内容以及诸如此类的东西是不够的）另一个包含大部分组件的第一个导航栏，只是布局不同。

在不同屏幕尺寸下交换两种不同布局/组件的最有效方法是什么？

我正在考虑使用vue-mq，但我想知道是否有更好的方法。

【问题讨论】：

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

我正在使用$vuetify.breakpoint 做类似的事情。根据您想要更换组件的时间，您可以使用以下方法作为计算属性。

        isMini() {
            switch (this.$vuetify.breakpoint.name) {
                case 'xs': return true
                case 'sm': return true
                case 'md': return true
                case 'lg': return false
                case 'xl': return false
                default: return false
            }
        }

然后您可以使用计算出的属性值来有条件地渲染您的组件：

        <!-- NavBar 1 -->
        <nav v-if="isMini" class="navbar">
             ...
        </nav>
        <!-- NavBar 2 -->
        <nav v-else class="navbar">
             ...
        </nav>

【讨论】：

【解决方案2】：

Vuetify 默认提供断点，您可以在 Vue 组件中通过 this.$vuetify.breakpoint 访问这些断点。创建一个指向断点道具的计算道具并根据计算道具有条件地渲染NavBar或其他组件可能是一种方式。

更多关于Vuetify Breakpoint Service Object的信息

【讨论】：