Vue侧导航栏的实现

曲小强

于 2018-05-07 17:37:18 发布

阅读量6.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue 侧导航栏

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/80228801

Vue.js 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了一个使用Vue.js编写的侧导航栏组件，通过切换显示状态实现了菜单的展开与收起效果。该组件利用了Vue的过渡效果来增强用户体验，并通过简单的点击事件控制菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<div class="sildebar">
		<div class="home" @click="hideMenu">
		侧导航栏侧导航栏侧导航栏侧导航栏
	</div>
		<div class="menu" v-show="isShows" @click="hideMenu"></div>

		<transition name="slide-fade">
			<div class="sss" v-show="isShow">
				2222
			</div>
		</transition>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				isShow: false,
				isShows: false
			}
		},
		methods: {
			hideMenu () {
				if (this.isShow) {
					this.isShow = false
					this.isShows = false
				} else {
					this.isShow = true
					this.isShows = true
				}
				
			},
		}
	}
</script>

<style>
	.sss{
		color: #fff;
		position: fixed;
    width: 286px;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 11;
    overflow-y: auto;
    background: #000;
	}
	.slide-fade-enter-active {
	  transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-leave-to,.slide-fade-enter{
	  transform: translateX(-286px);
	  opacity: 0;
	}
	.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    z-index: 10;
    background: rgba(0,0,0,0.5);
	}
</style>