123
parent
486f2ea9bb
commit
bfa6690a4d
@ -1,3 +1,3 @@
|
||||
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'
|
||||
export function useAdaptation(sizes, handleChange) {
|
||||
const mediaQueryLists = sizes.map(size => window.matchMedia(`(max-width: ${size.maxWidth})`));
|
||||
const currentDevice = ref(getCurrentDevice())
|
||||
function getCurrentDevice() {
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||
import debounce from 'lodash/debounce'
|
||||
|
||||
export function useAdaptation(ranges, handleChange) {
|
||||
// 创建 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++) {
|
||||
if (mediaQueryLists[i].matches) {
|
||||
return sizes[i].maxWidth;
|
||||
const { minQuery, maxQuery } = mediaQueryLists[i];
|
||||
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') {
|
||||
handleChange(newValue);
|
||||
// 处理窗口大小变化（加上防抖）
|
||||
const handleDeviceChange = debounce(() => {
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
let cleanupHandlers = [];
|
||||
}, 200);
|
||||
|
||||
// 在组件挂载时添加事件监听器
|
||||
onMounted(() => {
|
||||
mediaQueryLists.forEach(query => {
|
||||
query.addEventListener('change', mediaQueryChangeHandler);
|
||||
cleanupHandlers.push(() => query.removeEventListener('change', mediaQueryChangeHandler));
|
||||
mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
|
||||
if (minQuery) minQuery.addEventListener('change', handleDeviceChange);
|
||||
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;
|
||||
changeHandler(initialDevice);
|
||||
|
||||
// 初始调用以设置正确的区间
|
||||
handleDeviceChange();
|
||||
});
|
||||
|
||||
// 在组件卸载时移除事件监听器
|
||||
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