快捷導(dǎo)航

Vue中實(shí)現(xiàn)可切換顯示/隱藏側(cè)邊欄的按鈕的示例代碼

更新時(shí)間：2025年11月06日 08:48:51 作者：愛分享的魚魚

這篇文章主要介紹了如何在Vue應(yīng)用中實(shí)現(xiàn)一個(gè)可切換顯示/隱藏側(cè)邊欄的按鈕,通過設(shè)計(jì)基本結(jié)構(gòu)、管理數(shù)據(jù)狀態(tài)、實(shí)現(xiàn)CSS樣式切換、核心實(shí)現(xiàn)原理、交互體驗(yàn)優(yōu)化和動(dòng)畫效果,最終實(shí)現(xiàn)了側(cè)邊欄的平滑顯示/隱藏功能,并提升了用戶體驗(yàn),感興趣的小伙伴可以參考下

效果

需求如下：

在Vue應(yīng)用中實(shí)現(xiàn)可切換顯示/隱藏側(cè)邊欄的按鈕，以下是如何實(shí)現(xiàn)這一功能的詳細(xì)步驟：

1. 基本結(jié)構(gòu)設(shè)計(jì)

需要三個(gè)主要元素：

app-sidebar: 側(cè)邊欄容器
sidebar-toggle-btn: 切換按鈕
app-main: 主內(nèi)容區(qū)域

<template>
  <div class="app-layout">
    <!-- 側(cè)邊欄 -->
    <aside 
      class="app-sidebar" 
      :class="{ 'sidebar-hidden': !isSidebarVisible }"
    >
      <!-- 側(cè)邊欄內(nèi)容 -->
    </aside>
    
    <!-- 切換按鈕 -->
    <button
      class="sidebar-toggle-btn"
      @click="toggleSidebar"
      :class="{ 'sidebar-hidden': !isSidebarVisible }"
    >
      <span class="toggle-btn-arrow" :class="{ 'rotated': !isSidebarVisible }">
        ?
      </span>
    </button>
    
    <!-- 主內(nèi)容區(qū)域 -->
    <main class="app-main">
      <div class="main-content">
        <router-view />
      </div>
    </main>
  </div>
</template>

2. 數(shù)據(jù)狀態(tài)管理

在Vue組件的 data 中定義側(cè)邊欄顯示狀態(tài)：

export default {
  data() {
    return {
      isSidebarVisible: true // 默認(rèn)顯示側(cè)邊欄
    }
  },
  methods: {
    toggleSidebar() {
      this.isSidebarVisible = !this.isSidebarVisible
    }
  }
}

3. CSS樣式實(shí)現(xiàn)

側(cè)邊欄樣式

.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);
}