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

tdesign-mobile-vue

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var Vue = require('vue');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);

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 = Vue.ref(0);
  var resizeObserverInstance = null;
  var calculateHeight = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
      var currentElement;
      return _regeneratorRuntime__default["default"].wrap(function (_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 1;
            return Vue.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;
    }
  };
  Vue.onMounted(function () {
    if (immediate) {
      calculateHeight();
    }
    setupResizeObserver();
  });
  Vue.onUnmounted(function () {
    cleanupResizeObserver();
  });
  return {
    height: elementHeight,
    calculateHeight: calculateHeight
  };
}

exports["default"] = useElementHeight;
//# sourceMappingURL=useElementHeight.js.map