@opensig/opendesign/es/hooks/use-screen.mjs

import { ref, computed, onMounted, onUnmounted } from "vue";
import { isTouchDevice } from "../_utils/is.mjs";
import { mediaPoint, Breakpoints } from "../_utils/global.mjs";
const DEFAULT_SCREEN_SIZE = 1920;
const useScreen = () => {
  const width = ref(DEFAULT_SCREEN_SIZE);
  const isPhoneSize = computed(() => width.value <= mediaPoint.value.phone);
  const isPadSize = computed(() => width.value > mediaPoint.value.phone && width.value <= mediaPoint.value.pad);
  const isPhonePadSize = computed(() => {
    return isPadSize.value || isPhoneSize.value;
  });
  const isPhonePad = computed(() => {
    return isTouchDevice && isPhonePadSize.value;
  });
  const onResize = () => {
    width.value = window.innerWidth;
  };
  onMounted(() => {
    onResize();
    window.addEventListener("resize", onResize);
  });
  onUnmounted(() => {
    window.removeEventListener("resize", onResize);
  });
  const isPhone = computed(() => width.value <= mediaPoint.value[Breakpoints.Phone]);
  const gtPhone = computed(() => width.value > mediaPoint.value[Breakpoints.Phone]);
  const lePadV = computed(() => width.value <= mediaPoint.value[Breakpoints.PadV]);
  const isPadV = computed(() => gtPhone.value && lePadV.value);
  const gtPadV = computed(() => width.value > mediaPoint.value[Breakpoints.PadV]);
  const lePadH = computed(() => width.value <= mediaPoint.value[Breakpoints.PadH]);
  const isPadH = computed(() => gtPadV.value && lePadH.value);
  const gtPadH = computed(() => width.value > mediaPoint.value[Breakpoints.PadH]);
  const leLaptop = computed(() => width.value <= mediaPoint.value[Breakpoints.Laptop]);
  const isLaptop = computed(() => gtPadH.value && leLaptop.value);
  const gtLaptop = computed(() => width.value > mediaPoint.value[Breakpoints.Laptop]);
  const lePc = computed(() => width.value <= mediaPoint.value[Breakpoints.Pc]);
  const isPc = computed(() => gtLaptop.value && lePc.value);
  const gtPc = computed(() => width.value > mediaPoint.value[Breakpoints.Pc]);
  return {
    isTouchDevice,
    // 旧断点（已废弃，保留向后兼容）
    isPhoneSize,
    isPadSize,
    isPhonePadSize,
    isPhonePad,
    // 新断点
    isPhone,
    gtPhone,
    lePadV,
    isPadV,
    gtPadV,
    lePadH,
    isPadH,
    gtPadH,
    leLaptop,
    isLaptop,
    gtLaptop,
    lePc,
    isPc,
    gtPc
  };
};
export {
  useScreen
};