构建Vue项目的侧边栏组件:Aside

news/2024/10/3 11:23:00/

构建Vue项目的侧边栏组件:Aside

在Vue项目中,侧边栏(Aside)是一个常见的组件,用于展示导航菜单。本文将详细介绍如何创建一个侧边栏组件,包括如何引入el-menu组件、定义路由、传递props以及编写MenuTree子组件等步骤。

1. 引入el-menu组件

首先,在Aside.vue中引入el-menu组件,用于构建侧边栏的菜单结构。

2. 侧边栏Logo

el-menu组件内部,添加一个用于显示侧边栏Logo的<p>标签。

3. 抽离MenuTree组件

为了更灵活地管理菜单数据,我们抽离出一个MenuTree组件,专门用于渲染菜单项和子菜单。

4. 定义路由

router/index.js文件中定义路由,并在对应的视图(view)页面中编写相应的内容。

5. Props传递

Aside.vue组件中,通过props向MenuTree组件传递菜单数据(menuData)和侧边栏收缩状态(isCollapse)。

使用useRouter获取路由信息

利用useRouter钩子获取路由信息,并从router.options.routes[0].children中提取出菜单数据,然后传递给MenuTree组件。

6. MenuTree.vue编写

MenuTree.vue组件中,我们使用v-for指令遍历菜单数据,根据菜单项是否有子项来生成不同的菜单结构。

  • 无子菜单:使用el-menu-item组件,并显示图标和文字。
  • 有子菜单:使用el-sub-menu组件,并递归调用MenuTree组件来生成子菜单。

7. 使用RouterView展示路由后的页面

App.vueLayout.vue中使用RouterView组件来展示路由对应的页面内容。

8. 侧边栏的缩放功能

侧边栏的缩放功能还未完全实现,但已在Header部分预留了按钮用于控制侧边栏的收缩状态。

完整代码示例

Aside.vue

<template><el-menu :default-active="$route.path" router :collapse="isCollapse"><p class="logo">{{ isCollapse ? 'W' : 'W陪诊' }}</p><menu-tree :menuData="menuData" :isCollapse="isCollapse" /></el-menu>
</template><script setup>
import MenuTree from './components/MenuTree.vue'
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { useMenuStore } from '@/stores'const router = useRouter()
const menuData = router.options.routes[0].children
const menuStore = useMenuStore()
const isCollapse = computed(() => menuStore.menuIsCollapse)
</script><style scoped>
/* 样式代码 */
</style>

MenuTree.vue

<template><div><template v-for="(item, index) in props.menuData"><el-menu-item v-if="!item.children" :index="item.meta.path"><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ isCollapse ? '' : item.meta.name }}</span></el-menu-item><el-sub-menu v-else :index="item.path"><template #title><el-icon><component :is="item.meta.icon"></component></el-icon><span>{{ isCollapse ? '' : item.meta.name }}</span></template><menu-tree :menuData="item.children" :isCollapse="isCollapse" /></el-sub-menu></template></div>
</template><script setup>
import { useRouter } from 'vue-router'
import { useMenuStore } from '@/stores'const props = defineProps(['menuData', 'isCollapse'])
const router = useRouter()
const MenuStore = useMenuStore()const handleClickMenu = (item) => {MenuStore.setTagList(item.meta)
}
</script>

通过上述步骤,我们可以成功地创建一个功能完备的侧边栏组件,为Vue项目提供清晰的导航结构。


http://www.ppmy.cn/news/1524496.html

相关文章

LRU go cache的实现

目录 LRU算法LRU原理LRU实现Redis LRU算法实现1. 内存淘汰策略2. LRU算法的实现3. LRU vs LFURedis中的LRU使用场景 基于LRU的缓存库go-cache安装使用代码解析 hashicorp/golang-lru安装使用代码解析 groupcache安装使用代码解析缓存淘汰算法并发缓存组一致性哈希防止缓存击穿—…

LeetCode之双指针

125. 验证回文串 class Solution {public boolean isPalindrome(String s) {// 获取输入字符串 s 的长度int len s.length();// 创建一个 StringBuilder 对象 result 用于存储处理后的字符串StringBuilder result new StringBuilder();// 遍历输入字符串 sfor (int i 0; i …

[N1CTF 2018]eating_cms1

进入到页面是一个login登录页面 . 去访问他的register.php页面进入注册页面. 注册进入. 一眼文件包含. 去读取一下user.php http://2641f658-8af4-4626-92d0-ceb19180ea92.node5.buuoj.cn:81/user.php?pagephp://filter/convert.base64-encode/resourceuser 解码. <?p…

git中,隐藏application.properties文件,修改不用提交了

git中&#xff0c;隐藏application.properties文件&#xff0c;修改不用提交了 A、将文件名放入 .gitignore 文件中 B、执行git命令隐藏文件 执行在ide上执行命令 a、执行隐藏命令 git rm --cached src/main/resources/application.properties b、执行提交命令 git commit -m…

AI产品经理:2024年职场发展的新机遇

前言 这两年&#xff0c;AI 骤然“火”了起来&#xff0c;可谓出现了重大“转折”。就在这短短两年间&#xff0c;全球各大“大厂”几乎在同一时间争先恐后地跟进 AI 技术。从 ChatGPT 发布起&#xff0c;谷歌、Facebook、亚马逊等纷纷紧跟其后&#xff0c;国内的百度、腾讯、…

NLP从零开始------文本中阶处理之序列到序列模型(完整版)

1. 序列到序列模型简介 序列到序列( sequence to sequence, seq2seq) 是指输入和输出各为一个序列(如一句话) 的任务。本节将输入序列称作源序列&#xff0c;输出序列称作目标序列。序列到序列有非常多的重要应用&#xff0c; 其中最有名的是机器翻译( machine translation), 机…

【EI会议末轮截稿通知】第三届电子信息技术国际学术会议(EIT 2024)

第三届电子信息技术国际学术会议&#xff08;EIT 2024&#xff09; The 3rd International Conference on Electronic Information Technology 重要信息 大会官网&#xff1a;www.ic-eit.net 三轮截稿时间&#xff1a;2024年9月16日23:59分&#xff08;后续不再征稿&#x…

鸿蒙(API 12 Beta6版)GPU加速引擎服务【自适应VRS】

XEngine Kit提供自适应VRS功能&#xff0c;其通过合理分配画面的计算资源&#xff0c;视觉无损降低渲染频次&#xff0c;使不同的渲染图像使用不同的渲染速率&#xff0c;能够有效提高渲染性能。 接口说明 以下接口为自适应VRS设置接口&#xff0c;如要使用更丰富的设置和查询…