vue3实现动态侧边菜单栏的几种方式简单总结

2024-03-01 0 417
目录
  • 基于自建json数据的动态侧边菜单栏
  • 基于后端接口数据 实现动态侧边菜单栏 vue3+elementplus
  • 总结

基于自建json数据的动态侧边菜单栏

后端接口json数据

src/api/menuList.js

const menuList = [
{
url: \’\’,
name: \’人员管理\’,
icon: \’icon-renyuan\’,
menuId: 1,
children: [
{
url: \’/user\’,
name: \’用户管理\’,
icon: \’icon-jurassic_user\’,
menuId: 1001,
children: []
},
{
url: \’/role\’,
name: \’角色管理\’,
icon: \’icon-jiaose\’,
menuId: 1002,
children: []
}
]
},
{
url: \’/device\’,
name: \’设备管理\’,
icon: \’icon-shebei\’,
menuId: 2
}
]
export default menuList;

home.vue页面上面显示该类型的菜单

在home.vue页面中import 这个文件

遍历数组中的menulist 中的json数据,因为只遍历到第二层 因此只支持两层目录 即父-子

<template>
<div class=\”common-layout\”>
<–! 基于elementplus的侧边栏标签–>
<el-aside width=\”400px\”>
<el-row class=\”tac\”>
<el-col :span=\”12\”>
<el-menu
default-active=\”2\”
class=\”el-menu-vertical-demo\”
:router=\”true\”
>
<el-sub-menu index=\”1\” v-for=\”item in menuList\” :key=\”item.id\”>
<!–一级模板区域 –>
<template #title>
<el-icon class=\”item.iconCls\”/>
<span>{{ item.name}}</span>
</template>
<el-menu-item :index=\”\’/\’+subItem.path\” v-for=\”subItem in item.children\” :key=\”item.id\”>
<template #title>
<span>{{subItem.name}}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
import menuList from \”@/api/mockdata/menList\”; //根据自己的路径来
export default {
name: \”Home\”,
data(){
return {
menuList
}

},
}
</script>
<style >
</style>

效果图

vue3实现动态侧边菜单栏的几种方式简单总结

基于后端接口数据 实现动态侧边菜单栏 vue3+elementplus

后端菜单接口数据

目录结构为 父目录 系统管理 子目录 广告管理 APP上传。 遍历json数据 在v-for页面显示 name 名称

http://localhost:8000/api/menu

[
{
\”id\”: 6,
\”url\”: \”/\”,
\”path\”: \”/home\”,
\”component\”: \”Home\”,
\”name\”: \”系统管理\”,
\”iconCls\”: \”fa fa-windows\”,
\”enabled\”: true,
\”children\”: [
{
\”id\”: 30,
\”url\”: null,
\”path\”: \”/sys/ad\”,
\”component\”: \”SysAd\”,
\”name\”: \”广告管理\”,
\”iconCls\”: \”fa fa-ad\”,
\”meta\”: null,
\”parentId\”: 6,
\”enabled\”: true,
\”children\”: null,
\”roles\”: null
},
{
\”id\”: 7,
\”url\”: null,
\”path\”: \”/sys/app\”,
\”component\”: \”SysApp\”,
\”name\”: \”App上传\”,
\”iconCls\”: \”fa-solid fa-circle-arrow-up\”,
\”meta\”: null,
\”parentId\”: 6,
\”enabled\”: true,
\”children\”: null,
\”roles\”: null
}
],
\”roles\”: null
}
]

在 home.vue中 显示此json数据形成的菜单

vue3包含的data() mounted() methods() 方法被一个 setup方法全包了

ref可以是对象也可以是变量 reactive中必须是对象。。

ref使用变量 不管是获取还是使用 都需要加上 .value

<template>
<div class=\”common-layout\”>
<el-container>
<el-aside width=\”400px\”>
<el-row class=\”tac\”>
<el-col :span=\”12\”>
<el-menu
default-active=\”2\”
class=\”el-menu-vertical-demo\”
:router=\”true\”
>
<el-sub-menu index=\”1\” v-for=\”item in menuList\” :key=\”item.id\”>
<!–一级模板区域 –>
<template #title>
<el-icon class=\”item.iconCls\”/>
<span>{{ item.name}}</span>
</template>
<!– 二级目录遍历 json中的children 显示name:中的内容–>
<el-menu-item :index=\”\’/\’+subItem.path\” v-for=\”subItem in item.children\” :key=\”item.id\”>
<template #title>
<span>{{subItem.name}}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>

</el-container>
</el-container>
</div>
</template>

<script>
import { Document, Location, Setting, Burger} from \”@element-plus/icons-vue\”;
import axios from \”axios\”;
import {onMounted,ref } from \’vue\’
import {useStore} from \”vuex\”;
export default {
name: \”Home\”,
components: {Burger, Setting, Document, Location},
setup() {
// vue3推荐使用ref 实现响应式数据 数据实时显示 将后端接受的数据赋值给ref
const menuList = ref();
onMounted(()=>{
axios.get(\”/api/menu\”).then(res =>{
console.log(\”onMounted\”)
const data = res.data
console.log(data)
menuList.value = data
})
})
return {
menuList
}
},

}
</script>

<style >
.homeHeader{
background-color: #04befe;
/*弹性展示*/
display: flex;
/* 居中对齐弹性盒子的各项 div 元素*/
align-items: center;

}

.mainTitle{
/* 规定元素中文本的水平对齐方式 居中*/
text-align: center;
/* 颜色为深空色*/
color: deepskyblue;
/* 字体大小*/
font-size: 30px;
/* 距离顶部的距离为 20px 数值越大下降位置越多*/
//padding-top: 20px;
}
.headerTitle{
/*字体大小*/
font-size: 20px;
/* 字体颜色*/
color: #fffff9;
}
//标签换行样式 vue3中不支持标签页换行
.text-wrapper {
display: inline-block;
word-break: break-all;
word-wrap: break-word
}
</style>

效果图

vue3实现动态侧边菜单栏的几种方式简单总结

总结

到此这篇关于vue3实现动态侧边菜单栏的几种方式的文章就介绍到这了,更多相关vue3动态侧边菜单栏实现内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue3实现动态侧边菜单栏的几种方式简单总结 https://www.u-9.cn/biancheng/javascript/182271.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务