Vue实现侧边菜单栏手风琴效果实例代码

效果图如下所示：

<template> 
 <div class="asideBox"> 
 <aside> 
 <ul class="asideMenu"> 
 <li v-for="(item,index) in menuList"> 
 <div class="oneMenu" @click="showToggle(item,index)"> 
 <img v-bind:src="item.imgUrl" /> 
 <span>{{item.name}}</span> 
 </div> 
 <ul v-show="item.isSubShow"> 
 <li v-for="subItem in item.subItems"> 
 <div class="oneMenuChild">{{subItem.name}}</div> 
 </li> 
 </ul> 
 </li> 
 </ul> 
 </aside> 
 </div> 
</template> 

export default { 
 data(){ 
 return{ 
 menuList:[ 
 { 
 name:'字符录入', 
 imgUrl:require('../assets/images/icon-character.png'), 
 isSubShow:false, 
 subItems:[ 
 { 
 name:'字符录入' 
 }, 
 { 
 name:'白话文录入' 
 }, 
 { 
 name:'文言文录入' 
 }, 
 { 
 name:'小写数字录入' 
 } 
 ] 
 }, 
 { 
 name:'票据数据录入', 
 imgUrl:require('../assets/images/icon-bill.png'), 
 isSubShow:false, 
 subItems:[ 
 { 
 name:'票据录入' 
 }, 
 { 
 name:'翻打传票' 
 }, 
 ] 
 }, 
 { 
 name:'交易码录入', 
 imgUrl:require('../assets/images/icon-transaction.png'), 
 isSubShow:false, 
 subItems:[ 
 { 
 name:'交易码录入' 
 }, 
 { 
 name:'交易名称录入' 
 }, 
 ] 
 }, 
 { 
 name:'操作码录入', 
 imgUrl:require('../assets/images/icon-operation.png'), 
 isSubShow:false, 
 subItems:[ 
 { 
 name:'操作码录入' 
 }, 
 { 
 name:'操作名称录入' 
 }, 
 ] 
 }, 
 { 
 name:'票据学习', 
 imgUrl:require('../assets/images/icon-billearn.png'), 
 isSubShow:false, 
 subItems:[ 
 ] 
 }, 
 { 
 name:'内部凭证学习', 
 imgUrl:require('../assets/images/icon-voucher.png'), 
 isSubShow:false, 
 subItems:[ 
 ] 
 }, 
 { 
 name:'现金管理学习', 
 imgUrl:require('../assets/images/icon-cash.png'), 
 isSubShow:false, 
 subItems:[ 
 ] 
 }, 
 ] 
 } 
 }, 
 methods:{ 
 // 点击展开折叠菜单事件 
 showToggle:function(item,ind){ 
 this.menuList.forEach(i => { 
 // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false 
 if (i.isSubShow !== this.menuList[ind].isSubShow) { 
 i.isSubShow = false; 
 } 
 }); 
 item.isSubShow = !item.isSubShow; 
 console.log(item.name) 
 }, 
 } 
 } 

<style lang="scss" scoped> 
 $menuBackColor:#f1f1f1; 
 $menuListH2:#8fbfef; 
 .asideBox{ 
 height: 100%; 
 width: 300px; 
 aside{ 
 background: $menuBackColor; 
 height: 100%; 
 .asideMenu{ 
 .oneMenu{ 
 height: 50px; 
 line-height: 50px; 
 font-size: 18px; 
 font-weight: normal; 
 color: #ffffff; 
 background: $menuListH2 url("../assets/images/icon-open.png") no-repeat 280px center; 
 border-bottom: 1px solid #669cd9; 
 img{ 
 width: 20px; 
 height: 20px; 
 margin: 15px 16px 15px 20px; 
 vertical-align: top; 
 } 
 } 
 .oneMenuChild{ 
 padding: 0 20px 0 60px; 
 height: 40px; 
 line-height: 40px; 
 background: $menuBackColor; 
 border-bottom: 1px solid #ffffff; 
 color: #454343; 
 font-size: 18px; 
 } 
 } 
 } 
 } 
</style> 

总结

以上所述是小编给大家介绍的Vue实现侧边菜单栏手风琴效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！