Vue侧导航栏的实现

布满荆棘的人生 2022-05-25 03:42 195阅读 0赞

<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>

![20180507173712563][]

[20180507173712563]: /images/20220525/d76ca7c5613a41aaa4f2d7cdf8b346c2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 337 阅读

相关 element-admin的侧边栏导航和权限

element-admin的侧边栏引入方法：我的有道云笔记可以下载：[element-admin的侧边栏导航和权限][element-admin]（下载文件资源的附件）

今天药忘吃喽~/ 2022年12月29日 09:15/ 0 赞/ 154 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 292 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 284 阅读

相关 js实现侧边导航栏展开和折叠

效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

╰半夏微凉°/ 2022年08月23日 05:46/ 0 赞/ 294 阅读

相关 Vue侧导航栏的实现

<template> <div class="sildebar"> <div class="home" @click="hideMenu">

布满荆棘的人生/ 2022年05月25日 03:42/ 0 赞/ 196 阅读

相关左中侧导航栏组件

![大笑][laugh.gif]2018.1.11 21:35pm 左中侧效果： ![Image 1][]![Image 1][]![Image 1][]![SouthEa

川长思鸟来/ 2021年10月09日 03:52/ 0 赞/ 281 阅读

相关侧边栏组件(Vue)

从右侧滑入使用方法: 外部传入draw的键,且键值为true开启外部监听@changeShow事件,通过将传入的draw值改为

蔚落/ 2021年07月24日 20:29/ 0 赞/ 664 阅读

相关手风琴导航栏侧边-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

朴灿烈づ我的快乐病毒、/ 2021年06月22日 15:36/ 0 赞/ 603 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 623 阅读