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的值。达到小屏也兼容的效果

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