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 控制展開與收起，需要的朋友可以參考下
上篇文章介紹了vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)，今天介紹下element 導(dǎo)航欄收起展開功能的實(shí)現(xiàn)思路。
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)航和切換對應(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)控制展開與收起和切換對應(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">
<!-- 插槽 插入一級導(dǎo)航標(biāo)題 -->
<template slot="title">
<i class="el-icon-s-tools"></i>
<span>工廠設(shè)置</span>
</template>
<!-- 二級導(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)航和切換對應(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)控制展開與收起和切換對應(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ǒ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類名，我們一會兒需要用到（就是展開的時(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í)候會有問題。
到此這篇關(guān)于element 實(shí)現(xiàn)導(dǎo)航欄收起展開功能及思路的文章就介紹到這了,更多相關(guān)element 導(dǎo)航欄收起展開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
對于Vue項(xiàng)目來說，如果遇到一個(gè)埋點(diǎn)的需求，我們最好的解決方案就是封裝一個(gè)指令，所以本文就來和大家詳細(xì)講講具體是如何封裝埋點(diǎn)指令的吧2023-08-08
Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑
這篇文章主要介紹了Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
在開發(fā)項(xiàng)目時(shí)遇到由于選擇了eslint導(dǎo)致的嚴(yán)格錯(cuò)誤提示,如多個(gè)空格和多行報(bào)錯(cuò),解決方案包括在webpack.base.conf.js中進(jìn)行配置修改,創(chuàng)建項(xiàng)目時(shí)避免選擇eslint,本文給大家介紹了Vue關(guān)閉eslint檢測的多種方法,需要的朋友可以參考下2025-03-03
本篇文章主要介紹了詳解vuejs幾種不同組件（頁面）間傳值的方式，具有一定的參考價(jià)值，有興趣的可以了解一下2017-06-06
本篇主要介紹了vue-cli 接口代理配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果
這篇文章主要介紹了vue中的路由跳轉(zhuǎn)tabBar圖片和文字的高亮效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁面不刷新的問題解決辦法
問題來源是因?yàn)槲业拈_源項(xiàng)目Maple-Boot項(xiàng)目的網(wǎng)站前端,因?yàn)轫?xiàng)目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁會根據(jù)不同的菜單進(jìn)行渲染不同的路由,本文降介紹Vue3動(dòng)態(tài)路由變更頁面不刷新的問題解決辦法,需要的朋友可以參考下2024-07-07
vue中實(shí)時(shí)監(jiān)聽div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽器來動(dòng)態(tài)監(jiān)測元素的高度,文中給出了簡單代碼示例,需要的朋友可以參考下2023-09-09
淺談vue同一頁面中擁有兩個(gè)表單時(shí),的驗(yàn)證問題
今天小編就為大家分享一篇淺談vue同一頁面中擁有兩個(gè)表單時(shí),的驗(yàn)證問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了詳解用vue編寫彈出框組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07