import { ref } from 'vue';
|
import { ScreenSizeEnum } from '/@/enums/sizeEnum';
|
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
// 定义 useAdapt 方法参数
|
interface AdaptOptions {
|
// xl>1200
|
xl?: string | number;
|
// xl>992
|
lg?: string | number;
|
// xl>768
|
md?: string | number;
|
// xl>576
|
sm?: string | number;
|
// xl>480
|
xs?: string | number;
|
//xl<480默认值
|
mindef?: string | number;
|
//默认值
|
def?: string | number;
|
}
|
export function useAdapt(props?: AdaptOptions) {
|
//默认宽度
|
const width = ref<string | number>(props?.def || '600px');
|
//获取宽度
|
useWindowSizeFn(calcWidth, 100, { immediate: true });
|
//计算宽度
|
function calcWidth() {
|
let windowWidth = document.documentElement.clientWidth;
|
switch (true) {
|
case windowWidth > ScreenSizeEnum.XL:
|
width.value = props?.xl || '600px';
|
break;
|
case windowWidth > ScreenSizeEnum.LG:
|
width.value = props?.lg || '600px';
|
break;
|
case windowWidth > ScreenSizeEnum.MD:
|
width.value = props?.md || '600px';
|
break;
|
case windowWidth > ScreenSizeEnum.SM:
|
width.value = props?.sm || '500px';
|
break;
|
case windowWidth > ScreenSizeEnum.XS:
|
width.value = props?.xs || '400px';
|
break;
|
default:
|
width.value = props?.mindef || '300px';
|
break;
|
}
|
}
|
return { width, calcWidth };
|
}
|
