vue实现侧边折叠菜单栏手风琴效果

最新推荐文章于 2023-08-26 00:33:31 发布
最新推荐文章于 2023-08-26 00:33:31 发布
阅读量3.5k 收藏 31
点赞数 4
分类专栏： # vue.js 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44803753/article/details/113545405
版权

在我们做管理后台亦或是产品流程时，总是需要一个菜单栏或者导航栏来架起我们的产品架构，那么，如何用vue实现侧边折叠导航栏呢？接下来将一一介绍。

                                       请先看效果演示图。


步骤1：先架构整个页面的布局，撰写html、css和js
HTML代码

<template>
	<div id="main">
		<div class="content">
			<!-- 左边导航栏 -->
			<div class="admin_nav col-lg-3 col-xl-2" v-show="fullWidth">
				<div class = "admin_nav_site">
					<div class="title">
						数据中心后台管理
					</div>
					<ul v-for="(item,index) in navList" :key="index">
						<li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)"
						 ref="title" :class="{active:currentSort == index}" class="col-lg-12">
							<div class="left_icon">
								<i :class="'iconfont '+item.className"></i>
							</div>
							<div class="middle">
								{{item.title}}
							</div>
							<div class="right_icon">
								<i :class="'iconfont '+item.close"></i>
							</div>
						</li>
						<li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1">
							<router-link :to="it.path" tag="a">{{it.name}}</router-link>
						</li>
					</ul>
				</div>
				
			</div>
			<!-- 右边内容 -->
			<div class="admin_content col-12 col-md-12 col-lg-12 col-xl-10">
				<div class="admin_header">
					<!-- 导航图标 -->
					<div class="H5_item" v-show="!fullWidth">
						<i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i>
					</div>
					<div class="user">
						<div class="userHead">
							<span>
								<img src="../../assets/image/userhead.svg">
							</span>
							<span>admin</span>
						</div>
						<div class="logOut">
							<i class="iconfont icon-tuichu"></i>
						</div>
					</div>
				</div>
				<div class="admin_body">
					<keep-alive>
						<router-view />
					</keep-alive>
				</div>
			</div>
			
		</div>


	</div>
</template>

JS代码

<script>
	import axios from 'axios';

	export default {
		name: 'navigation',
		data() {
			return {
				navList: [{
						title: '用户管理',
						isSubShow: false,
						className: 'icon-guanliyuan1',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [
							{
							name: '工号管理',
							path: '/home/navigation-one/user'
							}, 
							// {
							// name: '角色管理',
							// path: '/home/navigation-one/role'
							// }, 
							// {
							// name: '权限管理',
							// path: '/home/navigation-one/user'
							// }, 
						]


					},
					{
						title: '资源管理',
						isSubShow: false,
						className: 'icon-ziyuan',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [
							{
								name: '我的收藏',
								path: '/home/navigation-one/user'
							},
							{
								name: '我的项目',
								path: '/home/navigation-one/role'
							}
						]

					},
					{
						title: '综合管理',
						isSubShow: false,
						className: 'icon-zonghe',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [{
								name: '划配管理',
								path: '/home/navigation-one/user'
							},
							{
								name: '数据信息',
								path: '/home/navigation-one/role'
							}
						]

					},
					{
						title: '系统消息',
						isSubShow: false,
						className: 'icon-xiaoxi',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [{
								name: '实时动态',
								path: '/home/navigation-one/user'
							},
							{
								name: '过去动态',
								path: '/home/navigation-one/role'
							}
						]
					}
				],
				currentSort: 0,
				pagetype: "index",
				fullWidth: true,
				dismenu: true
			}
		},
		methods: {
			active(index) {
				this.currentSort = index;
			},
			changeTitleColor(index) {
				this.currentSort = index;
			},
			removeTitleColor(index) {
				this.currentSort = null;
			},
			handleToTitle(ind, item) {
				this.navList[ind].isSubShow = !this.navList[ind].isSubShow;
				if (this.navList[ind].isSubShow == true) {
					this.navList[ind].close = 'icon-zhedie';
				} else {
					this.navList[ind].close = 'icon-close';
				}
			}
		}

	}
