前言

前一段时间, 写了强盛集团管理系统(基于 BPMN 引擎的工作流系统), 打算使用 qiankun 改造下项目架构, 迈向微前端。在上一章的基础上, 搭建基座应用的布局, 此章为折叠左侧栏和面包屑。

先来看下效果图吧!

简单实现下

考虑到左侧栏的折叠功能会影响后续（例如单独抽离主题设置面板）等工作, 以及在布局中, 折叠图标一般防置在<LayoutHeader>组件中, 而实际控制的则是左侧栏</LayoutAside>组件。

那我暂时选择将左侧栏折叠状态放在 Vuex 中，接下来则是实现部分

Vuex app 模块

1. 设置全局标识, 新建store/modules/app.js

export default {
  namespaced: true,
  state: {
    sidebar: {
      opened: true,
    },
  },
  mutations: {
    set_sidebar(state, { key, value }) {
      state[key] = value;
    },
  },
  actions: {
    setSidebar({ commit }, { key, value }) {
      commit("set_sidebar", { key, value });
    },
  },
  getters: {
    sidebar: (state) => state.sidebar,
  },
};

设置左侧栏sidebar折叠状态opened, 同时sidebar下可能会有较多状态值需要记录, 设置值时为单独设置, 取值时则是返回全部

2. 引入app 模块

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    app,
  },
  state: {},
  getters: {},
  mutations: {},
  actions: {},
});

头部增加折叠图标

1. 新增icon

<!-- 头部栏 -->
<template>
  <div class="layout-header">
    <div @click="toggle" class="fold-btn">
      <icon :name="sidebar.opened ? 's-fold' : 's-unfold'" scale="0.4"></icon>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from "vuex";
  export default {
    name: "",
    data() {
      return {};
    },
    computed: {
      ...mapGetters("app", ["sidebar"]),
    },
    methods: {
      ...mapActions("app", ["toggleCollapse"]),
      toggle() {
        this.toggleCollapse(!this.sidebar.opened);
      },
    },
    created() {},
    mounted() {},
  };
</script>
<style lang="less" scoped>
  .layout-header {
    display: flex;
    align-items: center;
    height: 40px;
    .fold-btn {
      width: 24px;
      height: 24px;
      color: black;
      margin: 0 5px;
    }
  }
</style>

通过 Vuex 的 mapGetters、mapActions 可以比较方便的调用 app 模块的方法

s-fold与s-unfold为阿里矢量库的图标, 上一章是怎样制作图标

此时折叠栏的效果已经出来了。

样式变量

左侧栏<LayoutAside>头部防止 logo 和顶部栏<LayoutHeader>一般为同高度, 系统中还会有一些默认样式等。

那我选择将样式变量统一放置, 先来浅浅的实现一下

1. 新建src/assets/css/common-variables.less

/* 布局 */
@layout-header-height: 40px;

2. <LayoutAside> 组件中将头部高度设置下

<style lang="less" scoped>
@import url('@/assets/css/common-variables.less');
.layout-aside-logo {
  height: @layout-header-height;
  line-height: @layout-header-height;
  ...
}

.layout-aside-scrollbar {
  height: calc(100vh - @layout-header-height);
  ...
}
</style>

调整左侧栏顶部 logo 的高和行高, 及左侧栏的滚动高度

3. <LayoutHeader> 组件中将高度调整

<style lang="less" scoped>
@import url('@/assets/css/common-variables.less');
.layout-header {
  height: @layout-header-height;
  box-shadow: 0 0 4px 0px #999;
  ...
}
</style>

增加了底部阴影

此时就可以通过变量统一设置顶栏的高度了。

面包屑