devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【无标题】vue封装侧边栏_vue侧边栏组件

作者：黑客灵魂 | 2024-08-12 21:53:51

赞

踩

vue侧边栏组件

Vue2

  1. <!-- 左侧导航组件 -->
  2. <!-- 使用说明：<side-bar></side-bar> -->
  3. <template>
  4. 	<div class="sidebar_wrap">
  5. 		<!-- <div class="wrap_title">
  6.       <img src="@/assets/images/logo.png" alt />
  7.       <div>张家湾数字管理平台</div>
  8.     </div> -->
  9. 		<div class="wrap_catalog">
  10. 			<el-menu :default-active="'/'+NavActive" :unique-opened="isUnique" :router="isRouter" mode="vertical"
  11. 				ref="menu">
  12. 				<!-- 一级菜单 -->
  13. 				<template v-for="(item,index) in navData">
  14. 					<el-submenu v-if="item.children && item.children.length" :index="item.router" :key="index"
  15. 						ref="elMenu" class="list_one" @open="open">
  16. 						<template slot="title">
  17. 							<div @click="clickStatus($event,item)">
  18. 								<img :src="require('../assets/images/'  +item.icon_none + '.png')" class="imgs1"
  19. 									v-if="item.status === '0'" />
  20. 								<span>{{item.name}}</span>
  21. 							</div>
  22. 						</template>
  23. 						<!-- 二级菜单 -->
  24. 						<template v-for="itemChild in item.children">
  25. 							<el-menu-item :index="itemChild.router" :key="itemChild.router">
  26. 								<span slot="title" class='submenu'>{{itemChild.name}}</span>
  27. 							</el-menu-item>
  28. 						</template>
  29. 					</el-submenu>
  30. 					<el-menu-item v-else :index="item.router" :key="item.router" @open="open" ref="elMenu"
  31. 						class="list_two">
  32. 						<div @click="clickStatus($event,item)">
  33. 							<img :src="require('../assets/images/'  +item.icon_none + '.png')" class="imgs1"
  34. 								v-if="item.status === '0'" />
  35. 							<span slot="title">{{item.name}}</span>
  36.  
  37. 						</div>
  38. 					</el-menu-item>
  39. 				</template>
  40. 			</el-menu>
  41. 		</div>
  42.  
  43. 	</div>
  44. </template>
  45. <script>
  46. 	import {studentsList} from "../assets/js/studentsList";
  47. 	import {parentList} from '../assets/js/parentList'
  48. 	import {teacherList} from '../assets/js/teacherList'
  49. 	export default {
  50. 		name: "sidebar",
  51. 		data() {
  52. 			return {
  53. 				isUnique: true,
  54. 				isRouter: true,
  55. 				navData: [],
  56. 				NavActive: "",
  57. 			};
  58. 		},
  59. 		beforeMount() {
  60. 			this.getActiveNav();
  61. 		},
  62. 		watch: {
  63. 			//监听路由变化
  64. 			$route(index) {
  65. 				// console.log('sideBarRouter',index)
  66. 				let path = index.path.substr(1);
  67. 				this.handleSelect(path);
  68. 			},
  69. 		},
  70. 		created() {
  71. 			// this.navData = JSON.parse(localStorage.menus);
  72. 		},
  73. 		mounted() {
  74. 			let userVal = sessionStorage.getItem("userVal");
  75. 			if(userVal==0){
  76. 				this.navData = studentsList.list;
  77. 				this.$router.push({path:'/studentHome'})
  78. 			}else if(userVal==1){
  79. 				this.navData = parentList.list;
  80. 				this.$router.push({path:'/parentHome'})
  81. 			}else if(userVal==2){
  82. 				this.navData = teacherList.list
  83. 				this.$router.push({path:'/teacherHome'})
  84. 			}
  85. 			// console.log(sessionStorage.getItem("isGarden") === "0");
  86. 			// console.log(sessionStorage.getItem("isGarden") === "1");
  87. 			// // isGarden === 0 为园区端；isGarden === 1 为企业端
  88. 			// if (sessionStorage.getItem("isGarden") === "0") {
  89. 			// 	this.navData = navDataList.list;
  90. 			// } else if (sessionStorage.getItem("isGarden") === "1") {
  91. 			// 	this.navData = navdataa.list;
  92. 			// }
  93. 		},
  94. 		methods: {
  95. 			getActiveNav() {
  96. 				let currentUrl = window.location.href;
  97. 				this.NavActive = currentUrl.split("/").pop();
  98. 			},
  99. 			//监听路由的变化，对应菜单高亮显示
  100. 			handleSelect(index) {
  101. 				this.NavActive = index;
  102. 			},
  103. 			clickStatus(e, item) {
  104. 				// console.log(e,item)
  105. 				// console.log(this.$refs.elMenu)
  106. 				// this.$refs.elMenu.map((item1) => {
  107. 				//   console.log(item1.$el)
  108. 				//   // if(item1.active === false){
  109.  
  110. 				//   // }
  111. 				// })
  112. 			},
  113. 			open() {
  114. 				console.log("1");
  115. 			},
  116. 		},
  117. 	};
  118. </script>
  119. <style scoped lang="less">
  120. 	.sidebar_wrap {
  121. 		width: 1.4583rem;
  122. 		height: 100%;
  123. 		// background: #870000;
  124. 		background: #fff;
  125. 		overflow-y: auto;
  126. 		overflow-x: hidden;
  127.  
  128. 		.wrap_title {
  129. 			display: flex;
  130. 			align-items: center;
  131. 			justify-content: center;
  132. 			font-size: 0.1111rem;
  133. 			color: #fff;
  134. 			height: 0.5556rem;
  135.  
  136. 			img {
  137. 				width: 0.2778rem;
  138. 				height: 0.1528rem;
  139. 				margin-right: 0.0764rem;
  140. 			}
  141. 		}
  142.  
  143. 		.wrap_catalog {
  144. 			/deep/ .el-menu {
  145. 				border-right: none;
  146. 				// background-color: #870000;
  147. 				background-color: #fff;
  148. 				width: 1.4583rem;
  149.  
  150. 				li {
  151. 					padding: 0 !important;
  152. 				}
  153.  
  154. 				.el-menu-item {
  155. 					height: 0.3056rem;
  156. 					line-height: 0.3056rem;
  157. 					font-size: 0.1111rem;
  158. 					color: #0E151E;
  159. 					// border-bottom: 0.0069rem solid #a43d3d;
  160. 				}
  161.  
  162. 				.el-submenu__title {
  163. 					height: 0.3056rem;
  164. 					line-height: 0.3056rem;
  165. 					font-size: 0.1111rem;
  166. 					// color: #0E151E;
  167. 					// border-bottom: 0.0069rem solid #a43d3d;
  168. 				}
  169.  
  170. 				.el-submenu__icon-arrow {
  171. 					display: none;
  172. 				}
  173.  
  174. 				.el-menu-item.is-active {
  175. 					width: 1.4583rem;
  176. 					height: 0.3056rem;
  177. 					color: #FFFFFF;
  178. 					padding-left: 0.6944rem;
  179. 					// background: #B40024;
  180. 					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
  181. 					background-color: #D9221A;
  182. 					// background-position: 0.0694rem 0.0486rem;
  183. 				}
  184.  
  185. 				.el-menu-item:hover {
  186. 					// background: #B40024;
  187. 					background-color: #D9221A;
  188. 					color: #fff;
  189. 					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
  190. 					// background-position: 0.0694rem 0.0486rem;
  191. 				}
  192.  
  193. 				.el-submenu.is-active.is-opened {
  194. 					// background: #B40024;
  195. 					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
  196. 					// background-position: 0.0694rem 0.0486rem;
  197. 					background-color: #D9221A;
  198. 					color: #fff;
  199.  
  200. 					.el-menu-item.is-active {
  201. 						// background: #A20A1E;
  202. 						background-color: #D9221A;
  203. 						color: #fff;
  204. 					}
  205.  
  206. 					.el-menu-item:hover {
  207. 						// background: #A20A1E;
  208. 						background-color: #D9221A;
  209. 						color: #fff;
  210. 					}
  211. 				}
  212.  
  213. 				.el-submenu:hover {
  214. 					.el-menu-item:hover {
  215. 						// background: #A20A1E;
  216. 						background-color: #D9221A;
  217. 						color: #fff;
  218. 					}
  219. 				}
  220.  
  221. 				.el-submenu__title:hover {
  222. 					// background: #B40024;
  223. 					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
  224. 					// background-position: 0.0694rem 0.0486rem;
  225. 					background-color: #D9221A;
  226. 					color: #fff;
  227.  
  228. 					.el-menu-item:hover {
  229. 						// background: #A20A1E;
  230. 						background-color: #D9221A;
  231. 						color: #fff;
  232. 					}
  233. 				}
  234.  
  235. 				.el-submenu.is-opened:hover {
  236. 					// background: #B40024;
  237. 					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
  238. 					// background-position: 0.0694rem 0.0486rem;
  239. 					background-color: #D9221A;
  240. 					color: #fff;
  241.  
  242. 					.el-menu-item:hover {
  243. 						// background: #A20A1E;
  244. 						background-color: #D9221A;
  245. 					}
  246. 				}
  247.  
  248. 				.imgs1 {
  249. 					width: 0.1389rem;
  250. 					height: 0.1389rem;
  251. 					margin-right: 0.0347rem;
  252. 				}
  253.  
  254. 				.submenu {
  255. 					font-family: 'PingFang-Regular';
  256. 				}
  257. 			}
  258.  
  259. 			.list_one:last-child {
  260.  
  261. 				// border-bottom: 0.0069rem solid #870000;
  262. 				/deep/ .el-menu-item:last-child {
  263. 					// border-bottom: 0.0069rem solid #870000;
  264. 				}
  265. 			}
  266.  
  267. 			.list_two:last-child {
  268. 				// border-bottom: 0.0069rem solid #870000;
  269. 			}
  270. 		}
  271. 	}
  272. </style>

