vue顶部菜单栏实现小结
作者：~疆
这篇文章主要介绍了vue顶部菜单栏实现小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
参考：
使用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>到此这篇关于vue顶部菜单栏实现小结的文章就介绍到这了,更多相关vue顶部菜单栏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！