<template>
  <div class="index-container" id="indexContainer">
    <div :style="{zoom:zoomVal }">
      内容区域
    </div>
  </div>
</template>

<script>
  // 功能引入
  import {
    ref,
    toRefs,
    shallowRef,
    reactive,
    watch,
    watchEffect,
    getCurrentInstance,
    computed,
    defineComponent,
    nextTick,
    onMounted,
    onUnmounted,
    inject,
  } from 'vue'

 
  //列表
  export default {
    name: "test",
    components: {
  
    },
    setup(props, {emit}) {
  
      // 数据
      const Data= reactive({
        zoomVal: 1,//等比缩放值
      });

      // 方法
      const Function = reactive({
        // 优点：不用考虑适配问题，按设计稿进行固定尺寸开发
        bodyScale() {
          let devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
          let scale = devicewidth / 1920; // 分母——设计稿的尺寸
          State.zoomVal = Number(scale)
          console.log('zoomVal--->',State.zoomVal)
          // document.body.style.zoom = scale;//放大缩小相应倍数
        },
      })
      // 接口
      const Interface = reactive({})


      onMounted(() => {
  
        nextTick(() => {
          Function.bodyScale()
          window.addEventListener('resize', function () {
            Function.bodyScale()
          })
        })
      })

      return {
        ...toRefs(Data),
        ...toRefs(Function),
        ...toRefs(Interface),

      }

    }

  }
</script>

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