Vue3+Vite+TypeScript+Element Plus开发-06.Header响应式菜单缩展

系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

Header响应式菜单缩展

Mockjs引用与Axios封装

登录设计

登录成功跳转主页

多用户动态加载菜单

---

文章目录

目录

系列文档目录

文章目录

前言

一、Header响应

二、Aside呈现

三、Main.vue调整

四、运行效果

---

---

前言

          回顾上章节 介绍了Pinia store 的基本概念及其在状态管理中的作用。通过 定义   isCollapse   状态来控制菜单显示状态中的作用。

        在本章节中，探讨如何通过用户交互——具体来说是点击按钮——来控制 Pinia store 中isCollapse   状态的变化。该状态的变更将直接影响应用中菜单的显示行为，实现菜单的动态收缩与展开功能。 

---

一、Header响应

目标

        • 在 Header 上添加一个按钮，用于切换   isCollapse   状态。

        • 确保按钮点击事件能够触发状态变更。

步骤

        1. 打开   MainHdrCont.vue   文件： 找到并打开位于   src/components/   目录下的   MainHdrCont.vue   文件。

        2. 修改模板部分： 在   <template>   部分中，添加一个按钮元素，并绑定点击事件。

        3. 添加方法： 在   <script>   部分中，定义一个方法来处理按钮点击事件，该方法将切换   isCollapse   状态。

        4. 更新样式（可选）： 根据需要更新样式，以确保按钮在页面上正确显示。

重点案例代码：

// 定义按钮文本，根据 store.isCollapse 的值动态设置
const bntMenuText = computed(() => {
  return store.isCollapse ? 'expand' : 'collapse';
});
// 定义单击事件的处理函数
function handleMenu() {