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