展开更多怎么控制呢，超过两行则显示展开更多，低于两行则不显示

Question

    <div class="histories-wrap" style="max-height: 92px">
      <div class="histories" id="histories" ref="historyRef">
        <button-clear
          v-for="i in 10"
          :key="i"
          :search-content="'HelloWorld呀'"
        ></button-clear>
      </div>
    </div>
    <!-- 展开更多 -->
    <div class="history-fold-wrap" @click="toggleShowMore">
      <div class="fold-text">展开更多</div>
    </div>
  </div>

展开更多怎么控制呢，超过两行则显示展开更多，低于两行则不显示

Answer 1

<template>
  <div>
    <div class="histories-wrap" :style="{ maxHeight: isExpanded ? 'none' : '92px' }">
      <div class="histories" ref="historyRef">
        <button-clear
          v-for="i in 10"
          :key="i"
          :search-content="'HelloWorld呀'"
        ></button-clear>
      </div>
    </div>
    <!-- 展开更多 -->
    <div v-if="showMore" class="history-fold-wrap" @click="toggleShowMore">
      <div class="fold-text">{{ isExpanded ? "收起" : "展开更多" }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      showMore: false
    }
  },
  mounted() {
    // 假设每行的高度为46px
    if (this.$refs.historyRef.clientHeight > 46 * 2) {
      this.showMore = true;
    }
  },
  methods: {
    toggleShowMore() {
      this.isExpanded = !this.isExpanded;
    }
  }
}
</script>