快捷導航

vue頂部菜單欄實現(xiàn)小結(jié)

更新時間：2022年06月17日 09:04:37 作者：~疆

這篇文章主要介紹了vue頂部菜單欄實現(xiàn)小結(jié),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

參考：

使用element-ui的el-menu導航選中后刷新頁面保持當前選中狀態(tài)

效果圖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  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  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>

到此這篇關(guān)于vue頂部菜單欄實現(xiàn)小結(jié)的文章就介紹到這了,更多相關(guān)vue頂部菜單欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: