欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年06月17日 09:04:37   作者:~疆  
這篇文章主要介紹了vue頂部菜單欄實現(xiàn)小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

參考:

使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • webpack項目調(diào)試以及獨立打包配置文件的方法

    webpack項目調(diào)試以及獨立打包配置文件的方法

    下面小編就為大家分享一篇webpack項目調(diào)試以及獨立打包配置文件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • 解決Vue.js Devtools未檢測到Vue實例的問題

    解決Vue.js Devtools未檢測到Vue實例的問題

    在開發(fā)Vue.js應(yīng)用時,Vue.js Devtools是一個不可或缺的調(diào)試工具,然而,有時我們可能會遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個問題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下
    2024-01-01
  • 淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組

    淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組

    這篇文章主要介紹了淺談Vue數(shù)據(jù)響應(yīng)思路之?dāng)?shù)組,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼

    vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼

    這篇文章主要介紹了vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-07-07
  • vue axios sessionID每次請求都不同的原因以及修改方式

    vue axios sessionID每次請求都不同的原因以及修改方式

    這篇文章主要介紹了vue axios sessionID每次請求都不同的原因以及修改方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12
  • 關(guān)于vue?src路徑動態(tài)拼接的小知識

    關(guān)于vue?src路徑動態(tài)拼接的小知識

    這篇文章主要介紹了vue?src路徑動態(tài)拼接的小知識,具有很好的參考價值,希望對大家有所幫助。
    2022-04-04
  • VUE零基礎(chǔ)入門axios的使用

    VUE零基礎(chǔ)入門axios的使用

    這篇文章主要介紹了axios在Vue項目中用來向后臺發(fā)送請求(調(diào)接口API),獲取響應(yīng)信息的方法,axios 是一個輕量的 HTTP客戶端,基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請求,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-07-07
  • vue如何利用store實現(xiàn)兩個平行組件間的傳值

    vue如何利用store實現(xiàn)兩個平行組件間的傳值

    這篇文章主要介紹了vue如何利用store實現(xiàn)兩個平行組件間的傳值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue.js第四天學(xué)習(xí)筆記(組件)

    Vue.js第四天學(xué)習(xí)筆記(組件)

    這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記,一個簡單的組件示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Vue使用Swiper封裝輪播圖組件的方法詳解

    Vue使用Swiper封裝輪播圖組件的方法詳解

    Swiper是一個很常用的用于實現(xiàn)各種滑動效果的插件,PC端和移動端都能很好的適配。本文將利用Swiper實現(xiàn)封裝輪播圖組件,感興趣的可以了解一下
    2022-09-09

最新評論