observerevent v2.0.6

Install

npm install observerevent -S

or

yarn add observerevent

Use

通过 script 标签引用

const { ObserverEvent } = observerEvent;
const observerEvent = new ObserverEvent(document.getElementById('echarts'));
//开始监听
function startListen() {
    observerEvent.$onEvent('resize', (target, contentRect) => {
        console.log('on');
        console.log('target', target);
        console.log('contentRect', contentRect);
    });
}
//关闭监听
function stopListen() {
    observerEvent.$offEvent('resize', () => {
        console.log('off');
    });
}

在 Vue-cli 中使用

import { ObserverEvent, ObserverResize } from 'observerevent';
<script>
export default {
	name: "App",
	mounted(){
		this.observerEvent = new ObserverEvent(this.$refs.echarts);
		this.addListener();
	},
	methods:{
	    addListener() {
		  this.observerEvent.$onEvent("resize", (target, contentRect) => {
			console.log("on");
			console.log("target", target);
			console.log("contentRect", contentRect);
			this.echartsInstance.resize();
		  });
		},
		removeListener() {
		  this.observerEvent.$offEvent("resize", () => {
			console.log("off");
		  });
		},
	}
}
</script>

在 react 中使用

import { ObserverEvent, ObserverResize } from 'observerevent';
const Home: React.FC = () => {
    const echartsRef = useRef(null);
    let observerEvent: any;

    useEffect(() => {
        observerEvent = new ObserverEvent(echartsRef.current);
        startListen();
    }, []);
    const startListen = () => {
        observerEvent.$onEvent('resize', (target: any, contentRect: any) => {
            console.log('on');
            console.log('target', target);
            console.log('contentRect', contentRect);
        });
    };

    const stopListen = () => {
        observerEvent.$offEvent('resize', () => {
            console.log('off');
        });
    };
    return (
        <div className='home'>
            <div className='contanier'>
                <div className='left'>left</div>
                <div className='right'>
                    <div className='echarts' ref={echartsRef}>
                        echarts
                    </div>
                </div>
            </div>

            <button>left</button>
            <button onClick={startListen}>开启监听</button>
            <button onClick={stopListen}>取消监听</button>
        </div>
    );
};

export default Home;

文档

说明

observerEvent的$onEvent方法只能传递字符串，而$onEvents只能传递数组，并且可以如下使用：

$onEvents(['resize','click'],callback)
$offEvents(['resize'],callback?)

意思是只移除resize事件，那么click事件还会保留