深度解读vue-resize的具体用法


Posted in Javascript onJuly 08, 2020

前言

作为一名优秀的前端来说,在平时的造火箭(拧螺丝)过程中,难免要遇到一个情况,就是当窗口resize的时候,我们要进行监听,常见的方案就是 element.addEventListener("resize", cb)

但是对于切过五彩斑斓的黑的你来说,肯定也知道,如果在短时间内多次resize窗口大小,那么我们这个的cb就会被调用多次,这样来说,性能太差了,这时我们会根据我们的业务需要,添加节流或者防抖,但这真的完美了吗

首先,我们要自己手动添加监听函数,其次注意性能问题,包括上面提到的防抖节流,还有在不需要的时候卸载监听函数,最后一个点就是,我们要在我们的元素上监听,或许这里有人说,又要马儿跑又让马儿不吃草,你想怎样,别急,接下来,我们就介绍 vue-resize 这个库

初步了解vue-resize

这个库是我在使用vue-lazyload的时候偶然发现的,因为里面就是用了 vue-resize 来进行resize事件的监听,使用方法也很简单,在position不为static的元素下面使用这个component就可以了

<template>
 <div class="demo">
 <h1>Hello world!</h1>
 <resize-observer @notify="handleResize" />
 </div>
</template>

<script>
export default {
 methods: {
 handleResize () {
  console.log('resized')
 }
 }
}
</script>

<style scoped>
.demo {
 position: relative;
}
</style>

到这里或许还有人说有什么神奇地方,我们这里看看下图生成的dom结构

深度解读vue-resize的具体用法

其中id为resized是我们要监听的元素,class为resize-observer是组件生成的dom,但是我们的resize监听不是挂载在上面,是里面的object的吗,也不是,而是在object里面的window里面,有点类似于iframe,这样做有什么好处呢,相当于我们把resize的监听放到一个sandbox里面,不受外层的干扰,而对于上层来说,我只需要监听resize就好了,而不用担心它被篡改

深度解读vue-resize的具体用法

再说一句

基本上我们已经知道vue-resize带来的好处,沙箱保护,全自动卸载,对于使用者来说,唯一的要求,就是元素的position不为static,这个库远不止这点干货,毕竟作者是vue team里面的。

首先我们可以看到,这个组件添加resize-observer,它的tabindex 为-1,这意味着,tab键不会调到这个元素上

深度解读vue-resize的具体用法

同时我们看下它的样式,scoped和宽度高度跟父元素一样没什么好说的了,我们需要注意的是,z-index为-1,background-color: transparent;pointer-events: none;opacity:0,基本把各种可能的结果都考虑进去了

深度解读vue-resize的具体用法

然后,是object元素的创建,aria-hidden为true和tabindex为-1,可以说对ARIA11的处理,真的很细节

深度解读vue-resize的具体用法

结语

可以看出,小小的resize还有这么大的学问在里面,同时对于细节的处理真的很好,路漫漫其修远兮,总有一天,希望会切出五光十色的白

到此这篇关于深度解读vue-resize的具体用法的文章就介绍到这了,更多相关vue-resize解读内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
Angular Material Icon使用详解
Nov 07 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 Javascript
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
详解React 条件渲染
Jul 08 #Javascript
webpack5 联邦模块介绍详解
Jul 08 #Javascript
实例讲解React 组件
Jul 07 #Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
php中的常用魔术方法总结
2013/08/02 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python实现配置文件备份的方法
2015/07/30 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
Python数据库小程序源代码
2019/09/15 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
项目资料员岗位职责
2013/12/10 职场文书
运动会入场口号
2014/06/07 职场文书
小学体育教学随笔
2015/08/14 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书