</script>

CSS代码

    #main {
		background: #F0F6FF;
		font-size: 0.16rem;
	}

	#main .content {
		display: flex;
		flex-direction: row;
	}

	.content .admin_nav {
		min-height: 9.37rem;
		max-height: 1.3rem;
		padding: 0 !important;
		background: #364150;
		position: relative;
		
	}
	
	.content .admin_nav .admin_nav_site{
		height: 100vh;
	}

	.content .admin_nav .title {
		height: 1.39rem;
		line-height: 1.39rem;
		background: rgba(63, 73, 86, 1);
		color: #FFFFFF;
		text-align: center;
		font-size: 0.18rem;
		display: flex;
		justify-content: center;
	}

	.content .admin_nav .title div {
		padding: 0 0.03rem;
	}

	.content .admin_nav .title div:first-child i {
		font-size: 0.18rem;
	}

	.content .admin_nav ul .active {
		background: rgba(68, 81, 99, 1);
	}

	.content .admin_nav ul .active1 a.router-link-active {
		color: #fff;
	}

	.content .admin_nav ul li {
		height: 0.6rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 0.18rem;
	}

	.content .admin_nav ul li a {
		color: #cecdc5;
		cursor: pointer;
	}

	.content .admin_nav ul li:first-child {
		font-size: 0.2rem;
		height: 0.64rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #BEC5C0;
		cursor: pointer;
	}

	.content .admin_nav ul li:first-child div {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #BEC5C0;
	}

	.content .admin_nav ul li:first-child .left_icon {
		width: 22%;
	}

	.content .admin_nav ul li:first-child .left_icon i {
		color: #1296DB;
	}

	.content .admin_nav ul li:first-child .middle {
		width: 56%;
		display: flex;
		justify-content: flex-start;
	}

	.content .admin_nav ul li:first-child .right_icon {
		width: 22%;
	}

	.admin_nav .admin .middle:hover {
		color: #fff;
	}

	.admin_nav .admin .right_icon i:hover {
		color: #fff;
	}

	.admin_nav .admin .middle.router-link-active {
		color: #fff;
	}

	.content .admin_nav_position {
		position: absolute;
		z-index: 3000;
	}

	.content .admin_content {
		padding: 0 !important;
	}

	.content .admin_content .admin_header {
		width: 100%;
		height: 0.6rem;
		background: #364150;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.content .admin_content .admin_header .H5_item {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 0.2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 0.2rem;
	}

	.content .admin_content .admin_header .H5_item i {
		font-size: 0.22rem;
		color: #fff;
	}

	.content .admin_content .admin_header .user {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.content .admin_content .admin_header .user .userHead {
		height: 0.6rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
		font-size: 0.18rem;
	}

	.content .admin_content .admin_header .user .userHead span {
		padding: 0 0.05rem;
	}

	.content .admin_content .admin_header .user .userHead span:nth-child(1) {
		position: relative;
	}

	.content .admin_content .admin_header .user .userHead span img {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
	}

	.content .admin_content .admin_header .user .userHead span input {
		width: 0.4rem;
		height: 0.4rem;
		position: absolute;
		overflow: hidden;
		opacity: 0;
		cursor: pointer;
	}

	.content .admin_content .admin_header .user .logOut {
		color: #fff;
		margin-left: 0.12rem;
		margin-right: 0.5rem;
	}

	.content .admin_content .admin_header .user .logOut i {
		color: #1296DB;
		font-size: 0.24rem;
		cursor: pointer;
	}

	.toggle-cart-enter-active {
		transition: all 0.4s linear;
	}

	.toggle-cart-leave-active {
		transition: all 0.4s linear;
	}

	.toggle-cart-enter {
		transform: translateX(-200%);
	}

	.toggle-cart-leave-active {
		transform: translateX(-200%);
	}

 

步骤2：撰写完基本网页布局和样式后，对部分细节进行剖析。

1、动态绑定路径

<router-link :to="it.path" tag="a">{{it.name}}</router-link>

2、一级菜单，标题及折叠符号

①通过@mouseenter和@mouseleave事件，当鼠标移入和移出时，改变标题区域背景颜色

②通过@click事件，当鼠标点击时，显示二级菜单列表

③利用:class动态绑定类名，触发active方法，修改折叠符号状态；绑定图标类名，通过遍历，修改对应图标

<ul v-for="(item,index) in navList" :key="index">
	<li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)" ref="title" :class="{active:currentSort == index}" class="col-lg-12">
	    <div class="left_icon">
		    <i :class="'iconfont '+item.className"></i>
	    </div>
	    <div class="middle">
		    {{item.title}}
	    </div>
	    <div class="right_icon">
		    <i :class="'iconfont '+item.close"></i>
	    </div>
	</li>
	<li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1">
		<router-link :to="it.path" tag="a">{{it.name}}</router-link>
	</li>
</ul>
active(index) {
	this.currentSort = index;
},

changeTitleColor(index) {
	this.currentSort = index;
},

removeTitleColor(index) {
	this.currentSort = null;
},

handleToTitle(ind, item) {
	this.navList[ind].isSubShow = !this.navList[ind].isSubShow;
	if (this.navList[ind].isSubShow == true) {
		this.navList[ind].close = 'icon-zhedie';
	} else {
		this.navList[ind].close = 'icon-close';
	}
}

步骤3：菜单栏完成后，在网页端能进行查看，但是还需做一个手机端适配，这样就达到两端同步适应的效果。实现如下：

①对左边导航栏再撰写第二套代码，并绑定好对应的参数实现显示和隐藏

②运用vue已有的transition，绑定name值，实现动画效果绑定

HTML代码

<!-- 移动端导航栏 -->
<transition name="toggle-cart">
	<div class="admin_nav admin_nav_position col-8 col-md-5 col-lg-3 col-xl-3" v-show="!fullWidth&&!dismenu">
		<div class="title">
			<div v-show="!fullWidth">
				<i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i>
			</div>
			<div>数据中心后台管理</div>
		</div>
		<ul v-for="(item,index) in navList" :key="index">
			<li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)" ref="title" :class="{active:currentSort == index}">
				<div class="left_icon">
					<i :class="'iconfont '+item.className"></i>
				</div>
				<div class="middle">
					{{item.title}}
				</div>
				<div class="right_icon">
					<i :class="'iconfont '+item.close"></i>
				</div>
			</li>
			<li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1">
				<router-link :to="it.path" tag="a">{{it.name}}</router-link>
			</li>
		</ul>
	</div>
</transition>

JS代码

mounted() {
	window.onresize = () => { //监听屏幕变化
		this.page_width();
	};
	this.page_width();
}，
methods: {
	make_menu() { //点击导航图标
		this.dismenu = !this.dismenu;
	},
	page_width() { //获取屏幕宽度
		var screenWidth = window.screen.width;
		if (screenWidth <= 1024) {
			this.fullWidth = false;
		} else {
			this.fullWidth = true;
		}
	}
}

最后来看下手机端效果：

附上全文代码：

