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:41:56 +08:00
parent 3aabead478
commit 58f3f03a3d
1 changed files with 2 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,29 +1,12 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import PcIndex from '@/views/navigation/pc-index.vue';
import ModelIndex from '@/views/navigation/model-index.vue';
import {useAdaptation} from '@/utils/self-adaption.js'
const {currentDevice}= useAdaptation((currentDevice)=>{
console.log(currentDevice,'currentDevice')
})
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);
});
const {currentDevice}= useAdaptation()
</script>
<template>
<div>
<component :is="currentComponent" />
<component :is="currentDevice==='pc'?PcIndex:ModelIndex" />
</div>
</template>
<style scoped lang="scss">