Initial project

src/store/device.ts

@@ -0,0 +1,110 @@
+import { Resizer } from "~/index";
+
+// true 为手机
+const isPhone = ref(false);
+// true 为平板
+const isTablet = ref(false);
+// true 为桌面
+const isDesktop = ref(false);
+// true 为大屏幕
+const isLargeScreen = ref(false);
+
+// true 为竖屏
+const isVertical = ref(false);
+// true 为横屏
+const isHorizontal = ref(false);
+// 宽高比
+const aspectRatio = ref(0);
+// true 为超宽屏
+const isUltrawide = ref(false);
+// true 为近似方屏
+const isSquare = ref(false);
+
+// 当前断点
+const currentBreakpoint = ref<"xs" | "sm" | "md" | "lg" | "xl">("lg");
+// 当前屏幕宽度
+const screenWidth = ref(0);
+// 当前屏幕高度
+const screenHeight = ref(0);
+// 短屏幕（高度小于 500）
+const isShortScreen = ref(false);
+// true 为启用移动端布局
+const isMobileLayout = ref(false);
+
+/** 断点配置，单位：px */
+enum Breakpoints {
+
+	/** 超小设备 */
+	XS = 480,
+
+	/** 手机 */
+	SM = 650,
+
+	/** 平板 */
+	MD = 768,
+
+	/** 笔记本 */
+	LG = 1024,
+
+	/** 大屏幕 */
+	XL = 1440
+}
+
+Resizer.addListener("DEVICE_SIZE", (width, height) => {
+	screenWidth.value = width;
+	screenHeight.value = height;
+
+	// 设备类型
+	isPhone.value = width < Breakpoints.SM;
+	isTablet.value = width >= Breakpoints.SM && width < Breakpoints.LG;
+	isDesktop.value = width >= Breakpoints.LG;
+	isLargeScreen.value = width >= Breakpoints.XL;
+
+	// 屏幕方向
+	isVertical.value = width < height;
+	isHorizontal.value = !isVertical.value;
+
+	// 宽高比特征
+	aspectRatio.value = width / height;
+	isUltrawide.value = 2 <= aspectRatio.value; // 21:9 ≈ 2.33
+	isSquare.value = 0.9 < aspectRatio.value && aspectRatio.value < 1.1;
+
+	// 布局相关
+	isShortScreen.value = height < 500;
+	isMobileLayout.value = width < Breakpoints.MD;
+
+	if (Breakpoints.XL <= width) {
+		currentBreakpoint.value = "xl";
+	} else if (Breakpoints.LG <= width) {
+		currentBreakpoint.value = "lg";
+	} else if (Breakpoints.MD <= width) {
+		currentBreakpoint.value = "md";
+	} else if (Breakpoints.SM <= width) {
+		currentBreakpoint.value = "sm";
+	} else {
+		currentBreakpoint.value = "xs";
+	}
+});
+
+const deviceStore = {
+	isPhone,
+	isTablet,
+	isDesktop,
+	isLargeScreen,
+
+	isVertical,
+	isHorizontal,
+	aspectRatio,
+	isUltrawide,
+	isSquare,
+
+	currentBreakpoint,
+	screenWidth,
+	screenHeight,
+	isShortScreen,
+	isMobileLayout
+};
+
+export {
+	deviceStore
+};