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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
基于jquery的放大镜效果
May 30 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
js+div+css下拉导航菜单完整代码分享
Dec 28 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 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 模拟get_headers函数的代码示例
2013/04/27 PHP
解析php中反射的应用
2013/06/18 PHP
php基础设计模式大全(注册树模式、工厂模式、单列模式)
2015/08/31 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python3.7 sys模块的具体使用
2019/07/22 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
详细分析Python collections工具库
2020/07/16 Python
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers