vue实现导航收缩框 vue实现导航收缩框

本文实例为大家分享了vue实现导航收缩框的具体代码，供大家参考，具体内容如下

文章图片

代码：

.el-menu-vertical:not(.el-menu--collapse) {width: 180px; }.leftAside {width: 180px; height: 100%; padding-top: 20px; overflow: auto; background-image: url('../../assets/update/imgs/bjleft.jpg'); .el-header {.shousuo {cursor: pointer; color: #fff; opacity: 0.8; font-size: 20px; transition: 0.37s; }.shousuo:hover {font-size: 22px; transition: 0.37s; }}.el-menu {border-right: 0 !important; background-color: transparent !important; }::v-deep.el-menu-item {height: 44px; line-height: 40px; background-color: transparent !important; i {width: 14px; height: 14px; margin-right: 15px; color: #fff !important; }img {width: 14px; height: 14px; line-height: 14px; margin-right: 15px; margin-left: 2px; }}.el-menu-item:hover {background: #2b5dbe !important; border-radius: 10px 0px 0px 10px; }.el-menu-item.is-active {background: #f5f5f5 !important; border-radius: 10px 0px 0px 10px; i {color: #2a62ce !important; }}::-webkit-scrollbar {display: none !important; }}::v-deep .el-submenu__title {height: 44px; line-height: 40px; background-color: transparent !important; i {width: 14px; height: 14px; margin-right: 15px; color: #fff !important; }img {width: 14px; height: 14px; line-height: 14px; margin-right: 15px; margin-left: 2px; }}::v-deep .el-menu--inline {background: #1444aa !important; }在路由出口页面methods:{// 接收子组件leftnav的值进行宽度动态化isCollapse(val){console.log("父组件",val); if(val===false){this.asidewidth="180px"}else{this.asidewidth="60px"}}}