快捷導(dǎo)航

element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼

更新時(shí)間：2020年05月08日 09:18:52 作者：Radoapx

這篇文章主要介紹了element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

開(kāi)始之前

按照計(jì)劃，前端使用Vue.js+Element UI，但在設(shè)計(jì)導(dǎo)航欄時(shí)，發(fā)現(xiàn)element沒(méi)有提供傳統(tǒng)意義上的頁(yè)面頂部導(dǎo)航欄組件，只有一個(gè)可以用在很多需要選擇tab場(chǎng)景的導(dǎo)航菜單，便決定在其基礎(chǔ)上改造，由于我認(rèn)為實(shí)現(xiàn)移動(dòng)端良好的體驗(yàn)是必須的，所以便萌生了給其增加響應(yīng)式功能的想法。

需求分析與拆解

假設(shè)我們的導(dǎo)航欄有l(wèi)ogo和四個(gè)el-menu-item。

給window綁定監(jiān)聽(tīng)事件，當(dāng)寬度小于a時(shí)，四個(gè)鏈接全部放入右側(cè)el-submenu的子菜單：

當(dāng)寬度大于a時(shí)，右側(cè)el-submenu不顯示，左側(cè)el-menu-item正常顯示：

所以，先創(chuàng)建一個(gè)數(shù)組，存儲(chǔ)所有所需的item：

navItems: [
 { name: "Home", indexPath: "/home", index: "1" },
 { name: "Subscribe", indexPath: "/subscribe", index: "2"},
 { name: "About", indexPath: "/about", index: "3" },
 { name: "More", indexPath: "/more", index: "4" }
]

監(jiān)聽(tīng)寬度

很明顯功能實(shí)現(xiàn)的關(guān)鍵是隨時(shí)監(jiān)聽(tīng)窗口的變化，根據(jù)對(duì)應(yīng)的寬度做出響應(yīng)，在data中，我使用screenWidth變量來(lái)存儲(chǔ)窗口大小,保存初始打開(kāi)頁(yè)面時(shí)的寬度:

data() {
 return {
 screenWidth: document.body.clientWidth
 ......
 }
}

接下來(lái)在mounted中綁定屏幕監(jiān)聽(tīng)事件，將最新的可用屏幕寬度賦給screenWidth：

mounted() {
 window.onresize = () => {
 this.screenWidth = document.body.clientWidth
 }
}

(關(guān)于document和window中N多的關(guān)于高度和寬度的屬性，可以參考這篇文章。)

為了防止頻繁觸發(fā)resize函數(shù)導(dǎo)致頁(yè)面卡頓，可以使用一個(gè)定時(shí)器，控制下screenWidth更新的頻率：

watch: {
 screenWidth(newValue) {
 // 為了避免頻繁觸發(fā)resize函數(shù)導(dǎo)致頁(yè)面卡頓，使用定時(shí)器
 if (!this.timer) {
  // 一旦監(jiān)聽(tīng)到的screenWidth值改變，就將其重新賦給data里的screenWidth
  this.screenWidth = newValue;
  this.timer = true;
  setTimeout(() => {
  //console.log(this.screenWidth);
  this.timer = false;
  }, 400);
 }
 }
}

顯示

有了屏幕寬度的實(shí)時(shí)數(shù)據(jù)后，就可以以computed的方式控制menuItem了。

computed: {
 ...
 leftNavItems: function() {
 return this.screenWidth >= 600 ? this.navItems : {};
 },
 rightNavItems: function() {
 return this.screenWidth < 600 ? this.navItems : {};
 }
},

通過(guò)簡(jiǎn)單的判斷即可在窗口寬度變化時(shí)，將菜單里的內(nèi)容放入預(yù)先設(shè)置的正常菜單或者當(dāng)寬度小于600時(shí)顯示的右側(cè)下拉菜單,附上html部分代碼：

<el-menu text-color="#2d2d2d" id="navid" class="nav" mode="horizontal" @select="handleSelect">
 <el-menu-item class="logo" index="0" route="/home">
 <img class="logoimg" src="../assets/img/logo.png" alt="logo" />
 </el-menu-item>
 <el-menu-item
 :key="key"
 v-for="(item,key) in leftNavItems"
 :index="item.index"
 :route="item.activeIndex"
 >{{item.name}}</el-menu-item>
 <el-submenu
 style="float:right;"
 class="right-item"
 v-if="Object.keys(rightNavItems).length === 0?false:true"
 index="10"
 >
 <template slot="title">
  <i class="el-icon-s-fold" style="font-size:28px;color:#2d2d2d;"></i>
 </template>
 <el-menu-item
  :key="key"
  v-for="(item,key) in rightNavItems"
  :index="item.index"
  :route="item.activeIndex"
 >{{item.name}}</el-menu-item>
 </el-submenu>
</el-menu>

總結(jié)

總的來(lái)說(shuō)，一個(gè)丐版就算完成了，這里只提供了一種可能的思路，如需實(shí)踐可以增加更多判斷規(guī)則及功能。（主要是已經(jīng)轉(zhuǎn)用Vuetify啦~）

到此這篇關(guān)于element-ui 實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄的示例代碼的文章就介紹到這了,更多相關(guān)element 響應(yīng)式導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: