今日開發紀錄

今天開發時間只有大約一小時，繼續調整昨天還有些不完美的 layout 畫面：

• 實作上圖中的 hamburger 按鈕 toggle 左側選單。
• 重寫左側選單項目 hover、focus 的背景色，並去掉 el-menu 的 border-right。
• 將 app-main 主畫面 layout 撐開為視窗高度。
• 引入 vue-element-admin 的 transition scss，在 app-main 地方加上滑入效果。

開發筆記

比較值得紀錄的地方是實作「toggle 選單」的部分。

原始碼網址

這邊一樣是參考 vue-element-admin 的做法：

仔細研究原始碼後，可以看到是利用將 menu 寬度縮小、body 寬度加大，並加上 transition 效果即可達到。

<template>
  <div class="app-layout">
    <div :class="['app-layout__aside-container', {'app-layout__show-aside': isAsideVisible}]">
      <app-aside />
    </div>
    <div :class="['app-layout__main-container', {'app-layout__show-aside': isAsideVisible}]">
      <app-header @toggle="toggleAside" />
      <app-main>
        <transition name="fade-transform">
          <slot />
        </transition>
      </app-main>
      <app-footer />
    </div>
  </div>
</template>

$layout-aside-show-width: 15rem;
$layout-aside-hide-width: 3.5rem;

.app-layout {
  &__aside-container {
    transition: width 0.28s;
    width: $layout-aside-hide-width;
    &.app-layout__show-aside {
      width: $layout-aside-show-width;
    }
  }
  &__main-container {
    transition: margin-left 0.28s;
    margin-left: $layout-aside-hide-width;
    &.app-layout__show-aside {
      margin-left: $layout-aside-show-width;
    }
  }
}

• 利用 isAsideVisible 這個 state 來紀錄 toggle 按鈕要顯示或隱藏。
• 加上一個隨著狀態更動的 class 來變更 menu、body 的寬度版面，其中 menu 是變換 width，body 則變換 margin-left

因為 Element 是使用 BEM，所以最近都練習寫寫看。但感覺好像不夠瞭解寫法，直覺告訴我以上這樣寫是錯的，應該稍微來研究一下 BEM 的寫法才是，不然就變成亂用技術了。

今天先到這，明天再繼續！