vue大屏应用展示

本篇文章记录下，在pc端，大屏应用的构建。
1.大屏应用，是基于1k屏（1920*1080）来开发，产生的应用可以引用到其它大屏（2k, 4k ,8k等）。

2.所以在设计的时候，就可以让UI设计做成1k屏的样式，然后根据UI的尺寸，来将样式固定写死。

3.当我们的项目做成1k屏时，怎么样适配其它大屏呢？答：我们可以利用 css3 的 transform:scale ，通过页面的宽度来配置我的缩放比例。

对于以上的结论，我们在项目当中应用。在APP.vue中：

//给项目动态绑定上缩放比例scale
<template>
  <div id="app" :style="{transform : `scale(${scale})`}">
    <router-view/>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        scale:1
      }
    },
    mounted() {
      this.resize();
      //这里：为了我们在开发时候看效果，做的防抖
      window.addEventListener('resize',this.debounce(this.resize,100))
    },
    methods:{
      debounce(func,wait){
        let timer = null;
        return function () {
          if(timer){
            clearTimeout(timer)
          }
          timer = setTimeout(func,wait)
        }
      },
      resize(){//核心代码
        let percent = document.documentElement.clientWidth / 1920;
        this.scale = percent > 1 ? percent : 1 //大于1k屏就对应比例放大，小于1k屏就用1k屏
      }
    }
  }
</script>

<style lang="less">
/*将大屏设置为1920*1080,设置缩放的方向*/
#app {
  width: 1920px;
  height: 1080px;
  transition: all .2s linear;
  transform-origin: left top;
}

</style>