<template>
	<div id="main">
		<div class="content">
			<!-- 左边导航栏 -->
			<div class="admin_nav col-lg-3 col-xl-2" v-show="fullWidth">
				<div class = "admin_nav_site">
					<div class="title">
						数据中心后台管理
					</div>
					<ul v-for="(item,index) in navList" :key="index">
						<li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)" 		
						ref="title" :class="{active:currentSort == index}" class="col-lg-12">
							<div class="left_icon">
								<i :class="'iconfont '+item.className"></i>
							</div>
							<div class="middle">
								{{item.title}}
							</div>
							<div class="right_icon">
								<i :class="'iconfont '+item.close"></i>
							</div>
						</li>
						<li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1">
							<router-link :to="it.path" tag="a">{{it.name}}</router-link>
						</li>
					</ul>
				</div>
				
				<!-- 管理员端 -->
				<!-- <ul class="admin">
					<li class="col-lg-12">
						<div class="left_icon">
							<i class="iconfont icon-guanliyuan1"></i>
						</div>
						<router-link to="/admin/administrator/secadmin" tag="div" class="middle">管理员端</router-link>
						<div class="right_icon">
							<i class="iconfont icon-jinru"></i>
						</div>
					</li>
				</ul> -->
			</div>
			<!-- 右边内容 -->
			<div class="admin_content col-12 col-md-12 col-lg-12 col-xl-10">
				<div class="admin_header">
					<!-- 导航图标 -->
					<div class="H5_item" v-show="!fullWidth">
						<i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i>
					</div>
					<div class="user">
						<div class="userHead">
							<span>
								<img src="../../assets/image/userhead.svg">
							</span>
							<span>admin</span>
						</div>
						<div class="logOut">
							<i class="iconfont icon-tuichu"></i>
						</div>
					</div>
				</div>
				<div class="admin_body">
					<keep-alive>
						<router-view />
					</keep-alive>
				</div>
			</div>
			<!-- 移动端导航栏 -->
			<transition name="toggle-cart">
				<div class="admin_nav admin_nav_position col-8 col-md-5 col-lg-3 col-xl-3" v-show="!fullWidth&&!dismenu">
					<div class="title">
						<div v-show="!fullWidth">
							<i class="iconfont icon-daohanglan" @click="make_menu" class-name="H5-menu"></i>
						</div>
						<div>数据中心后台管理</div>
					</div>
					<ul v-for="(item,index) in navList" :key="index">
						<li @click="handleToTitle(index,item)" @mouseenter="changeTitleColor(index)" @mouseleave="removeTitleColor(index)"
						 ref="title" :class="{active:currentSort == index}">
							<div class="left_icon">
								<i :class="'iconfont '+item.className"></i>
							</div>
							<div class="middle">
								{{item.title}}
							</div>
							<div class="right_icon">
								<i :class="'iconfont '+item.close"></i>
							</div>
						</li>
						<li v-for="(it,idx) in item.secMenu" :key="idx" v-show="item.isSubShow" class="active1">
							<router-link :to="it.path" tag="a">{{it.name}}</router-link>
						</li>
					</ul>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';

	export default {
		name: 'navigation-1',
		data() {
			return {
				token: '',
				navList: [{
						title: '用户管理',
						isSubShow: false,
						className: 'icon-guanliyuan1',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [
							{
							name: '工号管理',
							path: '/home/navigation-one/user'
							}, 
							// {
							// name: '角色管理',
							// path: '/home/navigation-one/role'
							// }, 
							// {
							// name: '权限管理',
							// path: '/home/navigation-one/user'
							// }, 
						]


					},
					{
						title: '资源管理',
						isSubShow: false,
						className: 'icon-ziyuan',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [
							{
								name: '我的收藏',
								path: '/home/navigation-one/user'
							},
							{
								name: '我的项目',
								path: '/home/navigation-one/role'
							}
						]

					},
					{
						title: '综合管理',
						isSubShow: false,
						className: 'icon-zonghe',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [{
								name: '划配管理',
								path: '/home/navigation-one/user'
							},
							{
								name: '数据信息',
								path: '/home/navigation-one/role'
							}
						]

					},
					{
						title: '系统消息',
						isSubShow: false,
						className: 'icon-xiaoxi',
						close: 'icon-close',
						up: 'icon-zhedie',
						secMenu: [{
								name: '实时动态',
								path: '/home/navigation-one/user'
							},
							{
								name: '过去动态',
								path: '/home/navigation-one/role'
							}
						]
					}
				],
				currentSort: 0,
				pagetype: "index",
				fullWidth: true,
				dismenu: true
			}
		},
		mounted() {
			window.onresize = () => { //监听屏幕变化
				this.page_width();
			};
			this.page_width();
		},
		methods: {
			active(index) {
				this.currentSort = index;
			},
			changeTitleColor(index) {
				this.currentSort = index;
			},
			removeTitleColor(index) {
				this.currentSort = null;
			},
			handleToTitle(ind, item) {
				this.navList[ind].isSubShow = !this.navList[ind].isSubShow;
				if (this.navList[ind].isSubShow == true) {
					this.navList[ind].close = 'icon-zhedie';
				} else {
					this.navList[ind].close = 'icon-close';
				}
			},
			make_menu() { //点击导航图标
				this.dismenu = !this.dismenu;
			},
			page_width() { //获取屏幕宽度
				var screenWidth = window.screen.width;
				if (screenWidth <= 1024) {
					this.fullWidth = false;
				} else {
					this.fullWidth = true;
				}
			}
		}

	}
