vue-element-admin學習筆記--權限加載及自定義布局（3）

接着之前的筆記，參考源碼的布局,增加Sidebar的Logo組件及Navbar上折疊菜單的組件。

Sidebar上的Logo

先固定一個logo占位,默認為true.在src>layouts>Sidebar下新建Logo.vue。這里使用了VUE的內置組件 以及 。Logo.vue代碼如下。主要思路就是傳入collapse屬性來加載樣式及圖片等。樣式內容省略。

<template>
  <div class="sidebar-logo-container" :class="{ collapse: collapse }">
    <transition name="sidebarLogoFade">
      <router-link
        v-if="collapse"
        key="collapse"
        class="sidebar-logo-link"
        to="/"
      >
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 v-else class="sidebar-title">{{ title }}</h1>
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" :src="logo" class="sidebar-logo" />
        <h1 class="sidebar-title">{{ title }}</h1>
      </router-link>
    </transition>
  </div>
</template>

<script>
export default {
  name: "SidebarLogo",
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      title: "Vue Element Admin",
      logo: "https://cn.vuejs.org/images/logo.png"
    };
  }
};
</script>

之后修改Sidebar的index.vue,將showLogo()方法暫時返回true.

Navbar

在vue-element-admin中,Navbar主要分為了8個部分

• hamburger 左側菜單的折疊功能
• Breadcrumb 面包屑導航
• HeaderSearch 頂部的搜索
• Screenfull 全屏功能
• SizeSelect 布局大小
• LangSelect 語言選擇
• Eldropdown 用戶信息的下拉

hamburger

通過按鈕,修改 的collapse屬性的。在使用 組件時綁定方法,將collapse的值放入到store中的sidebar.opened中,並存到cookie里。

其中vuex的app.js內容如下,暫時注釋掉LangSelect的組件

import Cookies from "js-cookie";
// import { getLanguage } from '@/lang/index'

const state = {
  sidebar: {
    opened: Cookies.get("sidebarStatus")
      ? !!+Cookies.get("sidebarStatus")
      : true,
    withoutAnimation: false
  },
  device: "desktop",
  language: "cn",
  size: Cookies.get("size") || "medium"
};

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened;
    state.sidebar.withoutAnimation = false;
    if (state.sidebar.opened) {
      Cookies.set("sidebarStatus", 1);
    } else {
      Cookies.set("sidebarStatus", 0);
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set("sidebarStatus", 0);
    state.sidebar.opened = false;
    state.sidebar.withoutAnimation = withoutAnimation;
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device;
  },
  SET_LANGUAGE: (state, language) => {
    state.language = language;
    Cookies.set("language", language);
  },
  SET_SIZE: (state, size) => {
    state.size = size;
    Cookies.set("size", size);
  }
};

const actions = {
  toggleSideBar({ commit }) {
    commit("TOGGLE_SIDEBAR");
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit("CLOSE_SIDEBAR", withoutAnimation);
  },
  toggleDevice({ commit }, device) {
    commit("TOGGLE_DEVICE", device);
  },
  setLanguage({ commit }, language) {
    commit("SET_LANGUAGE", language);
  },
  setSize({ commit }, size) {
    commit("SET_SIZE", size);
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

在store的index.js和getter.js中配置相關的參數getter.js如下

const getters = {
  roles: state => state.user.userInfo.roles,
  permission_routes: state => state.permission.routes,
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
  size: state => state.app.size,
  device: state => state.app.device
};
export default getters;

在components下新建Hamburger>index.vue。通過傳入的isActive屬性來判斷折疊按鈕樣式的變化。index.vue代碼如下：

<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{ 'is-active': isActive }"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path
        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
      />
    </svg>
  </div>
</template>

<script>
export default {
  name: "Hamburger",
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit("toggleClick");
    }
  }
};
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>

在NavBar.vue中配置Hamburger組件,代碼如下。其中store中的device用來移動端的自適應。而自適應使用了VUE的混入,源代碼中為ResizeHandler.js。暫時不加進來。

<template>
  <div class="navbar">
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import hamburger from "@/components/Hamburger";
export default {
  components: { hamburger },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    }
  }
};
</script>

在添加后,折疊功能雖然可用,但折疊后SidebarItem的樣式發生變化,之前sidebar的樣式在lay>components>index.vue中import,通過閱讀源碼,發現全局樣式進行了統一控制。導入源碼中的樣式配置,在src>styles中的index.scss,同時在main.js中導入全局配置。main.js添加內容如下。

import "@/styles/index.scss"; 

之后頁面正常,但Item可能存在外鏈,所以修改SvgIcon組件,並做相關的判斷。

VUE內置組件

到目前的學習中涉及到的內置組件有：

• transition 元素作為單個元素/組件的過渡效果。 只會把過渡效果應用到其包裹的內容上,而不會額外渲染 DOM 元素,也不會出現在可被檢查的組件層級中。
• keep-alive 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 相似, 是一個抽象組件：它自身不會渲染一個DOM 元素,也不會出現在組件的父組件鏈中。當組件在 內被切換,它的 activated 和 deactivated 這兩個生命周期鈎子函數將會被對應執行。