vue大屏放大缩小适配方案之scale，直接用超简单

匆叔

已于 2024-01-16 17:22:45 修改

阅读量6.2k

点赞数 26

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言 vue.js

于 2024-01-16 17:00:39 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73854403/article/details/135629356

文章介绍了如何使用Vue2开发组件，分别实现全屏情况下不留白的缩放和等比例放大缩小并保持美观的两种方法，以及在父组件中引用和应用这些组件的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

全屏情况：

vue2组件代码如下：

1. 适应长度宽度，不留白，（本demo是第一种，不留白）

<template>
  <div :style="styleObject" class="scale-box">
    <slot />
  </div>
</template>

<script>
import debounce from 'lodash.debounce'
export default {
  components: {},
  props: {
    width: {
      type: Number,
      default: 1920
    },
    height: {
      type: Number,
      default: 1080
    }
  },
  data() {
    return {
      scale: this.getScale()
    }
  },
  computed: {
    styleObject() {
      const obj = {
        transform: `scaleY(${this.scale.y}) scaleX( ${this.scale.x}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
        width: this.width + 'px',
        height: this.height + 'px'
      }
      return obj
    }
  },
  mounted() {
    this.getScale()
    window.addEventListener('resize', this.setScale)
  },
  beforeDestroy() {
    window.addEventListener('resize', this.setScale)
  },
  methods: {
    getScale() {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      console.log(window.innerWidth, 'window.innerWidth')
      const ww = window.innerWidth / this.width
      const wh = window.innerHeight / this.height
      // return ww < wh ? ww : wh
      return { x: ww, y: wh }
    },
    setScale: debounce(function() {
      // 获取到缩放比，设置它
      const scale = this.getScale()
      this.scale = scale
    }, 300)
  }
}
</script>

<style scoped lang="scss">
.scale-box {
  transform-origin: 0 0;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: 0.3s;
}
</style>

2. 等比例放大缩小，会留白，但页面不会变形，更为美观，背景色设置与主题色同色，效果更佳

<template>
  <div :style="styleObject" class="scale-box">
    <slot />
  </div>
</template>

<script>
import debounce from 'lodash.debounce'
export default {
  components: {},
  props: {
    width: {
      type: Number,
      default: 1920
    },
    height: {
      type: Number,
      default: 1080
    }
  },
  data() {
    return {
      scale: this.getScale()
    }
  },
  computed: {
    styleObject() {
      const obj = {
        transform: `scale(${this.scale}) translate(-50%, -50%)`,
        WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
        width: this.width + 'px',
        height: this.height + 'px'
      }
      return obj
    }
  },
  mounted() {
    this.getScale()
    window.addEventListener('resize', this.setScale)
  },
  beforeDestroy() {
    window.addEventListener('resize', this.setScale)
  },
  methods: {
    getScale() {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      console.log(window.innerWidth, 'window.innerWidth')
      const ww = window.innerWidth / this.width
      const wh = window.innerHeight / this.height
      return ww < wh ? ww : wh
    },
    setScale: debounce(function() {
      // 获取到缩放比，设置它
      const scale = this.getScale()
      this.scale = scale
    }, 500)
  }
}
</script>

  <style scoped lang="scss">
  .scale-box {
    transform-origin: 0 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transition: 0.3s;
  }
  </style>

父组件引用方式：

<template>
  <div id="visual">
    <visualView>
      <div class="visual-app">
        <header>
       头部组件
        </header>
        <section>
          <router-view />
        </section>
      </div>
    </visualView>
  </div>
</template>

<script>
import visualView from '@/components/visualView'

export default {
  components: { visualView},
  data() {
    return {}
  },
  computed: {},
  created() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
#visual {
  height: 100%;
  width: 100%;
  background: #121d2f;
  .visual-app {
    height: 100%;
    width: 100%;
    header {
      width: 100%;
      height: 95px;
    }
    section {
      width: 100%;
      padding: 25px 16px;
      height: calc(100% - 95px);
      color: aliceblue;
    }
  }
}
</style>