44 lines
1,022 B
TypeScript
44 lines
1,022 B
TypeScript
export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
|
|
|
|
interface BreakpointDef {
|
|
name: Breakpoint;
|
|
maxWidth: number;
|
|
}
|
|
|
|
const BREAKPOINTS: BreakpointDef[] = [
|
|
{ name: "xs", maxWidth: 575 },
|
|
{ name: "sm", maxWidth: 767 },
|
|
{ name: "md", maxWidth: 991 },
|
|
{ name: "lg", maxWidth: 1199 },
|
|
{ name: "xl", maxWidth: 1399 },
|
|
{ name: "xxl", maxWidth: Infinity },
|
|
];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
breakpoint: "md" as Breakpoint,
|
|
};
|
|
},
|
|
methods: {
|
|
updateBreakpoint(): void {
|
|
const width: number = window.innerWidth;
|
|
const self = this as any;
|
|
for (const bp of BREAKPOINTS) {
|
|
if (width <= bp.maxWidth) {
|
|
self.breakpoint = bp.name;
|
|
return;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
const self = this as any;
|
|
self.updateBreakpoint();
|
|
window.addEventListener("resize", self.updateBreakpoint);
|
|
},
|
|
beforeUnmount() {
|
|
const self = this as any;
|
|
window.removeEventListener("resize", self.updateBreakpoint);
|
|
},
|
|
};
|