element-ui实现响应式导航栏的⽰例代码
开始之前
按照计划，前端使⽤Vue.js+Element UI，但在设计导航栏时，发现element没有提供传统意义上的页⾯顶部导航栏组件，只有⼀个可以⽤在很多需要选择tab场景的导航菜单，便决定在其基础上改造，由于我认为实现移动端良好的体验是必须的，所以便萌⽣了给其增加响应式功能的想法。
导航菜单需求分析与拆解
假设我们的导航栏有logo和四个el-menu-item。
给window绑定监听事件，当宽度⼩于a时，四个链接全部放⼊右侧el-submenu的⼦菜单：
当宽度⼤于a时，右侧el-submenu不显⽰，左侧el-menu-item正常显⽰：
所以，先创建⼀个数组，存储所有所需的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" }
]
监听宽度
很明显功能实现的关键是随时监听窗⼝的变化，根据对应的宽度做出响应，在data中，我使⽤screenWidth变量来存储窗⼝⼤⼩，保存初始打开页⾯时的宽度:
data() {
return {
screenWidth: document.body.clientWidth
......
}
}
接下来在mounted中绑定屏幕监听事件，将最新的可⽤屏幕宽度赋给screenWidth：
mounted() {
this.screenWidth = document.body.clientWidth
}
}
(关于document和window中N多的关于⾼度和宽度的属性，可以参考。)
为了防⽌频繁触发resize函数导致页⾯卡顿，可以使⽤⼀个定时器，控制下screenWidth更新的频率：
watch: {
screenWidth(newValue) {
/
/ 为了避免频繁触发resize函数导致页⾯卡顿，使⽤定时器
if (!this.timer) {
// ⼀旦监听到的screenWidth值改变，就将其重新赋给data⾥的screenWidth
this.screenWidth = newValue;
this.timer = true;
setTimeout(() => {
//console.log(this.screenWidth);
this.timer = false;
}, 400);
}
}
}
显⽰
有了屏幕宽度的实时数据后，就可以以computed的⽅式控制menuItem了。
computed: {
...
leftNavItems: function() {
return this.screenWidth >= 600 ? this.navItems : {};
},
rightNavItems: function() {
return this.screenWidth < 600 ? this.navItems : {};
}
},
通过简单的判断即可在窗⼝宽度变化时，将菜单⾥的内容放⼊预先设置的正常菜单或者当宽度⼩于600时显⽰的右侧下拉菜单，附上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
class="right-item"
v-if="Object.keys(rightNavItems).length === 0?false:true"
index="10"
>
<template slot="title">
<i class="el-icon-s-fold" ></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>
总结
总的来说，⼀个丐版就算完成了，这⾥只提供了⼀种可能的思路，如需实践可以增加更多判断规则及功能。（主要是已经转⽤Vuetify啦~）
到此这篇关于element-ui 实现响应式导航栏的⽰例代码的⽂章就介绍到这了，更多相关element 响应式导航栏内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。