【下载文档:  Vue实现侧边菜单栏手风琴效果实例代码.txt 】

---

Vue实现侧边菜单栏手风琴效果实例代码
效果图如下所示：

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)
},
}
}

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