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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
javascript打开word文档的方法
Apr 16 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
对vue里函数的调用顺序介绍
Mar 17 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
PHPShop存在多个安全漏洞
2006/10/09 PHP
php加密解密实用类分享
2014/01/07 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
微信小程序:报错(in promise) MiniProgramError
2020/10/30 Javascript
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
DBA数据库管理员JAVA程序员架构师必看
2016/02/07 面试题
linux面试题参考答案(11)
2012/05/01 面试题
土木工程应届生自荐信
2013/09/24 职场文书
无故旷工检讨书
2014/01/26 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
科学发展观标语
2014/10/08 职场文书
学习保证书
2015/01/17 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js