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异步加载的三种解决方案
Mar 04 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
javascript实现倒计时关闭广告
Feb 09 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Cython 三分钟入门教程
2009/09/17 Python
python控制台显示时钟的示例
2014/02/24 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
新三好学生主要事迹
2014/01/23 职场文书
教学器材管理制度
2014/01/26 职场文书
医药销售自荐书
2014/05/29 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
工作失误检讨书
2015/01/26 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL