github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

collapse sidebar with resize window

pull/352/head
Sophea Vann 2022-09-29 10:48:21 +07:00
parent 8312ba1d6c
commit 9fac817ac5
2 changed files with 1999 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1885
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
src/components/header.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="header"> <div class="header">
<!-- 折叠按钮 --> <!-- 折叠按钮 -->
<div class="collapse-btn" @click="collapseChage"> <div class="collapse-btn" @click="collapseChange">
<el-icon v-if="sidebar.collapse"><Expand /></el-icon> <el-icon v-if="sidebar.collapse"><Expand /></el-icon>
<el-icon v-else><Fold /></el-icon> <el-icon v-else><Fold /></el-icon>
</div> </div>
@ -31,11 +31,16 @@
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <a
href="https://github.com/lin-xin/vue-manage-system"
target="_blank"
>
<el-dropdown-item>项目仓库</el-dropdown-item> <el-dropdown-item>项目仓库</el-dropdown-item>
</a> </a>
<el-dropdown-item command="user">个人中心</el-dropdown-item> <el-dropdown-item command="user">个人中心</el-dropdown-item>
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> <el-dropdown-item divided command="loginout"
>退出登录</el-dropdown-item
>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
@ -44,34 +49,42 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue'; import { onMounted } from "vue";
import { useSidebarStore } from '../store/sidebar'; import { useSidebarStore } from "../store/sidebar";
import { useRouter } from 'vue-router'; import { useRouter } from "vue-router";
import imgurl from '../assets/img/img.jpg'; import imgurl from "../assets/img/img.jpg";
const username: string | null = localStorage.getItem('ms_username'); const username: string | null = localStorage.getItem("ms_username");
const message: number = 2; const message: number = 2;
const sidebar = useSidebarStore(); const sidebar = useSidebarStore();
// 侧边栏折叠 // 侧边栏折叠
const collapseChage = () => { const collapseChange = () => {
sidebar.handleCollapse(); sidebar.handleCollapse();
}; };
onMounted(() => { const onCollapse = () => {
if (document.body.clientWidth < 1500) { if (document.body.clientWidth < 1500) {
collapseChage(); sidebar.collapse = false;
collapseChange();
} else {
sidebar.collapse = true;
collapseChange();
} }
};
onMounted(() => {
window.addEventListener("resize", onCollapse);
}); });
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
const router = useRouter(); const router = useRouter();
const handleCommand = (command: string) => { const handleCommand = (command: string) => {
if (command == 'loginout') { if (command == "loginout") {
localStorage.removeItem('ms_username'); localStorage.removeItem("ms_username");
router.push('/login'); router.push("/login");
} else if (command == 'user') { } else if (command == "user") {
router.push('/user'); router.push("/user");
} }
}; };
</script> </script>