vue顶部菜单栏实现小结

Lillian ·

更新时间:2024-11-13

· 1904 次阅读

参考：

使用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顶部菜单栏内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 菜单小结菜单栏

1024 个赞