|
|
@@ -1,74 +1,66 @@
|
|
|
<template>
|
|
|
<el-aside class="siderbar_container" :width="isCollapse ? '72px' : '150px'">
|
|
|
- <div @click="toggleCollapse">
|
|
|
+ <div @click="toggleCollapse" class="collapse_box">
|
|
|
<img v-if="isCollapse" src="@/assets/icon/open.svg" alt="">
|
|
|
<img v-else src="@/assets/icon/close.svg" alt="">
|
|
|
</div>
|
|
|
<el-menu :collapse="isCollapse" router @handleOpen="handleOpen" @handleClose="handleClose">
|
|
|
- <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route">
|
|
|
+ <el-menu-item v-for="item in menuItems" :key="item.route" :index="item.route" :class="activeRoute == item.route ? 'is-active' : ''" >
|
|
|
+ <template #default>
|
|
|
+ <i class="iconfont" :class="`icon-${item.icon}`"></i>
|
|
|
+ <span v-if="!isCollapse">{{ item.label }}</span>
|
|
|
+ </template>
|
|
|
<template #title>
|
|
|
- <!-- <img :src="`@/assets/icon/${item.icon}.svg`" alt=""> -->
|
|
|
- <img src="`@/assets/icon/manage_normal.svg`" alt="">
|
|
|
- <span>{{ item.label }}</span>
|
|
|
+ <span v-if="isCollapse">{{ item.label }}</span>
|
|
|
</template>
|
|
|
</el-menu-item>
|
|
|
</el-menu>
|
|
|
</el-aside>
|
|
|
</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { ref } from 'vue';
|
|
|
+<script lang="ts">
|
|
|
export default {
|
|
|
- name: 'SiderBar',
|
|
|
- components: {
|
|
|
+ name: 'SiderBar'
|
|
|
+}
|
|
|
+</script>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, watch } from 'vue';
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+
|
|
|
+const route = useRoute()
|
|
|
+const activeRoute = ref(route.path)
|
|
|
+watch(() => route.path, (newVal) => {
|
|
|
+ activeRoute.value = newVal
|
|
|
+})
|
|
|
+const isCollapse = ref(false)
|
|
|
+const menuItems = ref([
|
|
|
+ {
|
|
|
+ label: '学校管理',
|
|
|
+ icon: 'school_normal',
|
|
|
+ route: '/main/school',
|
|
|
},
|
|
|
- setup() {
|
|
|
- const isCollapse = ref(false)
|
|
|
- const menuItems = ref([
|
|
|
- {
|
|
|
- label: '学校管理',
|
|
|
- icon: 'school_normal',
|
|
|
- icon_light: 'school_light',
|
|
|
- icon_hover: 'school_hover',
|
|
|
- route: '/main/school',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '运维管理',
|
|
|
- icon: 'manage_normal',
|
|
|
- icon_light: 'school_light',
|
|
|
- icon_hover: 'school_hover',
|
|
|
- route: '/main/manager',
|
|
|
- },
|
|
|
- {
|
|
|
- label: '联考管理',
|
|
|
- icon: 'join_exam_normal',
|
|
|
- icon_light: 'join_exam_light',
|
|
|
- icon_hover: 'join_exam_hover',
|
|
|
- route: '/main/examination',
|
|
|
- }
|
|
|
- ])
|
|
|
- const handleOpen = (key, keyPath) => {
|
|
|
- console.log(key, keyPath)
|
|
|
- }
|
|
|
- const handleClose = (key, keyPath) => {
|
|
|
- console.log(key, keyPath)
|
|
|
- }
|
|
|
- const toggleCollapse = () => {
|
|
|
- isCollapse.value = !isCollapse.value
|
|
|
- }
|
|
|
- return {
|
|
|
- isCollapse,
|
|
|
- menuItems,
|
|
|
- handleOpen,
|
|
|
- handleClose,
|
|
|
- toggleCollapse,
|
|
|
-
|
|
|
- }
|
|
|
+ {
|
|
|
+ label: '运维管理',
|
|
|
+ icon: 'manage_normal',
|
|
|
+ route: '/main/manager',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '联考管理',
|
|
|
+ icon: 'school_normal',
|
|
|
+ route: '/main/examination',
|
|
|
}
|
|
|
+])
|
|
|
+const handleOpen = (key, keyPath) => {
|
|
|
+ console.log(key, keyPath)
|
|
|
+}
|
|
|
+const handleClose = (key, keyPath) => {
|
|
|
+ console.log(key, keyPath)
|
|
|
+}
|
|
|
+const toggleCollapse = () => {
|
|
|
+ isCollapse.value = !isCollapse.value
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.siderbar_container {
|
|
|
background: #fff;
|
|
|
padding: 16px;
|
|
|
@@ -80,4 +72,47 @@ export default {
|
|
|
.el-menu-item {
|
|
|
padding: 0;
|
|
|
}
|
|
|
+.iconfont {
|
|
|
+ margin-right: 5px;
|
|
|
+ display: inline-block;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+.collapse_box {
|
|
|
+ padding-left: 10px;
|
|
|
+ // text-align: center;
|
|
|
+}
|
|
|
+.el-menu.el-menu--vertical ::v-deep(.el-menu-item) {
|
|
|
+ height: 40px;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ .iconfont {
|
|
|
+ margin-right: 8px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-menu--collapse .el-menu-item span {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.el-menu-item ::v-deep(.el-menu-tooltip__trigger) {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.el-menu-item {
|
|
|
+ &.is-active,
|
|
|
+ &.is-active:hover {
|
|
|
+ background: #2E64FA;
|
|
|
+ color: #fff;
|
|
|
+ .iconfont {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:not(.is-active):hover {
|
|
|
+ background: inherit;
|
|
|
+ color: #2E64FA;
|
|
|
+ .iconfont {
|
|
|
+ color: #2E64FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
zhangguohua