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


Posted in Javascript onMay 31, 2018

效果图如下所示:

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

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

Javascript 相关文章推荐
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
Node.js笔记之process模块解读
May 31 #Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 #Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 #Javascript
Vue2 轮播图slide组件实例代码
May 31 #Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 #Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 #Javascript
Vue 让元素抖动/摆动起来的实现代码
May 31 #Javascript
You might like
19个超实用的PHP代码片段
2014/03/14 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
全球性的女装店:storets
2019/06/12 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
韩语专业本科生求职信
2013/10/01 职场文书
专业销售业务员求职信
2013/11/18 职场文书
大学毕业通用个人的求职信
2013/12/08 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
公司办公室岗位职责
2014/03/19 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
大学生心理活动总结
2014/07/04 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
项目建议书
2015/02/04 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python