【无标题】vue封装侧边栏

已于 2024-04-09 16:00:57 修改
阅读量417 收藏 1
点赞数
文章标签： javascript 前端
于 2023-05-31 16:44:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60924822/article/details/130972327
版权

Vue2

<!-- 左侧导航组件 -->
<!-- 使用说明：<side-bar></side-bar> -->
<template>
	<div class="sidebar_wrap">
		<!-- <div class="wrap_title">
      <img src="@/assets/images/logo.png" alt />
      <div>张家湾数字管理平台</div>
    </div> -->
		<div class="wrap_catalog">
			<el-menu :default-active="'/'+NavActive" :unique-opened="isUnique" :router="isRouter" mode="vertical"
				ref="menu">
				<!-- 一级菜单 -->
				<template v-for="(item,index) in navData">
					<el-submenu v-if="item.children && item.children.length" :index="item.router" :key="index"
						ref="elMenu" class="list_one" @open="open">
						<template slot="title">
							<div @click="clickStatus($event,item)">
								<img :src="require('../assets/images/'  +item.icon_none + '.png')" class="imgs1"
									v-if="item.status === '0'" />
								<span>{{item.name}}</span>
							</div>
						</template>
						<!-- 二级菜单 -->
						<template v-for="itemChild in item.children">
							<el-menu-item :index="itemChild.router" :key="itemChild.router">
								<span slot="title" class='submenu'>{{itemChild.name}}</span>
							</el-menu-item>
						</template>
					</el-submenu>
					<el-menu-item v-else :index="item.router" :key="item.router" @open="open" ref="elMenu"
						class="list_two">
						<div @click="clickStatus($event,item)">
							<img :src="require('../assets/images/'  +item.icon_none + '.png')" class="imgs1"
								v-if="item.status === '0'" />
							<span slot="title">{{item.name}}</span>

						</div>
					</el-menu-item>
				</template>
			</el-menu>
		</div>

	</div>
</template>
<script>
	import {studentsList} from "../assets/js/studentsList";
	import {parentList} from '../assets/js/parentList'
	import {teacherList} from '../assets/js/teacherList'
	export default {
		name: "sidebar",
		data() {
			return {
				isUnique: true,
				isRouter: true,
				navData: [],
				NavActive: "",
			};
		},
		beforeMount() {
			this.getActiveNav();
		},
		watch: {
			//监听路由变化
			$route(index) {
				// console.log('sideBarRouter',index)
				let path = index.path.substr(1);
				this.handleSelect(path);
			},
		},
		created() {
			// this.navData = JSON.parse(localStorage.menus);
		},
		mounted() {
			let userVal = sessionStorage.getItem("userVal");
			if(userVal==0){
				this.navData = studentsList.list;
				this.$router.push({path:'/studentHome'})
			}else if(userVal==1){
				this.navData = parentList.list;
				this.$router.push({path:'/parentHome'})
			}else if(userVal==2){
				this.navData = teacherList.list
				this.$router.push({path:'/teacherHome'})
			}
			// console.log(sessionStorage.getItem("isGarden") === "0");
			// console.log(sessionStorage.getItem("isGarden") === "1");
			// // isGarden === 0 为园区端；isGarden === 1 为企业端
			// if (sessionStorage.getItem("isGarden") === "0") {
			// 	this.navData = navDataList.list;
			// } else if (sessionStorage.getItem("isGarden") === "1") {
			// 	this.navData = navdataa.list;
			// }
		},
		methods: {
			getActiveNav() {
				let currentUrl = window.location.href;
				this.NavActive = currentUrl.split("/").pop();
			},
			//监听路由的变化，对应菜单高亮显示
			handleSelect(index) {
				this.NavActive = index;
			},
			clickStatus(e, item) {
				// console.log(e,item)
				// console.log(this.$refs.elMenu)
				// this.$refs.elMenu.map((item1) => {
				//   console.log(item1.$el)
				//   // if(item1.active === false){

				//   // }
				// })
			},
			open() {
				console.log("1");
			},
		},
	};
