vue3根据屏幕大小自适应宽高缩放的方法代码

在Vue3中，可以通过监听窗口大小变化事件，动态计算需要缩放的比例，从而实现根据屏幕大小自适应宽高缩放的效果。具体实现方法可以参考以下代码：

<template>
  <div :style="{transform: `scale(${scaleRatio})`}">
    <!-- 需要自适应缩放的内容 -->
  </div>
</template>

<script>
import { reactive, onMounted, onUnmounted } from 'vue'

export default {
  setup () {
    const state = reactive({
      scaleRatio: 1 // 默认缩放比例为1
    })

    // 监听窗口大小变化事件
    const onResize = () => {
      const { innerWidth, innerHeight } = window
      const screenWidth = 1920 // 设计稿的宽度
      const screenHeight = 1080 // 设计稿的高度
      const scaleX = innerWidth / screenWidth
      const scaleY = innerHeight / screenHeight
      state.scaleRatio = scaleX > scaleY ? scaleY : scaleX // 取较小的缩放比例
    }

    onMounted(() => {
      window.addEventListener('resize', onResize)
    })

    onUnmounted(() => {
      window.removeEventListener('resize', onResize)
    })

    return state
  }
}
</script>

在上面的代码中，我们使用了Vue3中的reactive函数创建了一个响应式对象state，用来保存当前的缩放比例。在setup函数中，我们使用onMounted和onUnmounted函数分别在组件挂载和卸载时监听和移除窗口大小变化事件。在事件处理函数onResize中，我们根据窗口大小和设计稿的宽高计算出需要缩放的比例，并将其保存到state对象中。在模板中，我们使用:style绑定将缩放比例应用到需要自适应缩放的内容上，实现根据屏幕大小自适应宽高缩放的效果。