【Vue.js】Vue.js点击按钮弹出隐藏菜单的几种方式

迷南。 2022-11-30 12:54 140阅读 0赞

## 1、组件Element ##

1.  内置过渡动画——collapse 展开折叠

<div class="left-icon-group">
    	<el-button @click="toggleMenu">
    		<img src="./img/3stripe.png" class="pop-menu" style="width: 24px;height: 20px;" alt="">
    	</el-button>
    </div>
    
    <div class="menu" v-show="showMenu">
    	<el-collapse-transition>
    		<el-menu default-active="0" class="el-menu-vertical-demo" @select="menuSelected" :collapse="isCollapse">
    			<el-menu-item index="0" style="padding-left: 10%">
    				<i class="el-icon-s-home"></i>
    				<span slot="title">首页</span>
    			</el-menu-item>
    			<el-menu-item index="1" style="padding-left: 10%">
    				<i class="el-icon-menu"></i>
    				<span slot="title">应用系统</span>
    			</el-menu-item>
    			<el-menu-item index="2" style="padding-left: 10%">
    				<i class="el-icon-s-flag"></i>
    				<span slot="title">服务资源</span>
    			</el-menu-item>
    			<el-menu-item index="3" style="padding-left: 10%">
    				<i class="el-icon-s-opportunity"></i>
    				<span slot="title">法律法规</span>
    			</el-menu-item>
    			<el-menu-item index="4" style="padding-left: 10%">
    				<i class="el-icon-s-data"></i>
    				<span slot="title">分析报告</span>
    			</el-menu-item>
    		</el-menu>
    	</el-collapse-transition>
    </div>
    
    <script> var vm = new Vue({ data: { showMenu: true }, toggleMenu() { this.showMenu === true ? this.showMenu = false : this.showMenu = true; } }) </script>

1.  Drawer抽屉

<div class="left-icon-group">
    	<el-button @click="drawer = true" type="primary" >
    		<img src="./img/3stripe.png" class="pop-menu" style="width: 24px;height: 20px;" alt="">
    	</el-button>
    </div>
    
    <el-drawer :visible.sync="drawer" :direction="direction" :with-header="false" :show-close="false">
    	<el-menu default-active="0" class="el-menu-vertical-demo" @select="menuSelected" :collapse="isCollapse">
    		<el-menu-item index="0" style="padding-left: 10%">
    			<i class="el-icon-s-home"></i>
    			<span slot="title">首页</span>
    		</el-menu-item>
    		<el-menu-item index="1" style="padding-left: 10%">
    			<i class="el-icon-menu"></i>
    			<span slot="title">应用系统</span>
    		</el-menu-item>
    		<el-menu-item index="2" style="padding-left: 10%">
    			<i class="el-icon-s-flag"></i>
    			<span slot="title">服务资源</span>
    		</el-menu-item>
    		<el-menu-item index="3" style="padding-left: 10%">
    			<i class="el-icon-s-opportunity"></i>
    			<span slot="title">法律法规</span>
    		</el-menu-item>
    		<el-menu-item index="4" style="padding-left: 10%">
    			<i class="el-icon-s-data"></i>
    			<span slot="title">分析报告</span>
    		</el-menu-item>
    	</el-menu>
    </el-drawer>
    
    <script> var vm = new Vue({ data: { drawer: false } }) </script>

## 2、vux-ui ##

## 3、Bootstrap ##

## 4、修改元素样式 ##

<div class="left-icon-group">
    	<img @click="popMenu" src="./img/3stripe.png" class="pop-menu" style="width: 24px;height: 20px;" alt="">
    </div>
    <div class="menu">
    	<el-menu default-active="0" class="el-menu-vertical-demo" @select="menuSelected" :collapse="isCollapse">
    	    <el-menu-item index="0" style="padding-left: 10%">
    	        <i class="el-icon-s-home"></i>
    	        <span slot="title">首页</span>
    	    </el-menu-item>
    	    <el-menu-item index="1" style="padding-left: 10%">
    	        <i class="el-icon-menu"></i>
    	        <span slot="title">应用系统</span>
    	    </el-menu-item>
    	    <el-menu-item index="2" style="padding-left: 10%">
    	        <i class="el-icon-s-flag"></i>
    	        <span slot="title">服务资源</span>
    	    </el-menu-item>
    	    <el-menu-item index="3" style="padding-left: 10%">
    	        <i class="el-icon-s-opportunity"></i>
    	        <span slot="title">法律法规</span>
    	    </el-menu-item>
    	    <el-menu-item index="4" style="padding-left: 10%">
    	        <i class="el-icon-s-data"></i>
    	        <span slot="title">分析报告</span>
    	    </el-menu-item>
    	</el-menu>
    </div>
    
    <script> var vm = new Vue({ data: { showPopMenu: false }, popMenu() { this.showPopMenu = !this.showPopMenu; if (this.showPopMenu == true) { document.getElementsByClassName('menu')[0].style.display = "block"; } else { document.getElementsByClassName('menu')[0].style.display = "none"; } } }) </script>