效果图
划分一下区域
搭建Layout布局
页面
- 在src下面创建layout目录,这里面放置layout相关的页面组件(侧边栏、头部、主体部分等)。
- 各个模块
-
我这里是把各个区域的页面按模块区分,在index.vue导入使用。
layout/components
- SideBar(侧边栏)
- Logo(侧边栏Logo)
- Content(主体部分)
- Header(右侧头部)
- Footer(右侧底部区域)
layout/index.vue
layout/index.ts:这里统一导出模块
- SideBar(侧边栏)
-
index.ts
-
index.vue
-
SideBar/index.vue
- Logo组件就在这里面被使用了。因为Logo也是侧边栏的一部分。
- Logo组件就在这里面被使用了。因为Logo也是侧边栏的一部分。
-
Header/index.vue
-
Content/index.vue
-
Footer/index.vue
功能
点击动态收缩侧边栏
- 我们知道sider侧边栏 collapsed参数可以控制收起状态,我们给它绑定一个变量
- 点击icon的时候控制 sider侧边栏 collapsed参数绑定的变量即可。
- ?这时候我们会遇到问题,因为侧边栏和icon所在的header组件不在一个页面里面,那我们能在icon所在的页面控制到collapsed参数绑定的变量呢?
- 我这里采用的是Pinia状态管理来管理这个参数并且存入用户本地缓存。
-
我们先来看一下我们控制侧边栏的icon所在的这个页面(在header/index.vue中。)
-
方法中使用到了sidebar,我们可以看到是useAppStore里面暴露的,因为我使用了pinia。我们来看下useAppStore所在的文件 app.ts
-
可以看到我这里引入了app-key 和 local-storage,这也分别对应两个ts文件,代码如下。
- 这里我local-storagets也引用了一个别的文件,cache-key.ts
好了,现在简单来捋一下代码逻辑
- 当存入了本地缓存,然后侧边栏那边collapsed参数绑定的计算属性就会监听到从而改变侧边栏收起、展开状态。