深度解读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 相关文章推荐
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
详解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/03 日漫
给海燕B411配件机起死回生配上件
2021/03/02 无线电
JAVA/JSP学习系列之四
2006/10/09 PHP
用PHP创建PDF中文文档
2006/10/09 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
一个原生的用户等级的进度条
2010/07/03 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
2015/04/17 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
Python中的推导式使用详解
2015/06/03 Python
Python在线运行代码助手
2016/07/15 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python中字符串内置函数的用法总结
2018/09/13 Python
python实现XML解析的方法解析
2019/11/16 Python
python相对企业语言优势在哪
2020/06/12 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
就业推荐自我鉴定
2013/10/06 职场文书
2014年商场工作总结
2014/11/22 职场文书
2014年财政所工作总结
2014/11/22 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
超市督导岗位职责
2015/04/10 职场文书
大学生党课心得体会
2016/01/07 职场文书