vite-uni-dev-tool/dist/v3/hooks/useContainerStyle.ts

vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试

import { onMounted, reactive, ref } from 'vue';
// import { console } from '@/dev/core';

/**
 *  顶部导航栏高度
 */
const navigateHeight = 44;

/**
 * 底部导航栏高度
 * 默认 50 可进行自定义
 * 微信小程序 默认就不是 50 , 模拟器 48  真机 49 ...
 *
 * 凸(艹皿艹 )
 *
 */
let tabHeight = 50;

/**
 * 计算因导航栏高度导致的调试器高度异常
 *
 * @param {Record<string, any>} [style]
 * @return {*}
 */
const useContainerStyle = (style?: Record<string, any>) => {
  const customStyle = reactive({
    ...(style || {
      height: '0px',
      boxSizing: 'border-box',
    }),
  });

  const contentHeight = ref(0);

  const contentType = ref('');

  onMounted(() => {
    let screenHeight: number = 0;
    let windowHeight: number = 0;
    let height: number = 0;
    let statusBarHeight: number = 0;

    if (uni.getWindowInfo) {
      const winInfo = uni.getWindowInfo();
      screenHeight = winInfo.screenHeight;
      windowHeight = winInfo.windowHeight;
      height = winInfo.safeArea.height;
      statusBarHeight = winInfo.statusBarHeight;
    } else {
      const sysInfo = uni.getSystemInfoSync();
      screenHeight = sysInfo.screenHeight;
      windowHeight = sysInfo.windowHeight;
      height = sysInfo.safeArea?.height ?? 0;
      statusBarHeight = sysInfo.statusBarHeight ?? 0;
    }

    const diff = screenHeight - windowHeight;
    const diffStatus = screenHeight - windowHeight - statusBarHeight;

    // console.log('diff: ', diff);
    // console.log('diffStatus: ', diffStatus);
    // console.log('windowHeight: ', windowHeight);
    // console.log('screenHeight: ', screenHeight);
    // console.log('statusBarHeight: ', statusBarHeight);

    // #ifdef !H5
    if (diffStatus === navigateHeight) {
      // console.log('当前页只存在 navigate: ');
      Object.assign(customStyle, {
        paddingTop: '0px',
        paddingBottom: tabHeight + 'px',
        height: windowHeight + 'px',
        boxSizing: 'border-box',
      });
      contentHeight.value = windowHeight - tabHeight;
      contentType.value = 'navigate';
    } else if (
      diff > navigateHeight &&
      diff < navigateHeight + statusBarHeight
    ) {
      // 当前页只存在 tab
      // console.log('当前页只存在 tab: ');
      // 微信模拟器中 navigateHeight 已经被计算到 windowHeight 中 ，导致高度计算异常
      // 暂时没有办法补偿 凸(艹皿艹 )

      Object.assign(customStyle, {
        paddingTop: navigateHeight + statusBarHeight + 'px',
        paddingBottom: 0,
        height: windowHeight + 'px',
        boxSizing: 'border-box',
      });

      // 最终算的结果和原有的 50 存在差距
      tabHeight = diff;
      contentHeight.value =
        screenHeight - navigateHeight - diff - statusBarHeight;
      contentType.value = 'tab';
    } else if (diff === 0) {
      // 当前页不存在 navigate 和 tab
      // console.log('当前页不存在 navigate 和 tab: ');

      Object.assign(customStyle, {
        paddingTop: navigateHeight + statusBarHeight + 'px',
        paddingBottom: tabHeight + 'px',
        height: windowHeight + 'px',
        boxSizing: 'border-box',
      });

      contentHeight.value =
        screenHeight - navigateHeight - tabHeight - statusBarHeight;
      contentType.value = '';
    } else {
      // 当前页存在 navigate 和 tab
      // console.log('当前页存在 navigate 和 tab: ');

      // 最终算的结果和原有的 50 存在差距
      tabHeight = diff - navigateHeight - statusBarHeight;

      Object.assign(customStyle, {
        paddingTop: '0px',
        paddingBottom: '0px',
        height: windowHeight + 'px',
        boxSizing: 'border-box',
      });
      contentHeight.value =
        screenHeight - tabHeight - navigateHeight - statusBarHeight;

      contentType.value = 'navigateAndTab';
    }

    // #endif

    // #ifdef H5
    Object.assign(customStyle, {
      paddingTop: '44px',
      paddingBottom: '50px',
      height: height + 'px',
      boxSizing: 'border-box',
    });
    contentHeight.value = height - 50 - 44;
    // #endif
    // console.log('tabHeight: ', tabHeight);
    // console.log('customStyle: ', customStyle);
  });

  return {
    contentType,
    customStyle,
    contentHeight,
  };
};

export default useContainerStyle;