element?實現導航欄收起展開功能及思路

更新時間：2023年01月16日 15:12:53 作者：水星記_

這篇文章主要介紹了element?實現導航欄收起展開功能，實現思路先給 el-menu加上 :collapse="isCollapse" 屬性，這個屬性也是 element 上的一個參數，意思為是否開啟折疊動畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起，需要的朋友可以參考下

element 導航欄收起展開

實現思路

1. 首先給 el-menu 加上 :collapse="isCollapse" 屬性，這個屬性也是 element 上的一個參數，意思為是否開啟折疊動畫，在 data 中定義 isCollapse ，用 true 和 false 控制展開與收起。

2. 在 html 中寫入以下代碼。

 <el-menu :collapse="isCollapse" class="el-menu-vertical"></el-menu>

3. 這里還需要把 el-aside 的寬度設置為跟 el-menu 一樣，以免出現執(zhí)行展開收起時寬度不一樣。

  <!-- width的寬度跟collapse一樣動態(tài)控制 -->
  <el-aside width="collapse"></el-aside>

4. 展開和收起按鈕利用兩個 icon 圖標，通過點擊事件來動態(tài)控制顯示與隱藏。

   <el-header>
          <!-- 點擊展開收起導航和切換對應圖標 -->
          <i class="el-icon-s-fold" @click="isC" v-show="block"></i>
          <i class="el-icon-s-unfold" @click="isC" v-show="toggle"></i>
   </el-header>

5. data 中定義的變量。

export default {
  name: "Main",
  data() {
    return {
      isCollapse: false, //導航欄默認為展開
      toggle: false,//第二個圖標默認隱藏
      block: true,//默認顯示第一個圖標
    };
  },
};

6. methods 中的點擊事件。

  methods: {
    // 動態(tài)控制展開與收起和切換對應圖標
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
    },
  },

7. 用到的 css 代碼。

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

最后附上完整代碼

<template>
  <div>
    <el-container>
      <!-- width的寬度跟collapse一樣動態(tài)控制 -->
      <el-aside width="collapse">
        <!-- :collapse="isCollapse"  class="el-menu-vertical" 動態(tài)控制導航菜單的收起與展開  router：讓index作為 path 進行路由跳轉 -->
        <el-menu :default-active="$route.path" router :collapse="isCollapse" class="el-menu-vertical" background-color="#393e42"
          text-color="#fff" active-text-color="rgb(64, 158, 255)">
          <el-submenu index="1">
            <!-- 插槽 插入一級導航標題 -->
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>工廠設置</span>
            </template>
            <!-- 二級導航標題 -->
            <el-menu-item-group>
              <el-menu-item index="/A-Business/A-Business">
                <i class="el-icon-s-shop"></i>商戶信息
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="box_bgd" @click="isC">
            <!-- 點擊展開收起導航和切換對應圖標 -->
            <i class="el-icon-s-fold" v-show="block"></i>
            <i class="el-icon-s-unfold" v-show="toggle"></i>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false, //導航欄默認為展開
      toggle: false, //第二個圖標默認隱藏
      block: true, //默認顯示第一個圖標
    };
  },
  methods: {
    // 動態(tài)控制展開與收起和切換對應圖標
    isC() {
      this.isCollapse = !this.isCollapse;
      this.toggle = !this.toggle;
      this.block = !this.block;
    },
  },
};
</script>

<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: 100%;
  padding: 0 !important;
}

.el-aside {
  background-color: #393e42;
  color: #333;
  height: 100vh;
}
.el-menu {
  border-right-width: 0;
}
.el-main {
  color: #333;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
.box_bgd {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 54px;
}
.box_bgd i {
  font-size: 20px;
}
.box_bgd:hover {
  background-color: rgb(203, 215, 230);
}
</style>

效果如下

在這里插入圖片描述

PS：Vue結合element-ui實現導航菜單展開收縮小功能

1. 先上個效果圖

這里我把控制菜單收縮的放在中間了，是可以隨便調整的。

2. 問題思路想法

① 首先是布局，這就是個很經典的后臺管理系統(tǒng)的容器頁面，這里分為上下結構，上面一般放些系統(tǒng)logo、登錄的用戶信息，還有一些小功能等等。然后下面又分為左右結構，左邊就是我們的導航菜單，右邊那一塊兒是我們將來所有的業(yè)務頁面存放的地方

② 上下結構布局好說，下面左右結構我們采用display:flex布局，但是問題就是寬度該怎么去設置，我們要實現菜單的收縮功能，寬度都是動態(tài)的變化的，右邊也要隨著左邊的變動而改變，結論就是，我們給左邊設置寬度為 width: auto，然后右邊不設置寬度，直接讓右邊寬度填滿剩下的右側，即給右側div設置flex: 1，這樣布局基本就可以了

③ 第三就是給el-menu 設置 class="el-menu-vertical" :collapse="isCollapse" 屬性，一個是class類名，我們一會兒需要用到（就是展開的時候的寬度），還一個是isCollapse，表示開啟折疊動畫

3. 完整代碼實現

<doc>
  容器頁面
</doc>
<template>
  <div class="main">
    <div class="layout-top"></div>
    <div class="layout-bottom">
      <!-- 左側 -->
      <div id="LayoutLeft" class="layout-left">
      <el-menu default-active="1" class="el-menu-vertical" :collapse="isCollapse">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">導航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分組一</span>
            <el-menu-item index="1-1">選項1</el-menu-item>
            <el-menu-item index="1-2">選項2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分組2">
            <el-menu-item index="1-3">選項3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">選項4</span>
            <el-menu-item index="1-4-1">選項1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">導航二</span>
        </el-menu-item>
      </el-menu>
        <!-- 控制菜單的收縮 -->
        <div @click="shrinkMenu" class="shrink">
          <i :class="isCollapse ? 'el-icon-s-unfold': 'el-icon-s-fold'"></i>
        </div>
      </div>
      <!-- 右側 -->
      <div id="LayoutRight" class="layout-right">
        <div class="layout-content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    isCollapse: {
      get() {
        return this.$store.state.common.isCollapse
      },
      set(val) {
        this.$store.commit('common/updateisCollapse', val)
      }
    }
  },
  methods: {
    shrinkMenu() {
      this.isCollapse = !this.isCollapse;
    }
  }
}
</script>
<style>
.main {
  width: 100vw;
  height: 100vh;
}
/* --- 上面部分 --- */
.layout-top {
  width: 100%;
  height: 60px;
  background: #b3c0d1;
}
 
