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