vue 动态获取v-for每个列表项的高度

代码实现：

<template>
  <div>
    <div v-for="(item, index) in dynamicArray" :key="index" ref="listItems" class="Showhide">
      <p v-html="item.name"></p>
      {{ showMore[index] }}
      <button v-if="showMore[index].value != false" class="view-more" @click="seeMore(item.name)">
        查看更多
      </button>
    </div>
    <div class="custom-modal-wrap" v-if="isShow" @click.self="handleCancel">
      <div class="custom-modal">
        <div class="custom-modal-header">
          <div class="modal-close" @click="handleCancel">
            <a-icon type="close" />
          </div>
          <div class="custom-modal-body">
            <div class="alarm-info" v-html="content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: '', //内容
      isShow: false, //控制显隐
      showMore: [
        { value: false },
        { value: false },
        { value: false },
        { value: false },
        { value: false }
      ], // 每个元素都变为一个对象
      dynamicArray: [
        {
          name: '<a href="#第一章">第一章</a><br><a href="#第一章">第一章节</a><br><a href="#第一章">第一章节</a><br>'
        },
        {
          name: '<a href="#第二章">第二章</a><br><p> 近日，中国科学院宁波材料技术与工程研究所、航天五院钱学森实验室、中国科学院物理研究所和南京大学等联合团队，对嫦娥五号月壤颗粒中的氦原子进行了探测和研究。发现月壤中钛铁矿颗粒表面都存在一层非晶玻璃。研究人员在玻璃层中观测到了大量的氦气泡，直径大约为5～25nm，且大部分气泡都位于玻璃层与晶体的界面附近。而在颗粒内部晶体中，基本没有氦气泡。鉴于氦在钛铁矿中的高溶解度，研究人员认为氦原子首先由太阳风注入钛铁矿晶格中，之后在晶格的沟道扩散效应下，氦会逐渐释放出来。而表层玻璃具有原子无序堆积结构，限制了氦原子的释放，被捕获并逐渐储存起来，形成了气泡。</p>氦 - 3作为氦的一种同位素，在能源、科学研究等领域具有重要应用价值。100吨氦 - 3核聚变产生的能量即可供应全球使用1年，且氦 - 3核聚变过程无中子二次辐射危险，更加清洁和可控。另外，氦 - 3是获得极低温环境的关键制冷剂，是超导、量子计算、拓扑绝缘体等前沿研究领域的必需物质。然而，地球上氦元素主要是氦 - 4，氦 - 3储量只有0.5吨左右，远远无法满足现有需求。    <br/> 氦 - 3是太阳风的重要成分，月球由于常年受太阳风的辐照，储存了大量氦 - 3。但是为什么月球具有丰富的战略资源氦 - 3？氦 - 3在月球上是以什么形式储藏的？这些问题还没有明确的答案。探索月球资源，特别是氦 - 3的含量、分布和开采，已经</p>'
        },
        { name: '<a href="#第三章">第三章</a><br>' },
        { name: '<a href="#第三章">第三章</a><br>' },
        { name: '<a href="#第三章">第三章</a><br>' }
      ]
    }
  },
  mounted () {
    // 初始化一个空数组showMore。
    let showMore = []
    //遍历this.dynamicArray中的每一个元素。对于每一个元素，向showMore数组添加一个新的对象，这个对象的value属性初始值为false。这样，showMore数组的长度与this.dynamicArray相同，每个对应的项都初始化为false。
    for (let i = 0; i < this.dynamicArray.length; i++) {
      showMore.push({ value: false })
    }
    //获取名为listItems的Vue引用（Vue中用$refs来获取子组件或DOM元素）。
    const listItems = this.$refs.listItems
    if (listItems) {// 如果listItems存在，执行以下操作：
      listItems.forEach((li, index) => {//对listItems中的每个元素进行遍历（使用forEach方法）。
        const contentHeight = li.querySelector('p').offsetHeight // 对于每个元素，通过li.querySelector('p').offsetHeight获取该元素下第一个<p>标签的高度（以像素为单位）。
        this.$nextTick(() => {//  使用this.$nextTick()来确保在DOM更新完成后再获取高度。在DOM更新完成后，根据段落的高度决定showMore[index].value的值：如果段落的高度大于100px，则对应的showMore[index].value设置为true；否则，设置为false。
          if (contentHeight > 100) {
            this.showMore[index].value = true
          } else {
            this.showMore[index].value = false
          }
        })
      })
    }
  },
  methods: {
    handleCancel () {
      this.isShow = false
      if (this.onCancel) {
        this.onCancel()
      }
    },
    seeMore (i) {
      this.content = i
      this.isShow = true
    }
  }
}
</script>

<style>
.Showhide {
  position: relative;
  border: 1px solid palegreen;
  margin-bottom: 20px;
  overflow: hidden;
  max-height: 100px;
}

.view-more {
  position: absolute;
  bottom: 0;
  border: 1px solid red;
}

.custom-modal-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 999999;
  background-color: rgba(55, 55, 55, 0.6);
}

.custom-modal {
  width: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 10px;
}

.custom-modal-header {
  width: 100%;
  height: auto;
  line-height: normal;
  padding: 14px 16px;
}

.modal-close {
  display: flex;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  color: #888888;
  cursor: pointer;
}

.custom-modal-body {
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.5;
}
</style>

效果:

20230919_145227