做网站开发的有哪些公司/百度网站安全检测

需求描述：

如下图，可收缩、可展开的侧边导航栏，当收缩时，鼠标悬停在一级菜单时，出现二级菜单。

解决方法：

设置标志【isCollapse】来控制展开和收缩图标的显示，当【isCollapse=true】时，侧标导航栏收缩，且标题“通讯录管理”不显示。当【isCollapse=false】时，侧标导航栏展开，且标题“通讯录管理”显示。

在展开和收缩图标上绑定点击事件【@click="isCollapse=true"】【@click="isCollapse=false"】

 <span><!-- <i class="el-icon-platform-eleme logo"></i> --><img src="../../assets/images/通讯录.png" alt /><span v-show="!isCollapse">通讯录管理</span></span><el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"><i v-show="!isCollapse" class="el-icon-s-fold expandBtn" @click="isCollapse=true"></i><i v-show="isCollapse" class="el-icon-s-fold shrinkBtn" @click="isCollapse=false"></i></el-radio-group>

注意，收缩图标采用固定定位

.shrinkBtn {position: fixed;left: -18px;top: 38px;color: #151d41;margin-left: 100px;transform: rotate(180deg);}

完整代码：

<template><div class="left-nav"><!-- <button @click="isCollapse=!isCollapse">展开</button> --><div class="nav-logo"><span><!-- <i class="el-icon-platform-eleme logo"></i> --><img src="../../assets/images/通讯录.png" alt /><span v-show="!isCollapse">通讯录管理</span></span><el-radio-group v-model="isCollapse" style="margin-bottom: 20px;"><i v-show="!isCollapse" class="el-icon-s-fold expandBtn" @click="isCollapse=true"></i><i v-show="isCollapse" class="el-icon-s-fold shrinkBtn" @click="isCollapse=false"></i></el-radio-group></div><el-menuclass="el-menu-vertical-demo":unique-opened="true"routerbackground-color="#151d41"text-color="#fff":collapse="isCollapse"><el-menu-item index="/"><i class="el-icon-s-home"></i><span slot="title">首页</span></el-menu-item><el-submenu v-for="(item,index) in menuList" :index="'' + index" :key="index"><template slot="title"><i :class="item.icon"></i><span>{{ item.authName }}</span></template><el-menu-itemv-for="(subItem,index) in item.children":index="'/' + subItem.path":key="index"><span>{{ subItem.authName }}</span></el-menu-item></el-submenu></el-menu></div>
</template><script>
export default {data() {return {menuList: [{id: 0,authName: "通讯录",icon: "el-icon-s-custom",children: [{authName: "用户与部门管理",id: 1,path: "department",parentid: 0},{ authName: "通讯录设置", id: 2, path: "adrbook", parentid: 0 }]},{id: 1,authName: "数据报表",icon: "el-icon-s-claim",children: [{ authName: "数据概览", id: 1, path: "overview", parentid: 1 },{ authName: "员工活跃数据", id: 2, path: "employees", parentid: 1 }]},{id: 2,authName: "企业设置",icon: "el-icon-office-building",children: [{authName: "企业信息管理",id: 1,path: "information",parentid: 2},{ authName: "权限管理", id: 2, path: "authority", parentid: 2 },{ authName: "团队邀请设置", id: 3, path: "team", parentid: 2 },{ authName: "安全策略", id: 4, path: "safety", parentid: 2 },{ authName: "管理员日志", id: 5, path: "journal", parentid: 2 }]}],isCollapse: false};},methods: {}
};
</script><style lang="less" scoped>
@bgc: #151d41;
.left-nav {// width: 228px;.nav-logo {height: 60px;padding: 0 10px;display: flex;justify-content: space-between;align-items: center;line-height: 60px;margin-top: 16px;.logo {font-size: 30px;}img {width: 28px;margin: 5px;}.el-radio-group {font-size: 20px;line-height: 60px;margin-top: 20px;margin-left: 10px;.shrinkBtn {position: fixed;left: -18px;top: 38px;color: #151d41;margin-left: 100px;transform: rotate(180deg);}}}.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;}.el-menu-vertical-demo {border: none;.el-menu-item {span {color: #909399;font-size: 16px;}}.el-submenu {span {color: #909399;font-size: 16px;}.el-menu-item {span {color: #909399;font-size: 14px;}}}}
}
</style>