Awesome Open Source
Awesome Open Source

vue-element-resize-event

Version Downloads License

Android Firefox Chrome IE iPhone Edge Safari
>=4.4 >=9

vue-element-resize-event ,简称elresize,是一个扩展vue事件的插件,使vue可以监听普通元素的resize事件。HTML中如果在页面或框架被调整大小时会触发resize事件,但是普通元素尺寸变化的时候却没有对应的事件。 vue-element-resize-event 基于js的奇巧淫技可以模拟出这个事件。

源码

github码云

安装

npm install vue-element-resize-event

可以采用插件形式的全局安装:

import Vue from 'vue'
import * as ElResize from 'vue-element-resize-event'
Vue.use(ElResize)

也可以采用局部安装:

import {
    elresizeDirective,
    elresize,
} from 'vue-element-resize-event'

export default {
    ...
    directive: {
        elresizeDirective,
    }
    component: {
        elresize,
    },
}

使用

vue-element-resize-event提供了两种使用方式——directive和component。

指令

使用v-elresize指令监听elresize事件。要求v-elresize所在的元素的position值不能为static:

<div style="position: relative;" v-elresize @elresize="test"></div>

demo

控件

使用Elresize控件监听elresize事件:

<Elresize @elresize="test"></Elresize>

demo

原理

模拟resize事件目前主要有两种:

  • 方法一,监听scroll事件: 要求可以监听resize事件的元素的css的position属性不可以是static,然后创建两个和该元素等大的div,一个监听元素放大事件,一个监听元素缩小事件。两个子div都是绝对定位,并且css的visibility属性是hidden。通过在元素尺寸变化的时候,两个子div的onscroll事件来模拟该元素的resize事件。实现的例子有:KyleAMathews/element-resize-event

  • 方法二,监听object(iframe)的resize事件: 同样要求可以监听resize事件的元素的css的position属性不可以是static,然后创建一个iframe或者object。因为frame和object可以监听resize事件,所以只要要求frame或object和被监听元素等大,就可以让frame或object的resize事件实现该元素的resize事件了。实现的例子有:developit/simple-element-resize-detector

因为object(iframe)更耗费资源,而且会被CSP策略限制,所以vue-element-resize-event选用了第一种方法。


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,513,654
Vue (81,258
Events (2,108
Resize (259
Vue Plugin (219
Related Projects