73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { useBreakpoints, useWindowSize } from '@vueuse/core';
|
|
import { computed } from 'vue';
|
|
|
|
// 断点定义
|
|
export const breakpoints = {
|
|
xs: 0, // 手机竖屏 < 640px
|
|
sm: 640, // 手机横屏 ≥ 640px
|
|
md: 768, // 平板 ≥ 768px
|
|
lg: 1024, // 小桌面 ≥ 1024px
|
|
xl: 1280, // 桌面 ≥ 1280px
|
|
xxl: 1536, // 大桌面 ≥ 1536px
|
|
};
|
|
|
|
export function useResponsive() {
|
|
const bp = useBreakpoints(breakpoints);
|
|
|
|
// 设备类型判断
|
|
const isMobile = bp.smaller('md'); // < 768px
|
|
const isTablet = bp.between('md', 'lg'); // 768px - 1024px
|
|
const isDesktop = bp.greaterOrEqual('lg'); // ≥ 1024px
|
|
|
|
// 精确断点
|
|
const isXs = bp.smaller('sm'); // < 640px
|
|
const isSm = bp.between('sm', 'md'); // 640px - 768px
|
|
const isMd = bp.between('md', 'lg'); // 768px - 1024px
|
|
const isLg = bp.between('lg', 'xl'); // 1024px - 1280px
|
|
const isXl = bp.between('xl', 'xxl'); // 1280px - 1536px
|
|
const isXxl = bp.greater('xxl'); // > 1536px
|
|
|
|
// 监听窗口变化
|
|
const { width, height } = useWindowSize();
|
|
|
|
// 方向检测
|
|
const isPortrait = computed(() => height.value > width.value);
|
|
const isLandscape = computed(() => width.value > height.value);
|
|
|
|
// 当前断点名称
|
|
const currentBreakpoint = computed(() => {
|
|
if (isXs.value) return 'xs';
|
|
if (isSm.value) return 'sm';
|
|
if (isMd.value) return 'md';
|
|
if (isLg.value) return 'lg';
|
|
if (isXl.value) return 'xl';
|
|
return 'xxl';
|
|
});
|
|
|
|
return {
|
|
// 设备类型
|
|
isMobile,
|
|
isTablet,
|
|
isDesktop,
|
|
|
|
// 精确断点
|
|
isXs,
|
|
isSm,
|
|
isMd,
|
|
isLg,
|
|
isXl,
|
|
isXxl,
|
|
|
|
// 尺寸
|
|
width,
|
|
height,
|
|
|
|
// 方向
|
|
isPortrait,
|
|
isLandscape,
|
|
|
|
// 当前断点名称
|
|
currentBreakpoint,
|
|
};
|
|
}
|