VUE使用DataV适应小屏或者方屏等各种类型的屏幕

贵宾哥Cyril

已于 2022-11-09 10:57:45 修改

阅读量2.9k

点赞数 4

文章标签： vue.js 前端 javascript

于 2022-09-16 16:05:45 首次发布

本文链接：https://blog.csdn.net/qq_34452824/article/details/126892345

版权

博客分享了DataV在小屏设备上自适应效果不佳的问题，并提出了一种解决方案。通过修改`initConfig`方法，设定固定宽度并根据屏幕比例调整高度，以实现更好的全屏显示。在`setAppScale`方法调用时，能根据实际屏幕大小计算transform值，从而达到小屏兼容。这种方法中，1920像素被用作参考宽度，但可根据需求自定义。

摘要由CSDN通过智能技术生成

DataV是阿里的可视化大屏插件，但是使用过程中发现，在小屏下的自适应效果差。这里提供一种解决方案，找到node_modules\@jiaminghi\data-view\lib\components\fullScreenContainer\src\main.vue，修改initConfig里面的方法

原来：

initConfig () {
      const { dom } = this
      const { width, height } = screen

      this.allWidth = width

      dom.style.width = `${width}px`
      dom.style.height = `${height}px`
    }

修改成：

initConfig () {
      const { dom } = this
      const { width, height } = screen
    
      var fixWidth = 1920;
      var fixHeight = fixWidth * height / width;

      this.allWidth = fixWidth

      dom.style.width = `${fixWidth}px`
      dom.style.height = `${fixHeight}px`
    }

其中1920可以自己随便定义，最终还是通过计算固定用来计算的宽高，这样在全屏的时候调用setAppScale()方法时就会根据实际屏幕大小计算transform的值。达到小屏也兼容的效果