以上是封装的侧边栏组件，需要搭配js文件使用，格式如下：

（px to rem 比例是144 需要使用px可以转回来）

  1. // 导航栏信息
  2. // 一级导航index要与其子代(二级)导航第一个index相同
  3. // name: 菜单要显示的名字
  4. // index: 导航地址（router中的名字）
  5. // img: 图标名字（用class定义）
  6. // children: 迭代子代导航、参数如上
  7. // 教师端
  8. export const teacherList = {
  9. 	"list": [
  10.         {
  11.             "name": "健康测评",
  12.             "name_en": "teacherHome",
  13.             "router": "/teacherHome",
  14.             "icon_none": "shouyeIcon_255",
  15.             "icon_block": "shouyeIcon_255",
  16.             "status": '0',
  17.             "children": [],
  18.         },{
  19.             "name": "心理测评",
  20.             "name_en": "psychometrics",
  21.             "router": "/psychometrics",
  22.             "icon_none": "shouyeIcon_255",
  23.             "icon_block": "shouyeIcon_255",
  24.             "status": '0',
  25.             "children": [],
  26.         },{
  27.             "name": "教学资源",
  28.             "name_en": "teachResources",
  29.             "router": "/teachResources",
  30.             "icon_none": "shouyeIcon_255",
  31.             "icon_block": "shouyeIcon_255",
  32.             "status": '0',
  33.             "children": [],
  34.         },{
  35. 			"name": "在线研修",
  36. 			"name_en": "autonomouslyStudy",
  37. 			"router": "/autonomouslyStudy",
  38. 			"icon_none": "shouyeIcon_255",
  39. 			"icon_block": "shouyeIcon_255",
  40. 			"status": '0',
  41. 			"children": [
  42.                 {
  43.                     "name": "自主学习",
  44.                     "name_en": "autonomouslyStudy",
  45.                     "router": "/autonomouslyStudy",
  46.                     "icon_none": "shouyeIcon_255",
  47.                     "icon_block": "shouyeIcon_255",
  48.                     "status": '0',
  49.                     "children": [],
  50.                 },
  51.                 {
  52.                     "name": "教师调研",
  53.                     "name_en": "teacherResearch",
  54.                     "router": "/teacherResearch",
  55.                     "icon_none": "shouyeIcon_255",
  56.                     "icon_block": "shouyeIcon_255",
  57.                     "status": '0',
  58.                     "children": [],
  59.                 },
  60.                 {
  61.                     "name": "直播培训",
  62.                     "name_en": "liveTraining",
  63.                     "router": "/liveTraining",
  64.                     "icon_none": "shouyeIcon_255",
  65.                     "icon_block": "shouyeIcon_255",
  66.                     "status": '0',
  67.                     "children": [],
  68.                 },
  69.                 {
  70.                     "name": "在线阅读",
  71.                     "name_en": "onlineReading",
  72.                     "router": "/onlineReading",
  73.                     "icon_none": "shouyeIcon_255",
  74.                     "icon_block": "shouyeIcon_255",
  75.                     "status": '0',
  76.                     "children": [],
  77.                 },
  78.                 {
  79.                     "name": "课程研究",
  80.                     "name_en": "projectResearch",
  81.                     "router": "/projectResearch",
  82.                     "icon_none": "shouyeIcon_255",
  83.                     "icon_block": "shouyeIcon_255",
  84.                     "status": '0',
  85.                     "children": [],
  86.                 },
  87.                 {
  88.                     "name": "展示交流",
  89.                     "name_en": "displayCommunication",
  90.                     "router": "/displayCommunication",
  91.                     "icon_none": "shouyeIcon_255",
  92.                     "icon_block": "shouyeIcon_255",
  93.                     "status": '0',
  94.                     "children": [],
  95.                 },
  96.             ],
  97. 		},
  98. 	]
  99. }

