xingyy/heritage-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
Phoenix 2024-02-01 18:19:38 +08:00
parent 6ebad1eefd
commit b6778fe1d9
1 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/navigation/index.vue
View File

@ -1,15 +1,23 @@
<script setup>
import pcIndex from '@/views/navigation/pc-index.vue'
import modelIndex from '@/views/navigation/model-index.vue'
import {ref} from "vue";
const mediaQueryList = window.matchMedia('(max-width: 768px)');
const currentComponent=ref(modelIndex)
mediaQueryList.addListener(function(event) {
if (event.matches) {
currentComponent.value=modelIndex
} else {
currentComponent.value=pcIndex
}
import { ref, onMounted, onBeforeUnmount } from "vue";
import PcIndex from '@/views/navigation/pc-index.vue';
import ModelIndex from '@/views/navigation/model-index.vue';
const mediaQuery = '(max-width: 768px)';
const currentComponent = ref(window.matchMedia(mediaQuery).matches ? ModelIndex : PcIndex);
function handleMediaQuery(event) {
currentComponent.value = event.matches ? ModelIndex : PcIndex;
}
let mediaQueryList;
onMounted(() => {
mediaQueryList = window.matchMedia(mediaQuery);
mediaQueryList.addEventListener('change', handleMediaQuery);
handleMediaQuery(mediaQueryList);
});
onBeforeUnmount(() => {
mediaQueryList.removeEventListener('change', handleMediaQuery);
});
</script>
<template>