深度解读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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
window.onload使用指南
Sep 13 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
Flask解决跨域的问题示例代码
2018/02/12 Python
Python入门之后再看点什么好?
2018/03/05 Python
python简易远程控制单线程版
2018/06/20 Python
OpenCV搞定腾讯滑块验证码的实现代码
2019/05/18 Python
python基于递归解决背包问题详解
2019/07/03 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python中xlutils库用法浅析
2020/12/29 Python
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
英文自荐信
2013/12/19 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
社区两委对照检查材料
2014/08/23 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
经理岗位职责范本
2015/04/15 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python基础知识学习之类的继承
2021/05/31 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android