vue3+ElementPlus后台管理搭建（二）_vue3展示与隐藏侧边栏 默认隐藏

阿里icon 及侧边收缩

1.阿里图标添加

选择合适的阿里图标到我的项目

选择到项目后，点击font class 将下面的代码复制到public的index.html中，这里新添加图标后，这行css可能会变更，记得同步到项目中
选择合适的icon，复制代码即可使用

在项目中使用也很简单,如下即可

<i class='iconfont icon-sucaiku'></i>
1

例如我们在前面一节看到的 在路由管理里面的meta里面填的icon实际上就是这里的几个图标，具体渲染也见前面一节。

 <i class="iconfont" :class="item.meta.icon"></i>
1

2.侧边收缩

实际上在el-menu里面提供了一个属性，collapse,这个属性可以实现侧边的收缩，但是我们需要在其兄弟组件（header.vue）
里面实现对其控制，这里我们套用一下状态管理

• 首先是在el-menu里加上属性

  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="layout-menu system-scrollbar"
    text-color="#fff"
    :collapse="isCollapse"
    :default-active='activeMenu'
    router
  >
  .......
  </el-menu>
1
2
3
4
5
6
7
8
9
10
11

• 接着我们在store里面把collapse的状态折腾起来
  这里我们把后台的状态部门拆分出来 叫做app.js，新建在store–>modules–>app.js
  代码如下：

export default {
  namespaced: true,
  state () {
    return {
      isCollapse: false
    }
  },
  mutations: {
    // 修改边框
    CollapseChage (state, type) {
      state.isCollapse = type
    }
  },
  actions: {
    // 修改边框
    async isCollapseChange (ctx, type) {
      ctx.commit('CollapseChage', type)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意一定要加上namespaced，具体原因百度吧，在state里面将isCollapse状态添加进来，默认是false，即非折叠
在mutations里面添加搜索侧边的方法，CollapseChange,需要传入当前isCollapse的类型（true, false）
在actions里面提供改变侧边的方法，需要传入isCollapse的类型
然后将app.js作为模块引入index.js中，如下：

import { createStore } from 'vuex'
import app from './modules/app'

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    app
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在侧边组件里面（Aside.vue）只需要用计算属性去知道state里面的isCollapse是false还是true,

<script>
import { useStore } from 'vuex'
import { computed } from 'vue' 
export default {
	setup () {
		const store = useStore()
		const isCollapse = computed(() => store.state.app.isCollapse)
		return { isCollapse }
 	}
1
2
3
4
5
6
7
8
9

• 在其兄弟组件（header.vue）里面实现对其控制吧
  使用一下elementplus的图标 安装 @element-plus/icons-vue

<template>
  <header>
    <div class="left-box">
      <div class="menu-icon" @click='changeCollapse'>
        <el-icon><expand /></el-icon>
      </div>
    </div>
  </header>
</template>
<script>
import { Expand } from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  name: 'Header',
  components: { Expand },
  setup () {
    const store = useStore()
    const isCollapse = computed(() => store.state.app.isCollapse)
    const changeCollapse = () => {
      store.dispatch('app/isCollapseChange', !isCollapse.value)
    }
    return { isCollapse, changeCollapse }
  }
}
</script>
<style lang="less" scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

通过changeCollapse传入一个与当前相反的类型（true,false）

3.完善一个前面小节的小问题

el-menu里面有一个:default-active的属性，就是默认激活态
使用store，获取当前页面的地址，然后通过计算属性填到这里
Aside.vue

  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="layout-menu system-scrollbar"
    text-color="#fff"
    :collapse="isCollapse"
    :default-active='activeMenu'
    router
  >
</el-menu>
<script>
import { useRoute } from 'vue-router'
import { computed } from 'vue' 
export default {
	setup () {
		const route = useRoute()
		const activeName = computed(() => {
			const { path } = route
			return path
		}
		return { activeName }
	}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24