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

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

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

一、安装

npm install v-scale-screen@1.0.0

注意：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>