首页 前端知识 vue使用v-scale-screen大屏自适应

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

2024-03-29 15:03:54 前端知识 前端哥 927 819 我要收藏

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4271.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!