vue使用v-scale-screen大屏自适应

v-scale-screen是一个大屏自适应容器组件，可用于大屏项目开发，实现屏幕自适应，可根据宽度自适应，高度自适应，和宽高等比例自适应，全屏自适应。

安装依赖

npm install v-scale-screen
# or 
yarn add v-scale-screen复制

   注：vue2请使用v-scale-screen@1.0.0版本，vue3请使用v-scale-screen@2.0.0版本；

 注册组件

// main.js
import Vue from "vue";
import VScaleScreen from 'v-scale-screen'
 
Vue.use(VScaleScreen)复制

使用组件

 <!-- 内容  s-->
 <VScaleScreen>
    <router-view></router-view>
 </VScaleScreen>
  <!-- 内容 e -->复制

遇到的问题

在使用DataV之后，对浏览器放大缩小以及大屏进入全屏和退出全屏后，数据存在拉伸问题；

根据DataV官网解释如下：

 解决方案

给当前所使用的组件添加key值；

<dv-digital-flop :config="config" :key="key" style="width:200px;height:50px;" />复制

<script>
export default {
    data() {
        return {
            key:1
        }
    },
}
</script>复制