我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

element-ui如何实现响应式导航栏

这篇文章主要为大家展示了element-ui如何实现响应式导航栏,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

创新互联建站自2013年起,先为贵溪等服务建站,贵溪等地企业,进行企业商务咨询服务。为贵溪企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

开始之前

按照计划,前端使用Vue.js+Element UI,但在设计导航栏时,发现element没有提供传统意义上的页面顶部导航栏组件,只有一个可以用在很多需要选择tab场景的导航菜单,便决定在其基础上改造,由于我认为实现移动端良好的体验是必须的,所以便萌生了给其增加响应式功能的想法。

需求分析与拆解

假设我们的导航栏有logo和四个el-menu-item。

给window绑定监听事件,当宽度小于a时,四个链接全部放入右侧el-submenu的子菜单:

element-ui如何实现响应式导航栏

当宽度大于a时,右侧el-submenu不显示,左侧el-menu-item正常显示:

element-ui如何实现响应式导航栏

所以,先创建一个数组,存储所有所需的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() {
 window.onresize = () => {
 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部分代码:


 
 {{item.name}}
 
 
 {{item.name}}
 

总结

总的来说,一个丐版就算完成了,这里只提供了一种可能的思路,如需实践可以增加更多判断规则及功能。(主要是已经转用Vuetify啦~)

以上就是关于element-ui如何实现响应式导航栏的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。


分享文章:element-ui如何实现响应式导航栏
分享链接:http://mswzjz.cn/article/gescdj.html

其他资讯