@daysnap/vue-use/lib/useEventListener/index.js

daysnap vue hooks

import { watch, isRef, unref, onUnmounted, onDeactivated, onMounted, onActivated, } from 'vue';
export function useEventListener(type, listener, options = {}) {
    const { target = window, passive = false, capture = false } = options;
    let attached;
    const add = (target) => {
        let element = unref(target);
        if (element === null || element === void 0 ? void 0 : element.$el) {
            element = element.$el;
        }
        if (element && !attached) {
            element.addEventListener(type, listener, {
                capture,
                passive,
            });
            attached = true;
        }
    };
    const remove = (target) => {
        let element = unref(target);
        if (element === null || element === void 0 ? void 0 : element.$el) {
            element = element.$el;
        }
        if (element && attached) {
            element.removeEventListener(type, listener, capture);
            attached = false;
        }
    };
    onUnmounted(() => remove(target));
    onDeactivated(() => remove(target));
    onActivated(() => add(target));
    onMounted(() => add(target));
    if (isRef(target)) {
        watch(target, (val, oldVal) => {
            remove(oldVal);
            add(val);
        });
    }
}