element-ui 实现响应式导航栏的示例代码


Posted in Javascript onMay 08, 2020

开始之前

按照计划,前端使用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部分代码:

<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>

总结

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

到此这篇关于element-ui 实现响应式导航栏的示例代码的文章就介绍到这了,更多相关element 响应式导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
js实现文章目录索引导航(table of content)
May 10 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
VSCode搭建React Native环境
May 07 #Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 #Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 #Javascript
Javascript幻灯片播放功能实现过程解析
May 07 #Javascript
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
JavaScript中的事件委托及好处
2016/07/12 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
Python中的默认参数详解
2015/06/24 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python机器学习之神经网络(三)
2017/12/20 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
软件测试笔试题
2012/10/25 面试题
中文专业学生自我评价范文
2014/02/06 职场文书
工作总结与自我评价
2014/09/18 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
在人间读书笔记
2015/06/30 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书