Nine Pedestrians Mesmerized

    vue-element-resize-event

    0.1.0 • Public • Published

    vue-element-resize-event

    Version Downloads License

    AndroidFirefoxChromeIEiPhoneEdgeSafari
    >=4.4>=9
    ** vue-element-resize-event ** ,简称elresize,是一个扩展vue事件的插件,使其可以监听普通元素的resize事件。HTML中如果在窗口或框架被调整大小时发生resize事件,但是元素尺寸变化的时候却没有对应的事件。但是基于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>
    </doc>

    demo

    控件

    使用Elresize控件监听elresize事件:

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

    demo

    原理

    模拟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选用了第一种方法。

    Install

    npm i vue-element-resize-event

    DownloadsWeekly Downloads

    15

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    177 kB

    Total Files

    40

    Last publish

    Collaborators

    • laden666666