observe-dom-resize

1.1.0 • Public • Published

observe-dom-resize

DOM元素监听尺寸变化


该插件通过一定巧妙的策略,使得任意元素可以监听resize 事件, 通过事件驱动回调,相比MutationObserver 或者循环检查 性能更高, 兼容ie9以上所有浏览器


安装方法

    npm install observe-dom-resize

示例

监听dom尺寸变化

    import {
        DOMObserver
        DOMObserverResize,
        DOMObserveWidth,
        DOMObserveHeight
    } from 'observer-dom-resize';
 
    const someDom = document.querySelector('.some');
    // 监听dom尺寸变化
    const unObserver1 = DOMObserver('resize', someDom, () => {
        console.log('DOM 尺寸发生变化了')
    })
 
    // 监听Dom 的Width变化
     const unObserver2 = DOMObserveWidth(someDom, () => {
        console.log('DOM width发生变化了');
    }); // ===  DOMObserver('width', someDom, ()=> {})
 
    // 监听Dom 的Height变化
    const unObserver3 = DOMObserveWidth(someDom, () => {
        console.log('DOM height发生变化了');
    }); // ===  DOMObserver('height', someDom, ()=> {})
 
    // 监听Dom 的resize变化
    const unObserver4 = DOMObserveResize(some, () => {
        console.log('DOM 尺寸发生变化了');
    }); // ===  DOMObserver('resize', someDom, ()=> {})
 
    // 取消监听dom
    unObserver1(); unObserver2(); unObserver3(); unObserver4();

Note: DOMObserver type 只能为 resize, width, height

Readme

Keywords

none

Package Sidebar

Install

npm i observe-dom-resize

Weekly Downloads

4

Version

1.1.0

License

MIT

Unpacked Size

37 kB

Total Files

11

Last publish

Collaborators

  • johnapache