如何构建响应式 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 标签内，但这也不起作用。有关如何配置此应用栏以仅在移动视图中显示 3 点按钮的任何建议？谢谢！

Answer 1

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

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

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

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

</v-menu>

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

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

</v-menu>