tdesign-mobile-vue/lib/hooks/useElementHeight.js

tdesign-mobile-vue

/**
 * tdesign v1.12.1
 * (c) 2025 TDesign Group
 * @license MIT
 */

import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

function useElementHeight(target) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var _options$immediate = options.immediate,
    immediate = _options$immediate === void 0 ? true : _options$immediate,
    _options$resizeObserv = options.resizeObserver,
    resizeObserver = _options$resizeObserv === void 0 ? false : _options$resizeObserv;
  var elementHeight = ref(0);
  var resizeObserverInstance = null;
  var calculateHeight = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var currentElement;
      return _regeneratorRuntime.wrap(function (_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 1;
            return nextTick();
          case 1:
            currentElement = target.value;
            if (currentElement) {
              elementHeight.value = currentElement.getBoundingClientRect().height;
            }
          case 2:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function calculateHeight() {
      return _ref.apply(this, arguments);
    };
  }();
  var setupResizeObserver = function setupResizeObserver() {
    if (!resizeObserver) return;
    var currentElement = target.value;
    if (currentElement && window.ResizeObserver) {
      resizeObserverInstance = new ResizeObserver(function () {
        calculateHeight();
      });
      resizeObserverInstance.observe(currentElement);
    }
  };
  var cleanupResizeObserver = function cleanupResizeObserver() {
    if (resizeObserverInstance) {
      resizeObserverInstance.disconnect();
      resizeObserverInstance = null;
    }
  };
  onMounted(function () {
    if (immediate) {
      calculateHeight();
    }
    setupResizeObserver();
  });
  onUnmounted(function () {
    cleanupResizeObserver();
  });
  return {
    height: elementHeight,
    calculateHeight: calculateHeight
  };
}

export { useElementHeight as default };
//# sourceMappingURL=useElementHeight.js.map