Vue实现侧边菜单栏手风琴效果实例代码
发布时间：2020-12-17 03:12:25 所属栏目：百科 来源：网络整理
导读：效果图如下所示： {{item.name}} { // 判断如果数据中的menuList[i]的show属性不等于当前数据的isSubShow属性那么menuList[i]等于false if (i.isSubShow !== this.menuList[ind].isSubShow) { i.isSubShow = false; } }); item.isSubShow = !item.isSubShow;
|
效果图如下所示：
{{item.name}}
{
// 判断如果数据中的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实现侧边菜单栏手风琴效果实例代码。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |