深度解读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 相关文章推荐
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
原生javascript获取元素样式
Dec 31 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vue项目每30秒刷新1次接口的实现方法
Dec 04 Javascript
Vue函数式组件的应用实例详解
Aug 30 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
用Simple Excel导出xls实现方法
2012/12/06 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
解决Angular.Js与Django标签冲突的方案
2016/12/20 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
layui表格数据重载
2019/07/27 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python logging添加filter教程
2019/12/24 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python中with用法讲解
2020/02/07 Python
Python @property原理解析和用法实例
2020/02/11 Python
python如何写出表白程序
2020/06/01 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
SQL语言面试题
2013/08/27 面试题
歌唱比赛获奖感言
2014/01/21 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2015年党小组工作总结
2015/05/26 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python