kidArtExpo/src/views/login/index.vue

<script setup>
import {useAdaptation} from "@/utils/self-adaption.js";
import {sizes} from "@/dict/index.js";
import size375 from '@/views/login/size375/index.vue'
import size768 from '@/views/login/size768/index.vue'
import {computed} from "vue";
const {maxWidth}= useAdaptation(sizes,(maxWidth)=>{
  console.log('maxWidth',maxWidth.value)
})

const viewComponent = computed(()=>{
switch (maxWidth.value){
  case '375px':
    return size375
  case '768px':
    return size768
}
})
</script>

<template>
  <component :is="viewComponent"></component>
</template>

<style scoped lang="scss">

</style>