可视化大屏vue2，v-scale-screen使用记录

需要确定父组件高度，防止两个height:100%叠加第二个无效的情况，screen-wrapper类的style不生效，用v-deep修改,宽高用设计稿的宽高需要微调。

<template>
  <div class="app-container">
    <v-scale-screen width="1680" height="1000" :full-screen="false">
    </v-scale-screen>
  </div>
</template>

    "v-scale-screen": "^1.0.0",

import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)


<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 86px);
  background: #fafafa;
  display: flex;
  justify-content: center;
  flex-direction: column;
  ::v-deep .screen-box {
      background: #fafafa;
  }
  ::v-deep .screen-wrapper {
      margin: 0 !important;
      // height: auto !important;
  }
  ::v-deep .screen-box {
    // width: 100%;
    // height: 100%;
  }
}
</style>

https://github.com/zhangqh22/v-scale-screen/blob/v3.0/README.md