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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
JS分页的实现(同步与异步)
Sep 16 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 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
Ajax PHP简单入门教程代码
2008/04/25 PHP
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php网页病毒清除类
2014/12/08 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
Augularjs-起步详解
2016/07/08 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
详解vue中使用微信jssdk
2019/04/19 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
python getopt 参数处理小示例
2009/06/09 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
小学生美德少年事迹
2014/02/02 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
小学一年级评语大全
2014/04/22 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
项目经理岗位职责
2015/01/31 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
费城故事观后感
2015/06/10 职场文书
律师催款函范文
2015/06/24 职场文书