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

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

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

參考:

使用element-ui的el-menu導(dǎo)航選中后刷新頁(yè)面保持當(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平臺(tái)</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平臺(tái)</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">首頁(yè)</el-menu-item>
        <el-submenu index="2">
          <template slot="title">測(cè)試</template>
          <el-menu-item index="2-1">選項(xiàng)1</el-menu-item>
          <el-menu-item index="2-2">選項(xiàng)2</el-menu-item>
          <el-menu-item index="2-3">選項(xiàng)3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">選項(xiàng)4</template>
            <el-menu-item index="2-4-1">選項(xiàng)1</el-menu-item>
            <el-menu-item index="2-4-2">選項(xiàng)2</el-menu-item>
            <el-menu-item index="2-4-3">選項(xiàng)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>
/* 取消過(guò)渡效果 */
.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頂部菜單欄實(shí)現(xiàn)小結(jié)的文章就介紹到這了,更多相關(guān)vue頂部菜單欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

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

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

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

    解決Vue.js Devtools未檢測(cè)到Vue實(shí)例的問(wèn)題

    在開(kāi)發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會(huì)遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識(shí)別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問(wèn)題,并提供相應(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ù)組,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-11-11
  • vue項(xiàng)目base64字符串轉(zhuǎn)圖片的實(shí)現(xiàn)代碼

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

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

    vue axios sessionID每次請(qǐng)求都不同的原因以及修改方式

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論