这篇文章主要为大家展示了element-ui如何实现响应式导航栏,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
按照计划,前端使用Vue。js + UI元素,但在设计导航栏时,发现元素没有提供传统意义上的页面顶部导航栏组件,只有一个可以用在很多需要选择选项卡场景的导航菜单,便决定在其基础上改造,由于我认为实现移动端良好的体验是必须的,所以便萌生了给其增加响应式功能的想法。
假设我们的导航栏有标志和四个el-menu-item。
给窗口绑定监听事件,当宽度小于时,四个链接全部放入右侧el-submenu的子菜单:
navitem:(
{名称:“Home" indexPath:“/Home",指数:“1”;},
{名称:“Subscribe" indexPath:“/Subscribe",指数:“2“;},
{名称:“About" indexPath:“/About",指数:“3”;},
{名称:“More" indexPath:“/More",指数:“4”;}
)
很明显功能实现的关键是随时监听窗口的变化,根据对应的宽度做出响应,在数据中,我使用screenWidth变量来存储窗口大小,保存初始打开页面时的宽度:
接下来在安装中绑定屏幕监听事件,将最新的可用屏幕宽度赋给screenWidth:
(关于文档和窗口中N多的关于高度和宽度的属性,可以参考这篇文章)。
为了防止频繁触发调整函数导致页面卡顿,可以使用一个定时器、控制下screenWidth更新的频率:
看:{
screenWidth (newValue) {//为了避免频繁触发调整函数导致页面卡顿,使用定时器
如果(! this.timer) {//一旦监听到的screenWidth值改变,就将其重新赋给数据里的screenWidth
这一点。screenWidth=newValue;
这一点。计时器=true;
setTimeout(()=比;{//console.log (this.screenWidth);
这一点。计时器=false;
},400);
}
}
}
有了屏幕宽度的实时数据后,就可以以计算的方式控制子菜单了。
计算:{
…
leftNavItems:函数(){
返回。screenWidth祝辞=600,# 63;这一点。navitem: {};
},
rightNavItems:函数(){
返回。screenWidth & lt;600年,# 63;这一点。navitem: {};
}
}, 通过简单的判断即可在窗口宽度变化时,将菜单里的内容放入预先设置的正常菜单或者当宽度小于600时显示的右侧下拉菜单,附上html部分代码:
总的来说,一个丐版就算完成了,这里只提供了一种可能的思路,如需实践可以增加更多判断规则及功能。(主要是已经转用Vuetify啦~)
以上就是关于element-ui如何实现响应式导航栏的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看的到。
