vue菜單欄自適應折疊功能示例
更新時間：2023年01月16日 15:04:22 作者：迷路小灰灰
這篇文章主要介紹了vue菜單欄自適應折疊,我這里使用的是el-menu導航菜單，監(jiān)聽頁面寬度的改變，來改變導航菜單的折疊和展開，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
思路：我這里使用的是el-menu導航菜單，監(jiān)聽頁面寬度的改變，來改變導航菜單的折疊和展開。
上篇文章給大家介紹了Vue el-menu 左側菜單導航功能的實現(xiàn) 今天繼續(xù)介紹vue菜單欄示例。
一、在使用了el-menu的頁面下，通過watch監(jiān)聽寬度變化。
1.在方法里面定義
代碼如下（示例）：
mounted() {
var _this = this;
window.onresize = function () {
// 定義窗口大小變更通知事件
_this.screenWidth = document.documentElement.clientWidth; //窗口寬度
};
}, 2.在watch上里面引用
代碼如下（示例）：
watch: {
screenWidth: function (val) {
if (val < 1400) {
if (this.time) {
clearInterval(this.time);
}
this.time = setTimeout(() => {
this.time = null;
console.log("折疊");
}, 100);
} else {
if (this.time) {
clearInterval(this.time);
}
this.time = setTimeout(() => {
this.time = null;
console.log("展開");
}, 100);
}
},
}, 3.在data里定義變量
代碼如下（示例）：
data() {
return {
screenWidth: document.documentElement.clientWidth, //屏幕寬度
time: null,
};
},二、在el-menu中定義:collapse=“isCollapse”，isCollapse為false是展開，為true是折疊
三、將isCollapse的值用倉庫的值來定義，折疊和展開使用mutations來改變值
總結
例如：到此就是今天要講的內(nèi)容，本文僅僅簡單介紹了el-menu的使用，element提供了大量組件，但是要怎么使用需要我們自己去發(fā)掘。更多相關vue菜單欄自適應折疊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了Vue設置別名聯(lián)想路徑即@/生效的方法,文中有詳細的代碼示例和圖文講解,具有一定的參考價值,需要的朋友可以參考下2023-11-11
Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對象、變量操作,結合實例形式分析了vue.js使用Watch針對數(shù)組、對象、變量監(jiān)聽相關操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue開發(fā)拖拽進度條滑動組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本文主要給大家介紹基于vue的分頁原生寫法，代碼分為html部分和js部分，簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了vue中的自定義指令clickOutside，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法
今天小編就為大家分享一篇基于vue v-for 多層循環(huán)嵌套獲取行數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了VueJs打包之后遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了VUE+Canvas實現(xiàn)財神爺接元寶小游戲,需要的朋友可以參考下本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-04-04