</script>
<style scoped lang="less">
	.sidebar_wrap {
		width: 1.4583rem;
		height: 100%;
		// background: #870000;
		background: #fff;
		overflow-y: auto;
		overflow-x: hidden;

		.wrap_title {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 0.1111rem;
			color: #fff;
			height: 0.5556rem;

			img {
				width: 0.2778rem;
				height: 0.1528rem;
				margin-right: 0.0764rem;
			}
		}

		.wrap_catalog {
			/deep/ .el-menu {
				border-right: none;
				// background-color: #870000;
				background-color: #fff;
				width: 1.4583rem;

				li {
					padding: 0 !important;
				}

				.el-menu-item {
					height: 0.3056rem;
					line-height: 0.3056rem;
					font-size: 0.1111rem;
					color: #0E151E;
					// border-bottom: 0.0069rem solid #a43d3d;
				}

				.el-submenu__title {
					height: 0.3056rem;
					line-height: 0.3056rem;
					font-size: 0.1111rem;
					// color: #0E151E;
					// border-bottom: 0.0069rem solid #a43d3d;
				}

				.el-submenu__icon-arrow {
					display: none;
				}

				.el-menu-item.is-active {
					width: 1.4583rem;
					height: 0.3056rem;
					color: #FFFFFF;
					padding-left: 0.6944rem;
					// background: #B40024;
					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
					background-color: #D9221A;
					// background-position: 0.0694rem 0.0486rem;
				}

				.el-menu-item:hover {
					// background: #B40024;
					background-color: #D9221A;
					color: #fff;
					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
					// background-position: 0.0694rem 0.0486rem;
				}

				.el-submenu.is-active.is-opened {
					// background: #B40024;
					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
					// background-position: 0.0694rem 0.0486rem;
					background-color: #D9221A;
					color: #fff;

					.el-menu-item.is-active {
						// background: #A20A1E;
						background-color: #D9221A;
						color: #fff;
					}

					.el-menu-item:hover {
						// background: #A20A1E;
						background-color: #D9221A;
						color: #fff;
					}
				}

				.el-submenu:hover {
					.el-menu-item:hover {
						// background: #A20A1E;
						background-color: #D9221A;
						color: #fff;
					}
				}

				.el-submenu__title:hover {
					// background: #B40024;
					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
					// background-position: 0.0694rem 0.0486rem;
					background-color: #D9221A;
					color: #fff;

					.el-menu-item:hover {
						// background: #A20A1E;
						background-color: #D9221A;
						color: #fff;
					}
				}

				.el-submenu.is-opened:hover {
					// background: #B40024;
					// background: url("../assets/new_images/xuanzhong.png") no-repeat;
					// background-position: 0.0694rem 0.0486rem;
					background-color: #D9221A;
					color: #fff;

					.el-menu-item:hover {
						// background: #A20A1E;
						background-color: #D9221A;
					}
				}

				.imgs1 {
					width: 0.1389rem;
					height: 0.1389rem;
					margin-right: 0.0347rem;
				}

				.submenu {
					font-family: 'PingFang-Regular';
				}
			}

			.list_one:last-child {

				// border-bottom: 0.0069rem solid #870000;
				/deep/ .el-menu-item:last-child {
					// border-bottom: 0.0069rem solid #870000;
				}
			}

			.list_two:last-child {
				// border-bottom: 0.0069rem solid #870000;
			}
		}
	}
</style>

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

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

// 导航栏信息
// 一级导航index要与其子代(二级)导航第一个index相同
// name: 菜单要显示的名字
// index: 导航地址（router中的名字）
// img: 图标名字（用class定义）
// children: 迭代子代导航、参数如上
// 教师端
export const teacherList = {
	"list": [
        {
            "name": "健康测评",
            "name_en": "teacherHome",
            "router": "/teacherHome",
            "icon_none": "shouyeIcon_255",
            "icon_block": "shouyeIcon_255",
            "status": '0',
            "children": [],
        },{
            "name": "心理测评",
            "name_en": "psychometrics",
            "router": "/psychometrics",
            "icon_none": "shouyeIcon_255",
            "icon_block": "shouyeIcon_255",
            "status": '0',
            "children": [],
        },{
            "name": "教学资源",
            "name_en": "teachResources",
            "router": "/teachResources",
            "icon_none": "shouyeIcon_255",
            "icon_block": "shouyeIcon_255",
            "status": '0',
            "children": [],
        },{
			"name": "在线研修",
			"name_en": "autonomouslyStudy",
			"router": "/autonomouslyStudy",
			"icon_none": "shouyeIcon_255",
			"icon_block": "shouyeIcon_255",
			"status": '0',
			"children": [
                {
                    "name": "自主学习",
                    "name_en": "autonomouslyStudy",
                    "router": "/autonomouslyStudy",
                    "icon_none": "shouyeIcon_255",
                    "icon_block": "shouyeIcon_255",
                    "status": '0',
                    "children": [],
                },
                {
                    "name": "教师调研",
                    "name_en": "teacherResearch",
                    "router": "/teacherResearch",
                    "icon_none": "shouyeIcon_255",
                    "icon_block": "shouyeIcon_255",
                    "status": '0',
                    "children": [],
                },
                {
                    "name": "直播培训",
                    "name_en": "liveTraining",
                    "router": "/liveTraining",
                    "icon_none": "shouyeIcon_255",
                    "icon_block": "shouyeIcon_255",
                    "status": '0',
                    "children": [],
                },
                {
                    "name": "在线阅读",
                    "name_en": "onlineReading",
                    "router": "/onlineReading",
                    "icon_none": "shouyeIcon_255",
                    "icon_block": "shouyeIcon_255",
                    "status": '0',
                    "children": [],
                },
                {
                    "name": "课程研究",
                    "name_en": "projectResearch",
                    "router": "/projectResearch",
                    "icon_none": "shouyeIcon_255",
                    "icon_block": "shouyeIcon_255",
                    "status": '0',
                    "children": [],
                },
                {
                    "name": "展示交流",
                    "name_en": "displayCommunication",
                    "router": "/displayCommunication",
                    "icon_none": "shouyeIcon_255",
                    "icon_block": "shouyeIcon_255",
                    "status": '0',
                    "children": [],
                },
            ],
		},
	]
}

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

sider.vue

<script lang="ts" setup>
// sidebarItem 项组件
import SideBarItem from './sidebarItem.vue';
import { useRouter } from 'vue-router';
// 拿到路由列表，过滤我们不想要的
const router = useRouter();
const routerList = router.getRoutes().filter((v) => v.meta && v.meta.isShow);
</script>
<template>
  <div class="sidebar">
    <!-- 项目名称及logo -->
    <div class="sidebar-logo flex-center">
      <svg-icon icon-class="logo" />
      <span>VitalityAdmin</span>
    </div>

    <!-- 导航菜单 -->
    <el-menu
        active-text-color="#fff"
        background-color="#001529"
        :default-active="$route.path"
        text-color="#999"
        :unique-opened="true"
        router>

      <!-- 引入子组件 -->
      <SideBarItem :routerList="routerList" />
    </el-menu>

    <!-- active-text-color：当前菜单项被选中时，字体的颜色 -->
    <!-- background-color：这个menu菜单的背景色 -->
    <!-- default-active：	当前激活菜单的 index -->
    <!-- text-color：菜单项字体颜色 -->
    <!-- unique-opened：unique-opened	是否只保持一个子菜单的展开 -->
    <!-- router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
  </div>
</template>
<style lang="scss" scoped>
.sidebar {
  height: 100%;
  .sidebar-logo {
    height: 48px;
    background-color: #002140;
    color: #fff;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
    font-size: 20px;
  }
  .el-menu {
    height: calc(100% - 48px);
    border-right: 0;
    overflow: auto;
  }
}
</style>

sidebarItem.vue

<script setup lang="ts">
import { RouteRecordRaw } from 'vue-router';
// 做类型限制，解决ts类型报错
type CustomRouteRecordRaw = RouteRecordRaw & {
  meta: {
    isShow?: boolean;
  };
};
const props = defineProps({
  // 拿到父组件传递过来的路由列表进行渲染
  routerList: {
    type: Array as () => CustomRouteRecordRaw[],
    required: true
  }
});
</script>
<template>
  <template v-for="item in props.routerList" :key="item.path">
    <!-- 当该菜单项有子菜单时 -->
    <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 0">
      <template #title v-if="item.meta.icon">
        <!-- 菜单项图标，我此处用的是全局封装的 svg组件 -->
        <el-icon><svg-icon :icon-class="item.meta.icon" /></el-icon>
        <!-- 菜单项名称，在路由中定义好 -->
        <span>{{ item.meta.title }}</span>
      </template>
      <!-- 若路由中未定义菜单项icon，则仅展示名称--（我的仅一级菜单有图标） -->
      <template #title v-else>{{ item.meta.title }}</template>

      <!-- 递归遍历-自己调用自己（核心代码） -->
      <sidebarItem :routerList="( item.children as CustomRouteRecordRaw[])" />
    </el-sub-menu>

    <!-- 当前菜单项无子菜单 -->
    <el-menu-item :index="item.path" v-else>
      <!-- 与上面注释大致相同，不多做额外注释 -->
      <template v-if="item.meta.icon">
        <el-icon><svg-icon :icon-class="item.meta.icon" /></el-icon>
        <span>{{ item.meta.title }}</span>
      </template>
      <template v-else>
        {{ item.meta.title }}
      </template>
    </el-menu-item>
  </template>
</template>

<style scoped lang="scss">
.is-active {
  background: #409eff;
  font-weight: 700;
}

.el-menu-item {
  &:hover {
    color: #fff;
    font-weight: 700;
  }
}

.el-menu--collapse {
  .el-menu-item {
    justify-content: center;
  }
}

// 下列代码是用于兼容horizontal所写，酌情删或留
.el-menu--horizontal {
  .el-menu-item.is-active {
    background-color: transparent !important;
    border-bottom: 2px solid #409eff !important;

    .el-icon,
    span {
      color: #409eff !important;
    }
  }

  .el-sub-menu.is-active {
    .el-sub-menu__title {
      border: 0 !important;
    }

    .el-icon,
    span {
      color: #409eff !important;
    }
  }
}
</style>

