如何使用 vuetify 制作移动响应式导航栏

Question

我有一个 vuetify 选项卡组件，我希望将其用作我的导航菜单。我想使用 vuetify 创建一个响应式导航栏。这是我的代码。<y 要求就像正常的导航栏一样工作。当我在移动设备中打开页面时，它应该隐藏菜单并显示汉堡菜单。

导航栏.vue

<template>
    <v-card>
      <v-toolbar
        color="cyan"
        dark
        flat
      >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
  

    enter code here
        <v-toolbar-title>Your Dashboard</v-toolbar-title>
  
        <v-spacer></v-spacer>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
  
        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
  
        <template v-slot:extension>
          <v-tabs
            v-model="tab"
            align-with-title
          >
            <v-tabs-slider color="yellow"></v-tabs-slider>
  
            <v-tab
              v-for="item in items"
              :key="item"
            >
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>
  
      <v-tabs-items v-model="tab">
        <v-tab-item
          v-for="item in items"
          :key="item"
        >
         
        </v-tab-item>
      </v-tabs-items>
    </v-card>
</template>

<script>
export default {
  el: '#app',
  data () {
    return {
      tab: null,
      items: [
        'web', 'shopping', 'videos', 'images', 'news',
      ],
    }
  }
}
</script>

Answer 1

您需要进行一些更改，而不是使用工具栏，而是使用出现。将您的 ab 内容移至部分。请查看完整代码和链接。然后添加 css 以根据屏幕大小显示和隐藏项目。

请参阅CP链接https://codepen.io/aaha/pen/poyqRxo?editors=1010

<template>
  <v-app app>
    <v-app-bar app>
       <v-app-bar-nav-icon @click="drawer = true" 
                           class="d-flex d-sm-none" //Add this class to show menu icon only on small screen
                           ></v-app-bar-nav-icon>
        <v-toolbar-title>Your Dashboard</v-toolbar-title>
        <v-spacer></v-spacer>
  
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
  
        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
  
        <template v-slot:extension>
          <v-tabs
            v-model="tab"
            align-with-title
            class="d-none d-sm-flex" //Add this class to show tabs only on medium screen and above
          >
            <v-tabs-slider color="yellow"></v-tabs-slider>
  
            <v-tab
              v-for="item in items"
              :key="item"
            >
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
    </v-app-bar>
    <!-- Add a navigation bar -->
    <v-navigation-drawer
      v-model="drawer"
      absolute
      temporary
    >
      <v-list
        nav
        dense
      >
        <v-list-item-group
        >
          <v-list-item v-for="(item, index) in items">
            <v-list-item-title @click="tab = index">{{ item }}</v-list-item-title>
          </v-list-item>

        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>
    <!-- Navigation bar ends -->
    <v-content class="ma-5">
       <v-tabs-items v-model="tab" class="d-flex flex-column align-center">
        <v-tab-item
          v-for="item in items"
          :key="item"
        >
          You are on {{ item }}
        </v-tab-item>
      </v-tabs-items>
    </v-content>
  </v-app>
</template>
<script>
export default {
  el: '#app',
  data () {
    return {
      drawer: false,
      tab: null,
      items: [
        'web', 'shopping', 'videos', 'images', 'news',
      ],
    }
  }
}
</script>