social-management-screen/src/views/auto/index.vue

<template>
  <div class="auto-main">
    <Component :is="comIs"/>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  nextTick,
  onMounted,
  watch,
  computed,
  ComponentInternalInstance,
  reactive,
  toRefs,
  getCurrentInstance
} from 'vue'
import PcCom from '../pc/index.vue'
import ScreenCom from '../screen/index.vue'

export default defineComponent({
  name: 'App',
  components: {},
  setup() {
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      comIs: PcCom
    });
    onMounted(() => {
      if (document.body.clientWidth <= 2000) {
        state.comIs = PcCom
      } else {
        state.comIs = ScreenCom
      }
      window.onresize = (e) => {
        if (e?.target?.innerWidth <= 2000) {
          state.comIs = PcCom
        } else {
          state.comIs = ScreenCom
        }
      }
    })
    return {
      ...toRefs(state),
    }
  }
})
</script>

<style lang="scss" scoped>
</style>