1.未实现效果
2.实现效果
3.上代码
<script lang="ts" setup>
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
const { setMenuSetting } = useMenuSetting();
//默认关闭左侧菜单栏
function toggleCollapsed() {
setMenuSetting({
collapsed: true,
});
}
//初始化
onMounted(()=>{
toggleCollapsed();
});
</script>
4.实现原理解析
1.首先你需要知道有一个菜单配置projectSetting.ts,看一眼就行menuSetting。
2.然后全局查询文件夹'/@/hooks/setting/useMenuSetting'。
3.然后找到const getCollapsed = computed(() => appStore.getMenuSetting.collapsed);没错,他就是主谋,控制菜单开启或关闭
4.重点:在指定路由中写入目录3(上代码),用true或false控制,就ok了