30 lines
786 B
JavaScript
30 lines
786 B
JavaScript
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
|
|
export function useBootstrapBreakpoint() {
|
|
const width = ref(window.innerWidth);
|
|
|
|
const onResize = () => {
|
|
width.value = window.innerWidth;
|
|
};
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', onResize);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', onResize);
|
|
});
|
|
|
|
// 计算当前断点
|
|
const breakpoint = computed(() => {
|
|
if (width.value < 576) return 'xs';
|
|
if (width.value >= 576 && width.value < 768) return 'sm';
|
|
if (width.value >= 768 && width.value < 992) return 'md';
|
|
if (width.value >= 992 && width.value < 1200) return 'lg';
|
|
if (width.value >= 1200 && width.value < 1400) return 'xl';
|
|
return 'xxl';
|
|
});
|
|
|
|
return { width, breakpoint };
|
|
}
|