Vue3 ====components===sidebar文件夹===sider.vue  sidebarItem.vue

sider.vue

  1. <script lang="ts" setup>
  2. // sidebarItem 项组件
  3. import SideBarItem from './sidebarItem.vue';
  4. import { useRouter } from 'vue-router';
  5. // 拿到路由列表，过滤我们不想要的
  6. const router = useRouter();
  7. const routerList = router.getRoutes().filter((v) => v.meta && v.meta.isShow);
  8. </script>
  9. <template>
  10.   <div class="sidebar">
  11.     <!-- 项目名称及logo -->
  12.     <div class="sidebar-logo flex-center">
  13.       <svg-icon icon-class="logo" />
  14.       <span>VitalityAdmin</span>
  15.     </div>
  16.  
  17.     <!-- 导航菜单 -->
  18.     <el-menu
  19.         active-text-color="#fff"
  20.         background-color="#001529"
  21.         :default-active="$route.path"
  22.         text-color="#999"
  23.         :unique-opened="true"
  24.         router>
  25.  
  26.       <!-- 引入子组件 -->
  27.       <SideBarItem :routerList="routerList" />
  28.     </el-menu>
  29.  
  30.     <!-- active-text-color：当前菜单项被选中时，字体的颜色 -->
  31.     <!-- background-color：这个menu菜单的背景色 -->
  32.     <!-- default-active：	当前激活菜单的 index -->
  33.     <!-- text-color：菜单项字体颜色 -->
  34.     <!-- unique-opened：unique-opened	是否只保持一个子菜单的展开 -->
  35.     <!-- router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
  36.   </div>
  37. </template>
  38. <style lang="scss" scoped>
  39. .sidebar {
  40.   height: 100%;
  41.   .sidebar-logo {
  42.     height: 48px;
  43.     background-color: #002140;
  44.     color: #fff;
  45.     font-weight: 700;
  46.     line-height: 48px;
  47.     text-align: center;
  48.     font-size: 20px;
  49.   }
  50.   .el-menu {
  51.     height: calc(100% - 48px);
  52.     border-right: 0;
  53.     overflow: auto;
  54.   }
  55. }
  56. </style>
  57.

