43 lines
927 B
Vue
43 lines
927 B
Vue
|
<!--
|
||
|
|
* @Description:
|
||
|
|
* @Author: zenghua.wang
|
||
|
|
* @Date: 2023-06-20 14:29:45
|
||
|
|
* @LastEditors: zenghua.wang
|
||
|
|
* @LastEditTime: 2024-01-26 23:04:29
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="layout-hamburger" @click="handleCollapse">
|
||
|
|
<el-icon v-if="isCollapse" class="icon"><expand /></el-icon>
|
||
|
|
<el-icon v-else class="icon"><fold /></el-icon>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup name="layout-hamburger">
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { useSettingStore } from '@/store/modules/setting';
|
||
|
|
|
||
|
|
const SettingStore = useSettingStore();
|
||
|
|
const isCollapse = computed(() => !SettingStore.isCollapse);
|
||
|
|
|
||
|
|
const handleCollapse = () => {
|
||
|
|
SettingStore.setCollapse(isCollapse.value);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.layout-hamburger {
|
||
|
|
padding: 0px 15px;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background: rgba(0, 0, 0, 0.025);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
font-size: 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|