0.1.0 • Published 6 years ago
vue-element-resize-event v0.1.0
源码
安装
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>
</doc>
控件
使用Elresize控件监听elresize事件:
<Elresize @elresize="test"></Elresize>
原理
模拟resize事件目前主要有两种:
方法一,监听scroll事件: 要求可以监听resize事件的元素的css的position属性不可以是static,然后创建两个和该元素等大的div,一个监听元素放大事件,一个监听元素缩小事件。两个div都是绝对定位,并且css的visibility属性是hidden,同时使用js将水平和垂直滚动条的值都设置大最大。实现的例子有: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选用了第一种方法。