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实现侧边菜单栏手风琴效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！