vue顶部菜单栏
~疆 人气:0参考:
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
效果图1:
<!--home--> <template> <div class="homeContainer"> <div style=" display: flex; height: 60px; line-height: 60px; align-items: center; " > <div style=" display: flex; align-items: center; margin-left: 30px; cursor: pointer; " > <img src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/WeServerManage/logo-weserver.png" style="width: 40px; height: 40px; margin-right: 10px" /> <div>xxx平台</div> </div> <div style=" display: flex; align-items: center; margin-left: auto; margin-right: 20px; " > <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" target="_blank"> <li>外链百度</li> </a> <li>菜单1</li> <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png " style="margin: 0 5px" ></el-avatar> <li>admin</li> </div> </div> </div> </template> <script> export default { name: "home", props: {}, data() { return {}; }, methods: {}, }; </script> <style lang="scss" scoped> .homeContainer { background-color: #017bc4; li { list-style-type: none; padding: 0 10px; cursor: pointer; &:hover { background-color: rgba(0, 0, 0, 0.124); } } } </style>
效果图2:
<!--home--> <template> <div class="homeContainer"> <div style=" display: flex; height: 60px; line-height: 60px; align-items: center; " > <div style=" display: flex; align-items: center; margin-left: 30px; cursor: pointer; " > <img src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/WeServerManage/logo-weserver.png" style="width: 40px; height: 40px; margin-right: 10px" /> <div>xxx平台</div> </div> <el-menu default-active="2-4-2" mode="horizontal" background-color="#017bc4" text-color="white" active-text-color="orange" style="margin-left: 30px" > <el-menu-item index="1">首页</el-menu-item> <el-submenu index="2"> <template slot="title">测试</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> </el-menu> <div class="header_right"> <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" target="_blank"> <li>外链百度</li> </a> <li>菜单1</li> <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png " style="margin: 0 5px" ></el-avatar> <li>admin</li> </div> </div> </div> </template> <script> export default { name: "home", props: {}, data() { return { activeIndex2: "1", }; }, methods: {}, }; </script> <style> /* 取消过渡效果 */ .el-menu-item { transition-duration: 0s; } </style> <style lang="scss" scoped> .homeContainer { background-color: #017bc4; .header_right { display: flex; align-items: center; margin-left: auto; margin-right: 20px; li { list-style-type: none; padding: 0 10px; cursor: pointer; &:hover { background-color: rgba(0, 0, 0, 0.205); } } } } </style>
加载全部内容