如何构建响应式 Vuetify 应用栏

Question

我正在尝试在 Vue.js 项目中设置响应式 Vuetify 应用栏。在移动屏幕上查看时，导航链接呈现在 3 点下拉菜单中。

<v-app>
<v-app-bar color="indigo" dark fixed app>
<v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn text to="create">
<span class="mr-2" v-if="activeUser">Create Post</span>
</v-btn>
<v-btn text to="/">
<span class="mr-2" v-if="activeUser">All Posts</span>
</v-btn>
</v-toolbar-items>
<v-menu class="hidden-md-and-up">
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item v-if="activeUser" to="create">
<v-list-item-title>Create Post</v-list-item-title>
</v-list-item>
<v-list-item v-if="activeUser" to="/">
<v-list-item-title>All Posts</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-content>
<router-view></router-view>
</v-content>
</v-app>

问题是 3 点按钮在全屏和移动设备中呈现。我当然希望该按钮仅在移动设备中可见。为了解决这个问题，我尝试将按钮嵌套在v-toolbar-items标签中，但这也没有用。有关如何将此应用栏配置为仅在移动视图中显示三点按钮的任何建议？谢谢！

Answer 1

我通常给自己做一个小助手函数

computed: {
isMobile() {
return this.$vuetify.breakpoint.xsOnly;
}
}

此处列出了不同的可用断点。
然后你可以在模板中使用它，比如

<v-menu v-if="isMobile">

</v-menu>

或者，您可以直接在标记中使用$vuetify。

<v-menu v-if="$vuetify.breakpoint.xsOnly">

</v-menu>

Answer 2

关于 Vue3 和 vuetify3，你需要使用this.$vuetify.display.xs

Answer 3

除了@discolor和@Jaysanf之前的答案：

如果你将 Vue3 Composition API 与 Vuetify3 一起使用，你可以利用 "useDisplay" 钩子

。

<script setup>
import { computed, unref } from 'vue'
import { useDisplay } from 'vuetify'
const display = useDisplay()
const isMobile = computed(() => {
return unref(display.mobile)
})
</script>

然后，您可以使用模板中的isMobile在移动视图中显示或不显示某些内容：

<template>
<v-menu v-if="isMobile">
// This menu will be shown only in mobile-view
</v-menu>
</template>

之所以使用unref(display.mobile)，是因为display.mobile已经是Ref。在此处不使用unref()将导致在模板和脚本中使用isMobile时出现不需要的行为

因此，与其使用ComputedRef<Ref<boolean>>(强迫您在模板中使用isMobile.value，这是违反直觉的(，只需使用unref()来制作ComputedRef<boolean>