@fesjs/fes-design/es/modal/useContentMaxHeight.js

fes-design for PC

import { ref, computed, nextTick } from 'vue';
import { isNumber, isString } from 'lodash-es';
import { useWindowSize } from '@vueuse/core';
import useResize from '../_util/use/useResize';
import { depx } from '../_util/utils';

const useContentMaxHeight = (styles, props) => {
  const modalRef = ref(null);
  const modalHeaderRef = ref(null);
  const modalFooterRef = ref(null);
  const modalHeaderHight = ref(0);
  const modalFooterHight = ref(0);

  // 获取响应式的窗口高度
  const {
    height: windowHeight
  } = useWindowSize();

  // let isCalculate = false;

  const marginTop = computed(() => {
    return isNumber(styles.value.marginTop) ? styles.value.marginTop : Number.parseFloat(styles.value.marginTop);
  });
  const marginBottom = computed(() => {
    return isNumber(styles.value.marginBottom) ? styles.value.marginBottom : Number.parseFloat(styles.value.marginBottom);
  });
  const modalStyle = computed(() => {
    return modalRef.value && window.getComputedStyle(modalRef.value);
  });
  const paddingTop = computed(() => {
    var _modalStyle$value;
    return Number.parseFloat((_modalStyle$value = modalStyle.value) === null || _modalStyle$value === void 0 ? void 0 : _modalStyle$value.paddingTop);
  });
  const paddingBottom = computed(() => {
    var _modalStyle$value2;
    return Number.parseFloat((_modalStyle$value2 = modalStyle.value) === null || _modalStyle$value2 === void 0 ? void 0 : _modalStyle$value2.paddingBottom);
  });

  // 最大场景的弹窗高度
  const realMaxHeight = computed(() => {
    return windowHeight.value - marginTop.value - marginBottom.value;
  });

  // 用户设定的最大弹窗高度，支持百分比 'xxx%'字符串和固定值数字,算出来具体的px
  const currentMaxModalHeight = computed(() => {
    if (props.maxHeight) {
      if (isNumber(props.maxHeight)) {
        return props.maxHeight;
      } else if (isString(props.maxHeight) && props.maxHeight.endsWith('px')) {
        // px字符串 解析字符串的数字
        return depx(props.maxHeight);
      } else if (isString(props.maxHeight) && props.maxHeight.endsWith('%')) {
        // %字符串 解析字符串的数字，算出百分比对应的高度px
        return Number.parseFloat(props.maxHeight) / 100 * windowHeight.value;
      } else {
        console.warn('[FModal] maxHeight 仅支持 px、%、数值格式');
      }
    }
    return undefined;
  });

  // 实际滚动区域的高度
  const contentMaxHeight = computed(() => {
    // 最大场景的内容高度
    const maxContentHeight = windowHeight.value - marginTop.value - marginBottom.value - modalHeaderHight.value - modalFooterHight.value - paddingTop.value - paddingBottom.value;
    if (maxContentHeight < 100) {
      return 100;
      // 如果最大场景的弹窗高度 小于用户设定的弹窗高度值，返回最大场景的内容高
    } else if (realMaxHeight.value <= currentMaxModalHeight.value) {
      return maxContentHeight;
    } else {
      return currentMaxModalHeight.value - modalHeaderHight.value - modalFooterHight.value - paddingTop.value - paddingBottom.value;
    }
  });
  const hasMaxHeight = computed(() => Boolean(currentMaxModalHeight.value));

  // 监听头部和底部的变化
  useResize(modalHeaderRef, async () => {
    var _modalHeaderRef$value;
    await nextTick();
    modalHeaderHight.value = (_modalHeaderRef$value = modalHeaderRef.value) === null || _modalHeaderRef$value === void 0 ? void 0 : _modalHeaderRef$value.offsetHeight;
  }, hasMaxHeight.value);
  useResize(modalFooterRef, async () => {
    var _modalFooterRef$value;
    await nextTick();
    modalFooterHight.value = (_modalFooterRef$value = modalFooterRef.value) === null || _modalFooterRef$value === void 0 ? void 0 : _modalFooterRef$value.offsetHeight;
  }, hasMaxHeight.value);
  return {
    modalRef,
    modalHeaderRef,
    modalFooterRef,
    contentMaxHeight,
    hasMaxHeight
  };
};

export { useContentMaxHeight };