vue-echarts div动态的计算高度

DIV部分

<chart

  ref="taskChart"

  :theme="chartstheme"

  autoresize :options="chartsoptionsu"

  @click="zydwclick"

  :style="{width:chartswidth,height:chartsheight}">

</chart>

<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"

        :src="YZKH_URL" :height="ifram_height"

        frameborder="0">

</iframe>

data部分

charts:{

//div的高度

ifram_height:0,

//echarts的高度宽度

width:'100%',

height:"230px",}

//自动设置chart的高度

methods: {

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  const chartHeight = (Number(deviceHeight) 082) /2//两个row

//计算echarts 的高度

  mechartsheight = chartHeight +'px';

//计算div部分的高度

  meifram_height = (Number(deviceHeight) 078) +'px'

},

在mountd里面调用

mounted() {

let me =this;

meRowResize();

//监视窗口发生变化再调用一次

windowonresize =function () {

meRowResize();

}

获取DOM的高度宽度公式

DOM可视高度/DOM最长的高度=计算比例

计算  table高度 

<Table border

      @on-sort-change="onSortChange"

      :columns="tableAtableColumns"

      :data="tableAtableData"

      :height="height"

      ref="currentRowTable"

      :percent="percent"

      style="white-space: nowrap;word-break: keep-all"

></Table>

data() {

return {

height:100,

//自动设置列表的高度

RowResize() {

let me =this;

  const deviceHeight = documentdocumentElementclientHeight

  if (me$refscurrentRowTable) {

meheight = Number(deviceHeight) 065

  }

},

let me =this

meRowResize();

//监听窗口大小变化

windowonresize =function () {

meRowResize();

}

根据需求想要一个可以根据文字内容撑开高度，同时延伸背景图（因为我想要一个虚线的效果），textarea无法自适应，用div的可编辑效果contenteditable = true来实现，遇到了几个问题。

1、设置div的初始化高度min-height: 700px;

2、div的内容需要通过@input来绑定etargettextContent

3、可编辑的div，光标会在输入完成时跳到最前，解决方式是通过range对象的moveStart()函数

1点击某个标签，滚动到某个具体位置

    switchHeight(num) {

        thisselectNum = num;

        if (num == 0) {

          documentgetElementById("identifer_one")scrollIntoView();

        } else {

          documentgetElementById("hotel_two")scrollIntoView();

        }

      },

2获取滚动高度，

 首先要先写监听事件：

  mounted() {

      windowaddEventListener("scroll", thishandleScroll, true); //监听滚动事件

    },

处理监听事件：etargetscrollTop是目标对象的滚动高度

handleScroll(e) {

        let serviceTop = 44;

        let hotelTop = 344;

        if (etargetscrollTop > 44 && etargetscrollTop < 344) {

          thisselectNum = 0;

        }

        if (etargetscrollTop > 344) {

          thisselectNum = 1;

        }

      }

    },

以上就是关于vue-echarts /div动态的计算高度全部的内容，包括:vue-echarts /div动态的计算高度、vue中的可编辑div实现高度自适应、vue中获取滚动高度或指定滚动到某位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！