/* ------ 下面部分 ------ */
.layout-bottom {
  width: 100%;
  height: calc(100% - 60px);
  /* flex布局 */
  display: flex;
}
.layout-left {
  /* 左側不設置寬度 */
  width: auto;
  height: 100%;
  background: #d3dce6;
  position: relative;
}
.layout-right {
  height: 100%;
  /* flex關鍵代碼，讓右側占滿剩余寬度 */
  flex: 1;
  background: #e9eef3;
  padding: 25px;
  box-sizing: border-box;
}
/* 將來所有的業(yè)務頁面容器 */
.layout-content {
  width: 100%;
  height: 100%;
  background: #fff;
}
 
/* el-menu相關樣式 */
.el-menu {
  height: 100%;
  border-right-width: 0;
}
/* 必須設置 */
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}
 
/* 控制菜單收縮 */
.shrink {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  width: 25px;
  height: 30px;
  border: 1px solid #b3c0d1;
  background: #b3c0d1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 9999;
}
</style>

注意：這里我把 isCollapse 存在了Vuex中，然后就是比較簡單的一些邏輯，大家稍微看下應該都能明白。

唯一的核心代碼我覺得就是下面的左右兩側寬度設置的問題，左側設置 width: auto，右側不設置寬度，設置 flex: 1，這是核心的代碼。另外還有個核心的是設置 el-menu 展開的寬度即：

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
}

這個也是核心，要不然的話，展開收縮的時候會有問題。

到此這篇關于element 實現導航欄收起展開功能及思路的文章就介紹到這了,更多相關element 導航欄收起展開內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue3中埋點指令封裝詳解
對于Vue項目來說，如果遇到一個埋點的需求，我們最好的解決方案就是封裝一個指令，所以本文就來和大家詳細講講具體是如何封裝埋點指令的吧
2023-08-08
Vue滾動頁面到指定位置的實現及避坑
這篇文章主要介紹了Vue滾動頁面到指定位置的實現及避坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue關閉eslint檢測的多種方式
在開發(fā)項目時遇到由于選擇了eslint導致的嚴格錯誤提示,如多個空格和多行報錯,解決方案包括在webpack.base.conf.js中進行配置修改,創(chuàng)建項目時避免選擇eslint,本文給大家介紹了Vue關閉eslint檢測的多種方法,需要的朋友可以參考下
2025-03-03
詳解vuejs幾種不同組件（頁面）間傳值的方式
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價值，有興趣的可以了解一下
2017-06-06
詳解vue-cli 接口代理配置
本篇主要介紹了vue-cli 接口代理配置，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-12-12
vue中的路由跳轉tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉tabBar圖片和文字的高亮效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue3動態(tài)路由(響應式帶參數的路由)變更頁面不刷新的問題解決辦法
問題來源是因為我的開源項目Maple-Boot項目的網站前端,因為項目主打的內容發(fā)布展示,所以其中的內容列表頁會根據不同的菜單進行渲染不同的路由,本文降介紹Vue3動態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下
2024-07-07
vue中實時監(jiān)聽div元素盒子的寬高方法
這篇文章主要給大家介紹了關于vue中如何實時監(jiān)聽div元素盒子的寬高的相關資料,在Vue中你可以使用Vue的計算屬性和偵聽器來動態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下
2023-09-09
淺談vue同一頁面中擁有兩個表單時,的驗證問題
今天小編就為大家分享一篇淺談vue同一頁面中擁有兩個表單時,的驗證問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
詳解用vue編寫彈出框組件
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07