dataV组件容器宽高发生变化后，组件不会自适应解决方法

蔚落 2022-12-15 06:30 532阅读 0赞

项目中需要大屏幕数据展示，于是使用了dataV组件，但是使用是发现拖动浏览器边框，dataV组件显示异常，如图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70][]

于是查了官网,官网的解释如下:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 1][]

于是按照官网的意思编写代码:

<dv-active-ring-chart ref="pie2" :config="config" :key="key" class="datav-item" />

return {
          pieOutline: '',
          key : 1,
     }

methods: {
        pieOutlineFunc () {
          var _this=this
          window.addEventListener('resize', function(e){
            _this.$nextTick(()=>{
              console.log(_this.$refs.pie2)
              _this.key++
            })
          })
        }
      },
      mounted () {
        this.pieOutlineFunc()
      },

于是可以自适应了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70]: /images/20221123/fe5590d9016d4db3a0b91fe26f75df1f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lfd194X2s_size_16_color_FFFFFF_t_70 1]: /images/20221123/62adeaf176e24643860354579f3f3b02.png

发表评论取消回复

表情：

评论列表（有 0 条评论，532人围观）

还没有评论，来说两句吧...

相关阅读

相关两列宽高自适应

两列布局，要求占满整个页面，其中某列固定，另一列宽度自适应，另外要求两列的高度都要根据屏幕自适应，占满整屏。宽度好整，一列设宽，一列不设宽，只设margin-left或ma

约定不等于承诺〃/ 2023年10月11日 12:26/ 0 赞/ 162 阅读

相关自适应屏幕宽高

css3 属性@media 自适应屏幕宽高 <!DOCTYPE html> <html> <head> <meta charset="UTF-

傷城~/ 2023年10月06日 17:28/ 0 赞/ 161 阅读

相关 CSS宽高自适应设置

宽高自适应 > 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。 > 自适应的优点： > 元素自适应

以你之姓@/ 2023年10月06日 15:00/ 0 赞/ 119 阅读

相关 jqGrid 设置两种宽高（固定宽高，自适应宽高）

1 HTML 代码 <table id='datagrid'></table> 2 固定宽高 2.1 初始化设置固定宽高 //jqGrid初

冷不防/ 2023年10月05日 14:24/ 0 赞/ 145 阅读

相关 iOS-文本自适应宽高废弃方法更新

1、-boundingRectWithSize:options:attributes:context:用法 - (CGSize)sizeWithFont:(UIFon

电玩女神/ 2023年10月05日 13:31/ 0 赞/ 75 阅读

相关 background-image 自适应宽高

\{ background-image:url(images/xxx.jpg); background-size:100% 100%; \} 添加前 ![在

「爱情、让人受尽委屈。」/ 2022年12月27日 07:58/ 0 赞/ 328 阅读

相关 dataV组件容器宽高发生变化后，组件不会自适应解决方法

项目中需要大屏幕数据展示，于是使用了dataV组件，但是使用是发现拖动浏览器边框，dataV组件显示异常，如图: ![watermark_type_ZmFuZ3poZW5na

蔚落/ 2022年12月15日 06:30/ 0 赞/ 533 阅读

相关【Android】ImageView宽固定,高自适应/高固定,宽自适应(正方形图片)

ImageView宽固定,高自适应/高固定,宽自适应 > 解决方法 `宽固定,高自适应` <ImageView android:layout_

深藏阁楼爱情的钟/ 2022年10月06日 14:54/ 0 赞/ 323 阅读

相关 echarts自适应宽高

页面结构： <div id="echarts_pie2" class="charts" :style="{height:vheight+ 'px',width:vwi

快来打我*/ 2022年09月05日 01:46/ 0 赞/ 305 阅读

相关 div 自适应宽或高

对于一个写后台的开发人，调试页面样式真的是很难受。需求：上下布局，上面固定高度，下面s自适应高度。思路：俩个div相当父容器都是绝对位置，下面div的top是上面div

缺乏、安全感/ 2022年05月27日 11:55/ 0 赞/ 334 阅读