</script>

<style scoped>
	#main {
		background: #F0F6FF;
		font-size: 0.16rem;
	}

	#main .content {
		display: flex;
		flex-direction: row;
	}

	.content .admin_nav {
		min-height: 9.37rem;
		max-height: 1.3rem;
		padding: 0 !important;
		background: #364150;
		position: relative;
		
	}
	
	.content .admin_nav .admin_nav_site{
		height: 100vh;
	}

	.content .admin_nav .title {
		height: 1.39rem;
		line-height: 1.39rem;
		background: rgba(63, 73, 86, 1);
		color: #FFFFFF;
		text-align: center;
		font-size: 0.18rem;
		display: flex;
		justify-content: center;
	}

	.content .admin_nav .title div {
		padding: 0 0.03rem;
	}

	.content .admin_nav .title div:first-child i {
		font-size: 0.18rem;
	}

	.content .admin_nav ul .active {
		background: rgba(68, 81, 99, 1);
	}

	.content .admin_nav ul .active1 a.router-link-active {
		color: #fff;
	}

	.content .admin_nav ul li {
		height: 0.6rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 0.18rem;
	}

	.content .admin_nav ul li a {
		color: #cecdc5;
		cursor: pointer;
	}

	.content .admin_nav ul li:first-child {
		font-size: 0.2rem;
		height: 0.64rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #BEC5C0;
		cursor: pointer;
	}

	.content .admin_nav ul li:first-child div {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #BEC5C0;
	}

	.content .admin_nav ul li:first-child .left_icon {
		width: 22%;
	}

	.content .admin_nav ul li:first-child .left_icon i {
		color: #1296DB;
	}

	.content .admin_nav ul li:first-child .middle {
		width: 56%;
		display: flex;
		justify-content: flex-start;
	}

	.content .admin_nav ul li:first-child .right_icon {
		width: 22%;
	}

	.admin_nav .admin .middle:hover {
		color: #fff;
	}

	.admin_nav .admin .right_icon i:hover {
		color: #fff;
	}

	.admin_nav .admin .middle.router-link-active {
		color: #fff;
	}

	.content .admin_nav_position {
		position: absolute;
		z-index: 3000;
	}

	.content .admin_content {
		padding: 0 !important;
	}

	.content .admin_content .admin_header {
		width: 100%;
		height: 0.6rem;
		background: #364150;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.content .admin_content .admin_header .H5_item {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 0.2rem;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 0.2rem;
	}

	.content .admin_content .admin_header .H5_item i {
		font-size: 0.22rem;
		color: #fff;
	}

	.content .admin_content .admin_header .user {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.content .admin_content .admin_header .user .userHead {
		height: 0.6rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #fff;
		font-size: 0.18rem;
	}

	.content .admin_content .admin_header .user .userHead span {
		padding: 0 0.05rem;
	}

	.content .admin_content .admin_header .user .userHead span:nth-child(1) {
		position: relative;
	}

	.content .admin_content .admin_header .user .userHead span img {
		width: 0.4rem;
		height: 0.4rem;
		border-radius: 50%;
	}

	.content .admin_content .admin_header .user .userHead span input {
		width: 0.4rem;
		height: 0.4rem;
		position: absolute;
		overflow: hidden;
		opacity: 0;
		cursor: pointer;
	}

	.content .admin_content .admin_header .user .logOut {
		color: #fff;
		margin-left: 0.12rem;
		margin-right: 0.5rem;
	}

	.content .admin_content .admin_header .user .logOut i {
		color: #1296DB;
		font-size: 0.24rem;
		cursor: pointer;
	}

	.toggle-cart-enter-active {
		transition: all 0.4s linear;
	}

	.toggle-cart-leave-active {
		transition: all 0.4s linear;
	}

	.toggle-cart-enter {
		transform: translateX(-200%);
	}

	.toggle-cart-leave-active {
		transform: translateX(-200%);
	}
</style>

注：

1、css样式中的rem换算成px为对应的rem值*100,如：font-size:0.24rem；=>  font-size:24px；

2、文章中涉及到的iconfont类名是因为引用了阿里图标，如遇到不知道如何引用的可以翻阅博文→ https://blog.csdn.net/weixin_44803753/article/details/113423633

3、关于router-link对应的跳转，如有小伙伴不太清楚如何使用vue-router配置路由的可以翻阅博文→https://blog.csdn.net/weixin_44803753/article/details/113436625

Ending(〃'▽'〃)！

周一同学Zelina
关注
  • 4
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现顶部菜单栏
01-18
vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换 先看展示结果： 点击第一个按钮，显示内容1 点击第二个按钮，展示内容2 下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙) 数据标注 案
jquery手风琴折叠式导航菜单特效!
02-28
jquery手风琴折叠式导航菜单特效，点击一级导航栏目展开显示二级导航菜单栏目，其他展开的栏目都关闭，只展开当前的导航菜单。折叠式的导航菜单比较适合用于网站的侧边分类的导航，节省空间又方便。
vue2 实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容
m0_55333789的博客
06-20 2489
vue2 实现后台管理系统左侧菜单联动实现 tab根据路由切换联动内容
vue实现点击按钮展开侧边栏，再点击按钮收起
Yujis的博客
06-20 3353
vue实现点击按钮展开侧边栏，再点击按钮收起
Vue2.0 +Element-UI+Vuex实现导航栏收缩展开功能
weixin_46403232的博客
06-14 1621
这个功能的实现是使用vuex进行兄弟间的通信传值 1、element-ui中有collapse属性，设置属性值可以实现导航栏的伸缩和展开
使用Vue实现手风琴菜单效果
zshsats博客
03-14 7538
使用vue的指令个事件冒泡委托给一个事件处理 使用 &lt;vertical-menu :menuList="dataList" :initIndex="0" @fold-body="foldHandle" @go-state="goWhere"&gt;&lt;/vertical-menu&gt; data() { return { is
vue组装模板（侧边栏+顶部+主体）--项目阶段4
最新发布
快乐学习
08-26 1401
一、前言介绍一、前言介绍在上一篇文章中已经介绍了如何去实现前后端数据的交互并在前端显示出来。那么本篇文章是给这个项目增加上侧边栏，点击不同的侧边栏会有不同的效果。使用侧边栏的系统实际上是单页面系统，运行用户体验会更好，但是缺点就是SEO（搜索曝光率）没有多页面的好，典型的网易云就是单页面的系统。就是整体框架不会变，只是变里面的内容。这样用户体验度会比较好。若依开源项目（）也是一样的还有网易云音乐的官网也是二、操作步骤（一）结构解析页面要分成3部分组成，分别是侧边栏、顶部和主体3部分。
Vue项目侧边栏折叠和展开效果应用
weixin_53277030的博客
10-31 1万+
折叠能使项目功能展示更饱满，处理好事件控制逻辑，就能很好的应用菜单栏的折叠和展开效果。
vue3 + element plus实现侧边栏
左直拳的马桶_日用桶
09-28 1万+
一般前端项目少不了侧边栏。如图所示这些鬼东西特别繁琐，所以我们喜欢找些现成、开源的所谓后台管理的前端框架，开箱即用。方便是方便，而且做得还挺好，问题是，有学习成本，要按照它的规则行事。一些功能是怎么实现的，不清楚，除非研究它的源代码。想改的话，更不容易。一切都靠猜、盲测，一则不好改，二则出了问题也不知道是哪里的毛病，反而欲速则不达。所以我们之前基于一个空白的vue项目开发，把需要的路由、ajax封装等摞上去。现在是实现侧边栏菜单。点击左侧菜单项，对应页面展示在右侧。
【完整项目搭建】基于vue-cli实现vue前端搭建考试系统——⑦项目开发基于vuex实现顶栏组件操控左侧导航栏收起
m0_56905968的博客
12-20 731
由于左侧菜单是单独部分的数据，而顶栏也是，因此根据模块化的思想需要将两部分数据进行封装管理，需要再在store文件夹下新建tab.js文件。1、顶栏常单独形成一个组件，因此在src文件夹下的components文件夹中新建CommonHeader.vue。在CommonAside.vue组件中获取store中的state，从而获取isCollapse字段。相关代码如下：【注意，由于顶栏的左侧区域和右侧区域经常分装，以实现不同功能】tab.js文件写好后，在store文件夹下的index.js文件中引用。
Vue实现侧边菜单栏手风琴效果实例代码
08-27
本文通过一段简单的代码给大家介绍了基于纯vue实现侧边菜单栏手风琴效果，代码很简单，感兴趣的朋友跟随脚本之家小编一起看看吧
基于vue.js实现侧边菜单栏
10-20
主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue实现圆形菜单栏组件
10-16
主要介绍了基于vue实现的圆形菜单栏组件，本文通过实例代码，图文详解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue实现底部侧边工具栏的实例代码
10-18
主要介绍了Vue实现底部侧边工具栏的实例代码，文中通过分享一段代码介绍vue 侧边导航栏递归显示功能,需要的朋友可以参考下
8种方法解决vue创建项目报错：command failed: npm install --loglevel error
热门推荐
moandaylab
05-18 6万+
踩了这个巨大的坑！！ 试了一个晚上终于找到了创建项目成功了T_T 当报错了command failed: npm install --loglevel error &&& command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org时，多了后面那句原因在于安装时是否有选择淘宝镜像。我开始各种百度，整理了以下六种解决方法： 1、 npm install chromedriv
vitepress从0到1，让每个前后端小伙伴都拥有一个属于自己的博客
moandaylab
06-01 8868
首先，我们在文件夹下定义一个文件，名为home.vue。然后在里面写些想要展示的内容所对应的代码，</</</
vue项目中使用vue-router进行路由配置及嵌套多级路由
moandaylab
01-30 3163
在vue项目中用vue-router进行路由配置，以及嵌套二级、三级路由
花了一天的时间，地板式扫盲了vue3中所有API盲点
moandaylab
11-09 990
上面我们了解了vue3的基础API，准确来说，上面的API可以解决实际工作中80%的问题。那下面，我们就再来看一些较为进阶的api操作。下面所涉及到的这些API，更多的是可以在某些定制化的场景下，做一些高阶的操作。比如：我们可以在一个headless组件里，用render和h()函数，来渲染自定义的页面。那进阶 API都还有哪些东西呢，来看下面的内容。到这里，我们也就讲完了vue3 API所有的知识点。个人认为，原理知识的学习，是为了更好的将其运用到项目中。
vue2侧边菜单栏向左对齐
08-10
根据提供的内容来看，你想知道如何将vue2的侧边菜单栏向左对齐。根据引用的代码，在样式设计里可以通过以下方式实现侧边菜单栏向左对齐: .el-aside { text-align: left; } 这样设置之后，侧边菜单栏的内容将会向...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值