如何使用Vue.js与Vuetify实现带切换功能的侧边栏

嘿，这个需求用Vuetify的内置组件就能轻松实现，我给你整理了一套完整的实现方案，步骤清晰，直接就能用：

核心思路 #

利用Vuetify提供的v-navigation-drawer组件结合Vue的响应式状态，通过一个布尔值控制侧边栏的显示与隐藏，搭配切换按钮完成交互。

完整代码实现 #

下面是一个可直接运行的单文件组件示例：

Template 部分 #

<template>
  <v-app>
    <!-- 侧边栏切换按钮 -->
    <v-btn
      icon
      @click="drawer = !drawer"
      class="fixed left-4 top-16 z-50"
      color="primary"
    >
      <!-- 根据侧边栏状态切换图标 -->
      <v-icon size="24">{{ drawer ? 'mdi-chevron-left' : 'mdi-menu' }}</v-icon>
    </v-btn>

    <!-- 可切换的侧边栏 -->
    <v-navigation-drawer
      v-model="drawer"
      absolute
      left
      width="250"
      elevation="4"
    >
      <!-- 侧边栏头部 -->
      <v-toolbar flat color="primary">
        <v-toolbar-title>我的菜单</v-toolbar-title>
      </v-toolbar>

      <!-- 侧边栏菜单列表 -->
      <v-list dense>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <v-list-item-title>首页</v-list-item-title>
        </v-list-item>

        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-account-group</v-icon>
          </v-list-item-icon>
          <v-list-item-title>用户管理</v-list-item-title>
        </v-list-item>

        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-cog</v-icon>
          </v-list-item-icon>
          <v-list-item-title>系统设置</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- 主内容区域 -->
    <v-main>
      <v-container fluid class="pa-8">
        <h2 class="mb-4">主内容区域</h2>
        <p>点击左侧的图标即可切换侧边栏的显示/隐藏状态</p>
      </v-container>
    </v-main>
  </v-app>
</template>

Script 部分 #

<script setup>
import { ref } from 'vue'

// 响应式变量：控制侧边栏的显示与隐藏
const drawer = ref(false)
</script>

关键细节说明 #

• 切换按钮：使用fixed定位固定在页面左侧，z-50确保按钮始终在最上层不会被侧边栏遮挡；点击事件直接切换drawer的布尔值。
• 侧边栏控制：v-navigation-drawer的v-model绑定drawer变量，实现状态的双向同步；absolute定位避免侧边栏占用主内容区域的布局空间；elevation属性添加阴影增强视觉层次感。
• 图标切换：根据drawer的当前状态显示不同图标（菜单图标/左箭头），让用户更直观地理解操作效果。

额外优化建议 #

• 若需要侧边栏隐藏时，主内容自动填充左侧空间，可以给v-main添加动态类名：class="ml-0"（侧边栏隐藏时）和class="ml-[250px]"（侧边栏显示时），或者利用Vuetify的v-responsive组件做适配。
• 可以给侧边栏添加persistent属性，实现点击页面其他区域时自动隐藏侧边栏（需要结合v-overlay）。
• 自定义侧边栏的样式，比如背景色、文字颜色等，通过Vuetify的颜色类即可快速实现。

内容的提问来源于stack exchange，提问作者maniks