Vue实现侧边菜单栏手风琴效果实例代码
程序员文章站
2022-04-10 17:58:46
效果图如下所示：
效果图如下所示：
<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实现侧边菜单栏手风琴效果实例代码，希望对大家有所帮助