大屏自适应推荐vue2.0

父组件

<template>
  <div class="ScreenAdapter" :style="style">
    <slot />
  </div>
</template>
<script>
import { debounce } from '@/lib/tools.js'

export default {
  name: '',
  //参数注入
  props: {
    width: {
      type: String,
      default: '1920'
    },
    height: {
      type: String,
      default: '1080'
    }
  },
  data() {
    return {
      style: {
        width: this.width + 'px',
        height: this.height + 'px',
        transform: 'scale(1)'
      }
    }
  },
  mounted() {
    this.setScale()
    window.onresize = debounce(this.setScale, 1000)
  },
  methods: {
    // 获取放大缩小比例
    // getScale() {
    //   const w = window.innerWidth / this.width
    //   const h = window.innerHeight / this.height
    //   return w < h ? w : h
    // },
    getScale() {
      const getScale = {
        w : window.innerWidth / this.width,
        h : window.innerHeight / this.height
        // return [w, h]
      }
      return getScale
    },
    // 设置比例
    setScale() {
      this.style.transform = "scale(" + this.getScale().w + "," + this.getScale().h + ") ";
      // this.style.transform = 'scale(' + this.getScale() + ')'
      console.log('自适应')
    }
  }
}
</script>
<style lang="less" scoped>
.ScreenAdapter {
  transform-origin: 0 0;
  // position: absolute;
  // left: 50%;
  // top: 50%;
  transition: 0.3s;
  // background: red;
}
</style>

/**
 * @description: 防抖
 * @param {*} callback
 * @param {*} time
 */
export function debounce(fn,t) {
  const delay = t || 500
  let timer
  return function() {
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    const context = this
    timer = setTimeout(() => {
      timer = null
      fn.apply(context, args)
    }, delay)
  }
  }

app.vue

<template>
    <div id="app">
        <ScreenAdapter>
            <router-view/>
        </ScreenAdapter>
        
    </div>
</template>

<script>
import ScreenAdapter from "@/views/components/ScreenAdapter/index";
export default {
    name: 'App',
    components:{ScreenAdapter},
    data() {
        return {
            resizeFn: null
        }
    },
    mounted() {
       
    },
    beforeDestroy() {
       
    }
}
</script>

<style lang="less">
html,body {
    height: 100%;
    width: 100%;
    padding:0;
    margin:0;
    overflow: hidden;
}
html {
    font-size: 20px;
}

#app {
    height: 100%;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
</style>