sidebarItem.vue

  1. <script setup lang="ts">
  2. import { RouteRecordRaw } from 'vue-router';
  3. // 做类型限制，解决ts类型报错
  4. type CustomRouteRecordRaw = RouteRecordRaw & {
  5.   meta: {
  6.     isShow?: boolean;
  7.   };
  8. };
  9. const props = defineProps({
  10.   // 拿到父组件传递过来的路由列表进行渲染
  11.   routerList: {
  12.     type: Array as () => CustomRouteRecordRaw[],
  13.     required: true
  14.   }
  15. });
  16. </script>
  17. <template>
  18.   <template v-for="item in props.routerList" :key="item.path">
  19.     <!-- 当该菜单项有子菜单时 -->
  20.     <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 0">
  21.       <template #title v-if="item.meta.icon">
  22.         <!-- 菜单项图标，我此处用的是全局封装的 svg组件 -->
  23.         <el-icon><svg-icon :icon-class="item.meta.icon" /></el-icon>
  24.         <!-- 菜单项名称，在路由中定义好 -->
  25.         <span>{{ item.meta.title }}</span>
  26.       </template>
  27.       <!-- 若路由中未定义菜单项icon，则仅展示名称--（我的仅一级菜单有图标） -->
  28.       <template #title v-else>{{ item.meta.title }}</template>
  29.  
  30.       <!-- 递归遍历-自己调用自己（核心代码） -->
  31.       <sidebarItem :routerList="( item.children as CustomRouteRecordRaw[])" />
  32.     </el-sub-menu>
  33.  
  34.     <!-- 当前菜单项无子菜单 -->
  35.     <el-menu-item :index="item.path" v-else>
  36.       <!-- 与上面注释大致相同，不多做额外注释 -->
  37.       <template v-if="item.meta.icon">
  38.         <el-icon><svg-icon :icon-class="item.meta.icon" /></el-icon>
  39.         <span>{{ item.meta.title }}</span>
  40.       </template>
  41.       <template v-else>
  42.         {{ item.meta.title }}
  43.       </template>
  44.     </el-menu-item>
  45.   </template>
  46. </template>
  47.  
  48. <style scoped lang="scss">
  49. .is-active {
  50.   background: #409eff;
  51.   font-weight: 700;
  52. }
  53.  
  54. .el-menu-item {
  55.   &:hover {
  56.     color: #fff;
  57.     font-weight: 700;
  58.   }
  59. }
  60.  
  61. .el-menu--collapse {
  62.   .el-menu-item {
  63.     justify-content: center;
  64.   }
  65. }
  66.  
  67. // 下列代码是用于兼容horizontal所写，酌情删或留
  68. .el-menu--horizontal {
  69.   .el-menu-item.is-active {
  70.     background-color: transparent !important;
  71.     border-bottom: 2px solid #409eff !important;
  72.  
  73.     .el-icon,
  74.     span {
  75.       color: #409eff !important;
  76.     }
  77.   }
  78.  
  79.   .el-sub-menu.is-active {
  80.     .el-sub-menu__title {
  81.       border: 0 !important;
  82.     }
  83.  
  84.     .el-icon,
  85.     span {
  86.       color: #409eff !important;
  87.     }
  88.   }
  89. }
  90. </style>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号