123
parent
486f2ea9bb
commit
bfa6690a4d
@ -1,3 +1,3 @@
|
|||||||
export const sizes = [
|
export const sizes = [
|
||||||
{maxWidth:'375px'}, {maxWidth:'768px'}, {maxWidth:'1440px'}, {maxWidth:'1920px'}
|
{minWidth:'375px',maxWidth:'768px'}, {minWidth:'768px',maxWidth:'1440px'}, {minWidth:'1440px',maxWidth: '1920px'}, {minWidth:'1920px'}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,46 +1,60 @@
|
|||||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
export function useAdaptation(sizes, handleChange) {
|
import debounce from 'lodash/debounce'
|
||||||
const mediaQueryLists = sizes.map(size => window.matchMedia(`(max-width: ${size.maxWidth})`));
|
|
||||||
const currentDevice = ref(getCurrentDevice())
|
export function useAdaptation(ranges, handleChange) {
|
||||||
function getCurrentDevice() {
|
// 创建 media query 对象列表
|
||||||
|
const mediaQueryLists = ranges.map(range => {
|
||||||
|
const minQuery = range.minWidth ? window.matchMedia(`(min-width: ${range.minWidth})`) : null;
|
||||||
|
const maxQuery = range.maxWidth ? window.matchMedia(`(max-width: ${range.maxWidth})`) : null;
|
||||||
|
return { minQuery, maxQuery };
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义当前匹配的区间
|
||||||
|
const currentRange = ref(getCurrentRange());
|
||||||
|
|
||||||
|
// 获取当前匹配的区间
|
||||||
|
function getCurrentRange() {
|
||||||
for (let i = 0; i < mediaQueryLists.length; i++) {
|
for (let i = 0; i < mediaQueryLists.length; i++) {
|
||||||
if (mediaQueryLists[i].matches) {
|
const { minQuery, maxQuery } = mediaQueryLists[i];
|
||||||
return sizes[i].maxWidth;
|
const minMatches = minQuery ? minQuery.matches : true;
|
||||||
|
const maxMatches = maxQuery ? maxQuery.matches : true;
|
||||||
|
if (minMatches && maxMatches) {
|
||||||
|
return ranges[i];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return sizes[sizes.length - 1].maxWidth
|
return ranges[ranges.length - 1];
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeHandler = (newValue) => {
|
// 处理窗口大小变化（加上防抖）
|
||||||
if (typeof handleChange === 'function') {
|
const handleDeviceChange = debounce(() => {
|
||||||
handleChange(newValue);
|
const newRange = getCurrentRange();
|
||||||
|
if (currentRange.value !== newRange) {
|
||||||
|
currentRange.value = newRange;
|
||||||
|
if (typeof handleChange === 'function'&&newRange) {
|
||||||
|
handleChange(newRange);
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
const mediaQueryChangeHandler = () => {
|
|
||||||
const newDevice = getCurrentDevice();
|
|
||||||
if (currentDevice.value !== newDevice) {
|
|
||||||
currentDevice.value = newDevice;
|
|
||||||
changeHandler(newDevice);
|
|
||||||
}
|
}
|
||||||
};
|
}, 200);
|
||||||
|
|
||||||
let cleanupHandlers = [];
|
|
||||||
|
|
||||||
|
// 在组件挂载时添加事件监听器
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
mediaQueryLists.forEach(query => {
|
mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
|
||||||
query.addEventListener('change', mediaQueryChangeHandler);
|
if (minQuery) minQuery.addEventListener('change', handleDeviceChange);
|
||||||
cleanupHandlers.push(() => query.removeEventListener('change', mediaQueryChangeHandler));
|
if (maxQuery) maxQuery.addEventListener('change', handleDeviceChange);
|
||||||
});
|
});
|
||||||
// Ensure the initial value is correct and trigger the changeHandler with the initial value
|
|
||||||
const initialDevice = getCurrentDevice();
|
// 初始调用以设置正确的区间
|
||||||
currentDevice.value = initialDevice;
|
handleDeviceChange();
|
||||||
changeHandler(initialDevice);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 在组件卸载时移除事件监听器
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
cleanupHandlers.forEach(cleanup => cleanup());
|
mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
|
||||||
|
if (minQuery) minQuery.removeEventListener('change', handleDeviceChange);
|
||||||
|
if (maxQuery) maxQuery.removeEventListener('change', handleDeviceChange);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return { maxWidth: currentDevice };
|
// 返回当前匹配的区间
|
||||||
|
return { currentRange };
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue