在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>

三、API

v-scale-screen默認等比例屏幕縮放，當視圖不滿足比例，上下或左右會有留白（黑框）。如果想要鋪滿全屏，可以配置autoScale或將fullScreen設置為true。其原理是用到了css的transform屬性實現縮放效果，進行等比例計算，達到等比例縮放的效果。

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