JZTXT

vue中使两个不同高度的div(内容长度不一)高度相同

发布时间 2023-04-18 11:29:20作者: Ao_min
设置高度height，记得给左右侧div一个最小高度min-height，保证没有内容的时候有一定的高度，内容撑起来的时候再自动适应
<el-col :xs="12" :sm="6" :md="2" class="grid-cell">
            <div class="grid-content bg-purple" :style="{ height: divHeight }"
              >XXXXX</div
            >
          </el-col>
          <el-col :xs="12" :sm="6" :md="22" class="grid-cell">
            <div class="series-basic">
              <div class="series-tag" ref="newData">
                <el-tag
                  v-for="(item, index) in items"
                  :key="index"
                  :type="item.type"
                >
                  {{ item.label }}
                </el-tag>
              </div>
            </div>
          </el-col>

items: [
          { type: '', label: '标签一', color: 'red' },
          { type: 'success', label: '标签二', color: 'red' },
          { type: 'info', label: '标签三', color: 'red' },
          {
            type: 'danger',
            label:
              '这里是很长的自定义名字我也不知道有多长有没有限制反正就是很长的样子',
            color: 'red'
          },
          {
            type: 'danger',
            label: '这是一个不太正常的标题',
            color: 'red'
          },
          {
            type: 'danger',
            label: '这是一个不太正常的标题',
            color: 'red'
          },
          {
            type: 'warning',
            label:
              '这里是很长的自定义名字我也不知道有多长有没有限制反正就是很长的样子',
            color: 'red'
          }
        ],
        divHeight: '0'

　　

mounted() {
      setTimeout(() => {
        this.handleLiHeight();
      }, 500);
    },

methods: {
      // 修改左侧高度与右侧高度一致
      handleLiHeight() {
        const newDataLi = this.$refs.newData.clientHeight;
        this.divHeight = newDataLi + 'px';
      },
}

　　参考连接：

https://www.freesion.com/article/53501352267/

https://ipkd.cn/webs_3046.html

链接一内容：

VUE中如何使两个不同UL对应的LI(内容长度不一)高度相同

 
 

不同ul中li的内容长度不一，在不固定高度的情况下，要使得他们对应的li高度一致，如下（旧值和新值分别是两个不同ul）
在这里插入图片描述

首先在相应元素分别添加ref,

<div  ref='oldData'>
	<ul>
		<li></li>
	</ul>
</div>
<div  ref='newData'>
	<ul>
		<li></li>
	</ul>
</div>

在methods中写处理函数：

 handleLiHeight () {
      const oldLiHeightArr = [] 
      const newLiHeightArr = [] 
      const oldDataLi = this.$refs.oldData.getElementsByTagName('li')  
      const newDataLi = this.$refs.newData.getElementsByTagName('li')
      let maxLength 

      Array.prototype.slice.call(oldDataLi).forEach(li => {
        // 获取每个li的高度，并追加到数组中
        oldLiHeightArr.push(li.clientHeight)
      })
      Array.prototype.slice.call(newDataLi).forEach(li => {
        newLiHeightArr.push(li.clientHeight)
      })
      for (let i = 0; i < oldLiHeightArr.length; i++) {
        for (let j = 0; j < newLiHeightArr.length; j++) {
          if (i === j) {
            var maxHeight = oldLiHeightArr[i]> newLiHeightArr[j] ? oldLiHeightArr[i] : newLiHeightArr[j]

            oldDataLi[i].style.height = maxHeight + 'px'
            newDataLi[i].style.height = maxHeight + 'px'
          }
        }
      }
    }

 

最后调用函数，需setTimeout延迟执行，否则dom渲染未完成，会获取不到元素

mounted () {
    setTimeout(() => {
      this.handleLiHeight()
    }, 500)
  }

链接二内容：

vue项目如何动态设置元素高度     

vue项目如何利用:style动态设置元素高度，下面web建站小编给大家详细介绍一下实现代码！

1、template代码：

复制代码<div :style="{width: divWidth, height: divHeight}"></div>

2、data数据：

复制代码data() {
  return {
    divHeight:0,
    divWidth:0
  }
},

3、created方法：

复制代码created(){
  this.divWidth = document.body.clientWidth + "px";
  this.divHeight = document.body.clientHeight - 200 + "px";
},