タブレット用のUI分岐を作成

src/use/isMobile.ts

@@ -1,21 +1,7 @@
-import { onUnmounted, Ref, ref } from 'vue'
-
-const MOBILE_BREAKPOINT = '599'
-
-const mql = window.matchMedia(`(min-width: ${MOBILE_BREAKPOINT}px)`)
-
-const useIsMobile = (): { isMobile: Ref<boolean> } => {
- const isMobile = ref(!mql.matches)
-
- const onChange = (e: MediaQueryListEvent) => {
- isMobile.value = !e.matches
- }
-
- mql.addEventListener('change', onChange)
- onUnmounted(() => {
- mql.removeEventListener('change', onChange)
- })
+import useBreakpoint from '/@/use/useBreakpoint'
 
+const useIsMobile = () => {
+ const { isSmaller: isMobile } = useBreakpoint('599')
  return { isMobile }
 }
 

src/use/isTablet.ts

@@ -0,0 +1,8 @@
+import useBreakpoint from '/@/use/useBreakpoint'
+
+const useIsTablet = () => {
+ const { isSmaller: IsTablet } = useBreakpoint('1023')
+ return { IsTablet }
+}
+
+export default useIsTablet

src/use/useBreakpoint.ts

@@ -0,0 +1,21 @@
+import { onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+
+const useBreakpoint = (breakpoint: string) => {
+ const mql = window.matchMedia(`(min-width: ${breakpoint}px)`)
+
+ const isSmaller = ref(!mql.matches)
+
+ const onChange = (e: MediaQueryListEvent) => {
+ isSmaller.value = !e.matches
+ }
+
+ mql.addEventListener('change', onChange)
+ onUnmounted(() => {
+ mql.removeEventListener('change', onChange)
+ })
+
+ return { isSmaller }
+}
+
+export default useBreakpoint