大屏自适应容器组件 v-scale-screen

在vue中，v-scale-screen可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应。

• 仓库地址：github
• 国内地址：gitee

一、安装

npm install [email protected]

注意：vue2使用1.0.0版本，vue3使用2.0.0以上版本

二、使用

（1）在vue2中使用插件方式导出，用Vue.use()进行注册

main.js中：

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

vue页面中：

<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </v-scale-screen>
</template>

使用时将 body样式设置为overflow: hidden

例如：在home.vue中：

<template>
  <v-scale-screen width="1920" height="1080" class="scale-wrap">
    <div class="bg">
      <div class="host-body">
        <!-- 头部 e-->
        <!-- 内容  s-->
        <router-view></router-view>
      </div>
    </div>
  </v-scale-screen>
</template>

（2）在vue3中以组件方式导出

<template>
  <v-scale-screen width="1920" height="1080">
    <div>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
      <v-chart>....</v-chart>
    </div>
  </v-scale-screen>
</template>

<script>
import { defineComponent } from "vue"
import VScaleScreen from 'v-scale-screen'

export default defineComponent({
  name:'Demo',
  components:{
    VScaleScreen
  }
})
</script>

三、API

v-scale-screen默认等比例屏幕缩放，当视图不满足比例，上下或左右会有留白（黑框）。如果想要铺满全屏，可以配置autoScale或将fullScreen设置为true。其原理是用到了css的transform属性实现缩放效果，进行等比例计算，达到等比例缩放的效果。

好的案例可参考：
https://gitee.com/kala0105/IofTV-Screen
https://gitee.com/MTrun/big-screen-vue-datav