快捷導(dǎo)航

vue使用elementui的el-menu的折疊菜單collapse示例詳解

更新時間：2023年12月07日 11:31:09 作者：打不著的大喇叭

這篇文章主要介紹了vue使用elementui的el-menu的折疊菜單collapse示例詳解,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下

由于我的是在el-menu所在組件外面的兄弟組件設(shè)置是否折疊的控制，我用事件總線bus進(jìn)行是否折疊傳遞

參數(shù)	說明	類型	可選值	默認(rèn)值
collapse	是否水平折疊收起菜單（僅在 mode 為 vertical 時可用）	boolean	—	false
background-color	菜單的背景色（僅支持 hex 格式）	string	—	#ffffff
text-color	菜單的文字顏色（僅支持 hex 格式）	string	—	#303133
active-text-color	當(dāng)前激活菜單的文字顏色（僅支持 hex 格式）	string	—	#409EFF
default-active	當(dāng)前激活菜單的 index	string	—	—
unique-opened	是否只保持一個子菜單的展開	boolean	—	false
router	是否使用 vue-router 的模式，啟用該模式會在激活導(dǎo)航時以 index 作為 path 進(jìn)行路由跳轉(zhuǎn)	boolean	—	false

在左邊的折疊菜單組件中，

<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    background-color="#001529"
    text-color="#fff"
    active-text-color="#1378e6"
    :unique-opened="true"
    :collapse="iscollapse"
  >
    <h2 class="title">A2</h2>
    <el-submenu index="/">
      <template slot="title">
        <i class="el-icon-s-home"></i>
        <span>首頁</span>
      </template>
      <el-menu-item index="/everydayCheck">每日質(zhì)檢</el-menu-item>
      <el-menu-item index="/order">采購訂單</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name: "Menu",
  data() {
    return {
      // 在 el-menu 中綁定 :collapse="iscollapse" ，預(yù)設(shè)值為 false，展開菜單
      iscollapse: false,
    };
  },
  mounted() {
    // 用事件總線綁定事件，兄弟組件觸發(fā)后，就傳遞參數(shù)true/false，控制是否展開
    this.$bus.$on("clickCollapse", (iscollapse) => {
      this.iscollapse = iscollapse;
    });
  },
};
</script>
<style scoped>
/* 設(shè)置展開寬度，不至于收縮出現(xiàn)bug */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.title {
  margin: 20px 0 0 20px;
  color: #fff;
}
.el-menu {
  border-right: 0;
  height: 100vh;
}
.el-menu /deep/.el-submenu__title {
  font-size: 13px !important;
}
.el-menu-vertical-demo {
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>

在右邊的兄弟控制折疊菜單的組件中，

<template>
  <div class="container">
    <div class="left">
      <i :class="iscollapse" @click="clickCollapse"></i>
      <h6>歡迎進(jìn)入 管理臺</h6>
      <span>內(nèi)部系統(tǒng)使用手冊 ></span>
    </div>
    <div class="right">
      <span><i class="el-icon-date"></i>授課日程</span>
      <span><i class="el-icon-tickets"></i>導(dǎo)入/導(dǎo)出任務(wù)</span>
      <span class="user">
        <img src="./images/headPortrait.gif" alt="" />
        泡泡龍
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      // elementui中的字體圖標(biāo)
      iscollapse: "el-icon-s-fold",
      // 傳值flag閥門
      flag: false,
    };
  },
  methods: {
    clickCollapse() {
      // 1、每次傳遞先取反
      // 2、觸發(fā)事件總線的折疊事件，傳值判斷是否折疊
      // 3、三元表達(dá)式改變折疊按鈕的圖標(biāo)
      this.flag = !this.flag;
      this.$bus.$emit("clickCollapse", this.flag);
      this.iscollapse =
        this.flag == true ? "el-icon-s-unfold" : "el-icon-s-fold";
    },
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 0 15px;
  font-size: 13px;
  height: 58px;
  border-bottom: 1px solid #cecece;
}
.container > div {
  display: flex;
  align-items: center;
}
.left i {
  padding: 5px;
  font-size: 23px;
  cursor: pointer;
}
.left h6 {
  margin: 0 20px 0 10px;
}
.left span {
  color: #3f9cfb;
  font-weight: 700;
}
.right span > i {
  margin-right: 5px;
}
.right span:nth-child(1) {
  color: #ff6b00;
  font-weight: 700;
}
.right span:nth-child(2) {
  margin: 0 20px;
  color: #6c6c6c;
}
.right span:nth-child(3) {
  font-weight: 700;
  color: #101010;
}
.right .user {
  display: flex;
  align-items: center;
}
.right .user img {
  margin-right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 20%;
}
</style>

到此這篇關(guān)于vue使用elementui的el-menu的折疊菜單collapse的文章就介紹到這了,更多相關(guān)vue el-menu折疊菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: