vue-hooks-plus/lib/useResizeObserver/index.js

Vue hooks library

"use strict";
const vue = require("vue");
const domTarget = require("../utils/domTarget");
function useResizeObserver(target, callback, options) {
  const { box = "content-box", ...argsOptions } = options != null ? options : {};
  const isSupported = vue.ref(window && "ResizeObserver" in window);
  let ob;
  const modelTargets = vue.computed(
    () => Array.isArray(target) ? target.map((curr) => domTarget.getTargetElement(curr)) : [domTarget.getTargetElement(target)]
  );
  const dispose = () => {
    if (ob) {
      ob.disconnect();
      ob = null;
    }
  };
  const watcher = vue.watch(
    modelTargets,
    (elements) => {
      dispose();
      if (isSupported.value && window) {
        ob = new ResizeObserver(callback);
        elements.forEach((curr) => {
          curr && ob.observe(curr, {
            box,
            ...argsOptions
          });
        });
      }
    },
    {
      flush: "post",
      immediate: true
    }
  );
  const stop = () => {
    dispose();
    watcher();
  };
  if (vue.getCurrentScope()) {
    vue.onScopeDispose(stop);
  }
  return {
    isSupported,
    stop
  };
}
module.exports = useResizeObserver;