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

前言

作为一名优秀的前端来说，在平时的造火箭（拧螺丝）过程中，难免要遇到一个情况，就是当窗口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结构

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

再说一句

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

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

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

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

结语

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

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

最新评论