波澜之间
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2左侧菜单栏收缩展开功能
5年编程经验的老猿。
04-28 574
vue2左侧菜单栏收缩展开目前是非常常见的，我们在日常开发过程中经常会碰到。这一小节我们就详细了解一下这个功能，完善我们的项目开发。 首先，修改Main.vue页面中的一些属性，有些属性需要动态绑定。接下来我们来一步一步实现。
vue实现侧边栏导航效果
01-19
本文实例为大家分享了vue侧边栏导航的具体代码，供大家参考，具体内容如下 最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 引入路由 3.在components中新建组件 3.1 agencySearch.vue组件 代码： 直属下线代理查询 </
前端Vue自定义精美商品分类列表组件 侧边栏商品分类组件 category组件 左边分类category 右边列表List
chenchuang0128的博客
07-10 1426
标题：前端组件化开发之自定义精美商品分类列表组件一、引言随着前端技术的迅速发展和应用需求的不断增长，传统的开发方式已经难以满足现代复杂业务场景的需求。为了提高开发效率和降低维护成本，组件化开发已成为构建复杂前端应用的必要手段。通过组件化开发，我们可以将一个系统拆分为一系列可重复使用的独立组件，实现单独开发、单独维护，并且可以随意组合，大大提高了开发效率和灵活性。在各种复杂的业务场景中，商品分类列表是一个常见的需求，尤其在电商平台上更为重要。
五分钟完成侧边栏组件
weixin_45311714的博客
09-11 1247
【代码】五分钟完成侧边栏组件。附上完整的侧边栏vue.js代码
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
热门推荐
weixin_52268321的博客
02-26 1万+
3分钟学会搭建动态侧边栏导航：Vue + Element-UI
vue-sidebar-menu:Vue.js侧边栏菜单组件
05-12
Vue侧边栏菜单 Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2，对于Vue 3，您可以尝试预发行版，请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue-sidebar-menu' import 'vue-sidebar-menu/dist/vue-sidebar-menu.css' Vue . use ( VueSidebarMenu ) 或在本地导入组件。 //App.vue import { SidebarMenu } from 'vue-sidebar-menu' export default { components : { SidebarMenu } } 基本用法 < temp
vue多级侧边栏封装
qq_50792015的博客
06-09 500
vue递归封装多级侧边栏
vue简单侧边栏封装+模拟侧边栏标签淡入淡出
weixin_43939111的博客
01-09 355
点击标签跳转到对应页面，当然用router-link和router-view可以实现。这里用其他方法来模拟侧边导航栏点击后淡入淡出。
Vue-后台管理项目001---侧边栏
初遇我ㄖ寸の热情呢？
05-28 1955
将这个真实的服务返回的数据赋值给res。// 跳转到login。// 清空token。
【实现】Vue主页侧边栏
丑小鸭
01-08 6903
效果展示 使用技术 Vue+Element UI 代码部分 1 整体布局 整体布局源于Element UI 中给的样例，点击进入 基础框架代码 <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-ma
基于Vue实现的侧边栏导航组件
04-14
基于Vue实现的侧边栏导航组件,左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具有动画居中效果,可以滑动右侧区域来切换导航,滑动到屏幕底部时自动切换到下个导航,相反滑动到顶部切换上一屏,效果展示: ...
ios-左侧边栏侧滑封装.zip
07-11
自己动手封装了一个简单的左侧滑框架,现分享出来共有同样需求的朋友使用. 你需要做的是将VVSliderController文件夹导入项目中 (注:demo只是对左侧滑功能的展示简单添加了背景色并没有实现界面布局),好了先上demo效果~~ GitHub: https://github.com/Will-whp/CeHua-Demo 简书: http://www.jianshu.com/p/0f5250b090f4
vue侧边栏动态生成下级菜单的方法
10-18
今天小编就为大家分享一篇vue侧边栏动态生成下级菜单的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue简单的侧边栏
浅影歌年的博客
08-17 1018
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <style type="text/css"> *{ paddi
【vue组件封装】根据页面滚动高亮显示目录的侧边栏
CC酱写前端的博客
08-05 470
侧边栏随着文档位置移动高亮亮
vue 自定义侧边栏组件
qq_43787947的博客
11-11 1431
<template> <div :class="[cusClass]"> <Affix :offset-top="0" :use-capture="true"> <Card class="category mr_10" :bordered="false" dis-hover :padding="0"> <!-- <RadioGroup v-model="vertical" v-for="(item, in.
Vue学习记录09--侧边栏
AMWICD的博客
04-13 2303
因为所有的界面都要用到，所以可以用components文件夹放公共组件 <template> <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"> <el-submenu index="1"> <template slot
vue侧边栏组件_Vue.js侧边栏菜单组件
cuk5239的博客
07-28 4659
vue侧边栏组件 边栏菜单 (vue-sidebar-menu) A Vue.js Sidebar Menu Component. Vue.js侧栏菜单组件。 View demo 查看演示 Download Source 下载源 安装 (Installation) npm i vue-sidebar-menu --save 用法 (Usage) import Vue from 'vue'...
vue3侧边栏封装菜单栏
最新发布
09-16
对于Vue 3的侧边栏封装菜单栏，你可以按照以下步骤进行： 步骤1：创建侧边栏组件 首先，创建一个名为SidebarMenu的Vue组件，在该组件中，可以定义侧边栏的样式、菜单项等。 ```vue (item)"> {{ item.text }...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值