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动画(animate)简单引擎代码示例
Dec 04 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
jquery 验证用户名是否重复代码实例
May 14 jQuery
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue实现简易计算器
Feb 25 Javascript
angular中的post请求处理示例详解
Jun 30 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
php数组冒泡排序算法实例
2016/05/06 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
python生成带有表格的图片实例
2019/02/03 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
工作表现评语
2014/01/19 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
2014年外联部工作总结
2014/11/17 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
个人借条范本
2015/05/25 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
关于EntityWrapper的in用法
2022/03/22 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android