首页 > 其他分享 >[Vue] 大屏自适应问题

[Vue] 大屏自适应问题

时间:2023-11-08 16:22:53浏览次数:39  
标签:Vue full screen 适应 scale 大屏 DataV 分辨率

 

可视化大屏需要自适应各种屏幕,使用了DataV的dv-full-screen-container ,v-scale-screen , 但都达不到要求,

dv-full-screen-container 随着屏幕缩放或分辨率变化,文字也相应变化了,

v-scale-screen + DataV 控件时,第一次加载页面时,DataV边框宽高没有调整过来,还需要稍微拉伸一下,触发它自身的resize,才会正常显示。

最后,放弃使用这两个全屏容器,在网上找到解决电脑屏幕分辨率的方案

  mounted() {
    var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
    var scale = devicewidth / 1920; // 分母——设计稿的尺寸
    document.body.style.zoom = scale;//放大缩小相应倍数
  }

 

标签:Vue,full,screen,适应,scale,大屏,DataV,分辨率
From: https://www.cnblogs.com/WikiChen/p/17817660.html

相关文章

  • vue上传文件夹目录
    在input上面添加webkitdirectorydirectory这两个属性就能开启选择目录模式<inputref="fileIptRef"class="file-ipt"type="file"webkitdirectorydirectorymultiple@change="handleFileSelect"/>//文件上传输入框的refconstfileIptRef:any=ref(......
  • VUE上传文件夹的三种解决方案
     本文章向大家介绍VUE上传文件夹的三种解决方案,主要内容包括上传分步:、直接上代码、使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 ​对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很......
  • vue+element拖动排序功能
    vue+element拖动排序功能安装npminstallvuedraggable-S引用importdraggablefrom'vuedraggable'注册组件components:{draggable},通过draggable标签来使用代码<draggablev-model="urlPic":move="onMove"@start=......
  • vue3中使用Pinia
    Pinia是一个用于Vue的状态管理库,类似Vuex,是Vue的另一种状态管理方案三大核心:state(存储的值),getters(计算属性),actions也可支持同步(改变值的方法,支持同步和异步)npminstallpinia@nextoryarnaddpinia@next模块化封装创建实例新建store/index.ts(src目录下新建store......
  • 37-Vue脚手架-nextTick(使用nextTick优化TodoList案例)
    this.$nextTick(十分常用的功能)语法:this.$nextTick(回调函数)作用:在下一次DOM更新结束后执行其指定的回调什么时候用:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行 案例:使用 $nextTick优化TodoList案例,在UserItem中添加一个编辑按......
  • vue计算属性computed简单使用
    computed的作用computed用data中现有的属性计算出一个新的属性,叫做计算属性,计算属性和data中属性在{{}}写法和属性一样,例如计算属性name写为<div>{{name}}</div>computed的定义位置computed的定义位置和methods还有data为同级写法为computed:{}<script>exportdefault{data()......
  • vue-test ------事件监听
    <template><h3>监听器</h3><p>{{message}}</p><button@click="updateHandle">点击</button></template><script>exportdefault{name:"WatchDemo",data(){return{mess......
  • vue-test -------style绑定
    <template><p:style="{color:activeColor,fontSize:fontsize+'px'}"></p></template><script>exportdefault{name:"StyleDemo",data(){return{activeColor:"green",......
  • Vue3 发送get 请求 携带数据
    exportfunctionTeam(data={}){returnservice.request({method:"get",url:"https://example.com/api/endpoint",//替换成实际的API端点params:{param1:data.param1,//根据传入的参数动态构建param2:data.param2}})......
  • vue-project-------(模板语法,属性绑定)
    <template><h3>模板语法</h3><p>{{msg}}</p><p>{{number+1}}</p><p>{{flag?'yes':'no'}}</p><p>{{message.split("").reverse().join("")}}</p>......