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

Posted 2023-02-22

【中文标题】如何使用 vuetify 制作移动响应式导航栏

【英文标题】：How to make mobile responsive navbar using vuetify

【发布时间】：2021-02-03 16:41:51

【问题描述】：

我有一个 vuetify 选项卡组件，我希望将它用作我的导航菜单。我想使用 vuetify 创建一个响应式导航栏。这是我的代码。

navbar.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>

【参考方案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>

【讨论】：

如果可行，请接受答案。这就是 *** 的工作原理。