Vue中实现可切换显示/隐藏侧边栏的按钮的示例代码

<template>
  <div class="app-layout">
    <!-- 侧边栏 -->
    <aside 
      class="app-sidebar" 
      :class="{ 'sidebar-hidden': !isSidebarVisible }"
    >
      <!-- 侧边栏内容 -->
    </aside>
    
    <!-- 切换按钮 -->
    <button
      class="sidebar-toggle-btn"
      @click="toggleSidebar"
      :class="{ 'sidebar-hidden': !isSidebarVisible }"
    >
      <span class="toggle-btn-arrow" :class="{ 'rotated': !isSidebarVisible }">
        ‹
      </span>
    </button>
    
    <!-- 主内容区域 -->
    <main class="app-main">
      <div class="main-content">
        <router-view />
      </div>
    </main>
  </div>
</template>

export default {
  data() {
    return {
      isSidebarVisible: true // 默认显示侧边栏
    }
  },
  methods: {
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible
    }
  }
}

.app-sidebar {
  width: 250px;
  height: calc(100vh - 60px);
  position: fixed;
  top: 60px;
  left: 0;
  transition: transform 0.3s ease;
}

.sidebar-hidden {
  transform: translateX(-100%);
}

.sidebar-toggle-btn {
  position: fixed;
  left: 250px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
  z-index: 100;
}

.sidebar-toggle-btn.sidebar-hidden {
  left: 0;
}

.toggle-btn-arrow.rotated {
  transform: rotate(180deg);
}