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>