Skip to content

D
DC-TOM
Commit 2d632a91 authored by liqiuyu's avatar liqiuyu
Browse files
Options

feat(*): 左侧菜单栏增加折叠

parent 6a39dabf
Show whitespace changes
Inline Side-by-side
Showing with 177 additions and 34 deletions
src/components/Hamburger/index.vue 0 → 100644
View file @ 2d632a91
<template >
<div class="hamburger" @click="toggleClick">
<svg
:class="{'is-active':isActive}"
class="hamburger-icon"
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 setup>
import { ref, defineProps,defineEmits } from 'vue';
const emit = defineEmits(['toggleClick']);
const props = defineProps({
isActive: {
type: Boolean,
default: false
},
});
const toggleClick = ()=>{
emit('toggleClick');
}
</script>
<style scoped lang="scss">
.hamburger {
padding: 0 15px;
.hamburger-icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
}
.is-active {
transform: rotate(180deg);
}
}
</style>
\ No newline at end of file
src/layout/index.vue
View file @ 2d632a91
<template>
<div class="layout-box">
<div class="left">
<div class="left" :class="{'colWidth': sidebar}">
<menuCom></menuCom>
</div>
<div class="right">
<div class="right" :class="{'extend': sidebar}">
<div class="header">
<hamburger
class="hamburger-container"
@toggleClick="toggleSideBar"
:is-active="sidebar"
/>
<h3>DC-TOM管理平台</h3>
<el-dropdown trigger="click">
<div class="right-block">
<el-dropdown class="right-menu-item"
trigger="click"
>
<div class="user-info">
<svg color="red" data-icon-name="user-circle" data-style="line" icon_origin_id="24289" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="user-circle" class="icon line" width="40" height="40"><path style="fill: none; stroke: rgb(1, 135, 150); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;" d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z" id="primary"></path></svg>
<!-- <img
......@@ -24,6 +31,7 @@
</template>
</el-dropdown>
</div>
</div>
<div class="content">
<div class="breadcrumb-container">
<el-breadcrumb separator="/">
......@@ -44,10 +52,13 @@ import { useRoute, useRouter } from 'vue-router';
import { watch, ref, onMounted } from 'vue';
import { getToken } from '@/utils/auth';
import { useUsersStore } from "@/pinia/user.js";
import { menuStore } from '@/pinia/menu.js';
import hamburger from "@/components/Hamburger/index.vue";
import { storeToRefs } from 'pinia';
export default {
components: {
menuCom,
hamburger
},
setup() {
const router = useRouter();
......@@ -87,6 +98,8 @@ export default {
const userName = getToken('userName')
const store = useUsersStore();
const menu = menuStore();
const { sidebar } = storeToRefs(menuStore());
async function logout() {
sessionStorage.setItem("permissionData", "");
sessionStorage.setItem("branchFactoryList", []);
......@@ -95,10 +108,15 @@ export default {
store.istrue = false;
router.push({ path: '/login' });
}
const toggleSideBar = () => {
menu.toggleSideBar();
}
return {
breadcrumbList,
userName,
logout
logout,
sidebar,
toggleSideBar
};
},
created() {
......@@ -111,25 +129,58 @@ export default {
.layout-box {
display: flex;
height: 100vh;
width: 100%;
.left {
width: 200px;
height: 100%;
background: linear-gradient(180deg, #018796, #014155);
}
.colWidth {
width: 63px;
}
.right {
width: calc(100vw - 200px);
min-height: 100%;
width: calc(100% - 200px);
.header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 4.0625rem !important;
background: #ffffff;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
box-sizing: border-box;
position: relative;
.hamburger-container {
line-height: 4.0625rem;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
h3 {
margin-left: 3.125rem;
font-size: 1.75rem !important;
margin: 0;
position: absolute;
left: 50px;
top: 14px;
}
.right-block {
line-height: 50px;
float: right;
height: 100%;
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
padding: 0 8px;
height: 100%;
vertical-align: text-bottom;
}
}
.user-info {
cursor: pointer;
......@@ -138,6 +189,7 @@ export default {
margin-right: 3.125rem;
font-size: 1.25rem !important;
color: #606266;
height: 100%;
.user-avatar {
width: 1.5rem;
height: 1.5rem;
......@@ -149,6 +201,7 @@ export default {
line-height: 1.5rem;
}
}
}
.breadcrumb-container {
flex: 1;
......@@ -163,5 +216,8 @@ export default {
background: #e7eef5;
}
}
.extend {
width: calc(100% - 63px);
}
}
</style>
src/layout/menuCom.vue
View file @ 2d632a91
......@@ -5,6 +5,8 @@
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
:collapse="sidebar"
:collapse-transition="false"
>
<template v-for="(item, index) in routerList" :key="item.path">
<el-sub-menu
......@@ -16,14 +18,22 @@
<el-icon><location /></el-icon>
<span>{{getMenuTitle(item)}}</span>
</template>
<el-menu-item v-for="(item_son, index_son) in item.children" :key="item_son.path" :index="index + '_' + index_son"
@click="handleClick(item_son.path)">
<el-menu-item v-for="(item_son, index_son) in item.children"
:key="item_son.path"
:index="index + '_' + index_son"
@click="handleClick(item_son.path)"
class="submenu-title-noDropdown"
>
<span>{{getMenuTitle(item_son)}}</span>
<!-- <router-link :to="item.path + '/' + item_son.path">{{getMenuTitle(item_son)}}</router-link> -->
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="index + ''" class="submenu-box" @click="handleClick(item.path)">
<el-icon><setting /></el-icon>
<el-menu-item v-else :index="index + ''"
class="submenu-box"
@click="handleClick(item.path)"
>
<el-icon>
<setting />
</el-icon>
<span>{{getMenuTitle(item)}}</span>
</el-menu-item>
</template>
......@@ -41,9 +51,10 @@ import {
} from "@element-plus/icons-vue";
import {routes} from "../router/index.js";
import { useRouter } from 'vue-router'
const router = useRouter()
import { menuStore } from '@/pinia/menu.js';
import { storeToRefs } from 'pinia';
const router = useRouter();
const { sidebar } = storeToRefs(menuStore());
const handleClick = (path) => {
console.log(path);
if (path.startsWith('/')) {
......@@ -106,4 +117,14 @@ const getMenuTitle = (item) => {
color: #fff !important;
}
}
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
background: transparent;
color: #FFFFFF !important;
&:hover {
background-color: #03a1b3 !important;
}
}
</style>
\ No newline at end of file
src/pinia/index.js
View file @ 2d632a91
//创娃store很简单，调用pinia中的definestore函数即可，该函数族收两个参数:
import {defineStore} from 'pinia'
import user from './user'
import user from './user';
import menu from './menu';
console.log(user.actions)
//第一个参敬是应用程序中store的唯一id,就是给数据仓库起个名字
......@@ -11,3 +12,8 @@ export const useUsersStore = defineStore('user',{
state: user.state,
actions: user.actions,
})
export const menuStore = defineStore('menu',{
state: menu.state,
actions: menu.actions,
})
src/pinia/menu.js 0 → 100644
View file @ 2d632a91
import { defineStore } from 'pinia';
export const menuStore = defineStore('menu',{
state: ()=>{
return {
sidebar: false,
}
},
actions: {
toggleSideBar() {
this.sidebar = !this.sidebar;
},
}
})
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment