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

效果图：

全屏情况：

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>复制