iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
1
Modern Web

從零開始的個人化記帳程式開發系列 第 22

記帳程式 (22):專案開發 Part.2 - 實作選單收合漢堡包

今日開發紀錄

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

  • 實作上圖中的 hamburger 按鈕 toggle 左側選單。
  • 重寫左側選單項目 hoverfocus 的背景色,並去掉 el-menuborder-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 的寫法才是,不然就變成亂用技術了。

今天先到這,明天再繼續!


上一篇
記帳程式 (21):專案開發 Part.1 - 全站 layout 畫面優化
下一篇
記帳程式 (23):專案開發 Part.3 - 月記帳本加上月曆
系列文
從零開始的個人化記帳程式開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言