全屏容器组件

全屏容器会初始化容器默认高宽以及缩放比，当容器尺寸或者浏览器窗口大小发生改变的时候会自动计算缩放比，从而保证容器中的内容不会变形

公司业务中有大量的可视化大屏的需求，一般都是要求内容全屏展示，所以将这个组件从业务中抽离出来

使用这个组件请保证body的默认margin已经设置为0，否则将会引起缩放比例的计算错误
请保证body的高宽为100%

安装

npm install vue-fullscreen-container -S

使用

import Vue from 'vue'

import FullScreenContainer from 'vue-fullscreen-container'

Vue.use(FullScreenContainer)

/// 或者 Vue.component(FullScreenContainer.name, FullScreenContainer)

<script>
export default {
}
</script>

<template>
  <div id="app">
    <fullscreen-container>
      <div style="font-size:40px;color:red;">Hello World</div>
    </fullscreen-container>
  </div>
</template>

<style>
body {
  margin: 0;
}
</style>

配置

• delay: 触发resize回调延迟执行的毫秒数，默认100
• width: 设计稿宽度, 默认1920
• height: 设计稿高度, 默认1080