深度解读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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
Vue响应式原理详解
Apr 18 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
vue+Element-ui前端实现分页效果
Nov 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
深入了解php4(1)--回到未来
2006/10/09 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php实现字符串翻转的方法
2015/03/27 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
python使用wxpython开发简单记事本的方法
2015/05/20 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
python开发一款翻译工具
2020/10/10 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
DBA的职责都有哪些
2012/05/16 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
年度考核自我鉴定
2014/02/02 职场文书
挂科检讨书范文
2014/02/20 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
小学数学教研活动总结
2014/07/01 职场文书
医学生自荐信范文
2015/03/05 职场文书
2015年餐厅服务员工作总结
2015/04/23 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Python操作CSV格式文件的方法大全
2021/07/15 Python
SQL写法--行行比较
2021/08/23 SQL Server