vue3实现动态侧边菜单栏的几种方式简单总结
基于自建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+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动态侧边菜单栏实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
vue中实现支持txt,docx,xlsx,mp4格式文件预览功能(纯前端)
对于Vue你可以实现文件的预览功能,这篇文章主要给大家介绍了关于vue中实现支持txt,docx,xlsx,mp4格式文件预览功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情(完整实例)
这篇文章主要介绍了vue中PC端使用高德地图实现搜索定位、地址标记、弹窗显示定位详情,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
最新评论