element?實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路

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

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

element 導(dǎo)航欄收起展開

實(shí)現(xiàn)思路

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

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

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

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

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

4. 展開和收起按鈕利用兩個(gè) icon 圖標(biāo)，通過點(diǎn)擊事件來動(dòng)態(tài)控制顯示與隱藏。

   <el-header>
          <!-- 點(diǎn)擊展開收起導(dǎo)航和切換對(duì)應(yīng)圖標(biāo) -->
          <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, //導(dǎo)航欄默認(rèn)為展開
      toggle: false,//第二個(gè)圖標(biāo)默認(rèn)隱藏
      block: true,//默認(rèn)顯示第一個(gè)圖標(biāo)
    };
  },
};

6. methods 中的點(diǎn)擊事件。

  methods: {
    // 動(dòng)態(tài)控制展開與收起和切換對(duì)應(yīng)圖標(biāo)
    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一樣動(dòng)態(tài)控制 -->
      <el-aside width="collapse">
        <!-- :collapse="isCollapse"  class="el-menu-vertical" 動(dòng)態(tài)控制導(dǎo)航菜單的收起與展開  router：讓index作為 path 進(jìn)行路由跳轉(zhuǎn) -->
        <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">
            <!-- 插槽 插入一級(jí)導(dǎo)航標(biāo)題 -->
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>工廠設(shè)置</span>
            </template>
            <!-- 二級(jí)導(dǎo)航標(biāo)題 -->
            <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">
            <!-- 點(diǎn)擊展開收起導(dǎo)航和切換對(duì)應(yīng)圖標(biāo) -->
            <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, //導(dǎo)航欄默認(rèn)為展開
      toggle: false, //第二個(gè)圖標(biāo)默認(rèn)隱藏
      block: true, //默認(rèn)顯示第一個(gè)圖標(biāo)
    };
  },
  methods: {
    // 動(dòng)態(tài)控制展開與收起和切換對(duì)應(yīng)圖標(biāo)
    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結(jié)合element-ui實(shí)現(xiàn)導(dǎo)航菜單展開收縮小功能

1. 先上個(gè)效果圖

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

2. 問題思路想法

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

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

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

3. 完整代碼實(shí)現(xiàn)

<doc>
  容器頁面
</doc>
<template>
  <div class="main">
    <div class="layout-top"></div>
    <div class="layout-bottom">
      <!-- 左側(cè) -->
      <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">導(dǎo)航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分組一</span>
            <el-menu-item index="1-1">選項(xiàng)1</el-menu-item>
            <el-menu-item index="1-2">選項(xiàng)2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分組2">
            <el-menu-item index="1-3">選項(xiàng)3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">選項(xiàng)4</span>
            <el-menu-item index="1-4-1">選項(xiàng)1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">導(dǎo)航二</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>
      <!-- 右側(cè) -->
      <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 {
  /* 左側(cè)不設(shè)置寬度 */
  width: auto;
  height: 100%;
  background: #d3dce6;
  position: relative;
}
.layout-right {
  height: 100%;
  /* flex關(guān)鍵代碼，讓右側(cè)占滿剩余寬度 */
  flex: 1;
  background: #e9eef3;
  padding: 25px;
  box-sizing: border-box;
}
/* 將來所有的業(yè)務(wù)頁面容器 */
.layout-content {
  width: 100%;
  height: 100%;
  background: #fff;
}
 
/* el-menu相關(guān)樣式 */
.el-menu {
  height: 100%;
  border-right-width: 0;
}
/* 必須設(shè)置 */
.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中，然后就是比較簡單的一些邏輯，大家稍微看下應(yīng)該都能明白。

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

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

這個(gè)也是核心，要不然的話，展開收縮的時(shí)候會(huì)有問題。

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

您可能感興趣的文章: