vue怎么实现手风琴效果_Vue实现侧边菜单栏手风琴效果实例代码

效果图如下所示：

• {{item.name}}

  • {{subItem.name}}

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)

},

}

}

$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;

}

}

}

}

总结

以上所述是小编给大家介绍的Vue实现侧边菜单栏手风琴效果实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！