useMutationObserver.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. var __rest = this && this.__rest || function (s, e) {
  2. var t = {};
  3. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  4. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  5. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  6. }
  7. return t;
  8. };
  9. import { tryOnScopeDispose } from './tryOnScopeDispose';
  10. import { watch } from 'vue';
  11. import { unrefElement } from './unrefElement';
  12. import { useSupported } from './useSupported';
  13. import { defaultWindow } from './_configurable';
  14. /**
  15. * Watch for changes being made to the DOM tree.
  16. *
  17. * @see https://vueuse.org/useMutationObserver
  18. * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
  19. * @param target
  20. * @param callback
  21. * @param options
  22. */
  23. export function useMutationObserver(target, callback) {
  24. let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  25. const {
  26. window = defaultWindow
  27. } = options,
  28. mutationOptions = __rest(options, ["window"]);
  29. let observer;
  30. const isSupported = useSupported(() => window && 'MutationObserver' in window);
  31. const cleanup = () => {
  32. if (observer) {
  33. observer.disconnect();
  34. observer = undefined;
  35. }
  36. };
  37. const stopWatch = watch(() => unrefElement(target), el => {
  38. cleanup();
  39. if (isSupported.value && window && el) {
  40. observer = new MutationObserver(callback);
  41. observer.observe(el, mutationOptions);
  42. }
  43. }, {
  44. immediate: true
  45. });
  46. const stop = () => {
  47. cleanup();
  48. stopWatch();
  49. };
  50. tryOnScopeDispose(stop);
  51. return {
  52. isSupported,
  53. stop
  54. };
  55. }