vue 循环文本列表超出3行显示...点击展开按钮查看全部（展开收起）

效果图

实现步骤

循环列表在页面中无法获取到dom,所以封装组件，获取dom。

1.父组件代码

<template>
  <div class="container">
    <div class="list" v-for="(item, index) in dataList" :key="index">
      <foldText :showContent="item.text"></foldText>
    </div>
  </div>
</template>

<script>
import foldText from "./components/fold_text";
export default {
  data() {
    return {
      dataList: [
        {
          text: `这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字`,
        },
        {
          text:
            "这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字",
        },
        {
          text: "这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字",
        },
        {
          text:
            "这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字",
        },
        {
          text:
            "a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig ",
        },  {
          text:
            "a little pig a little pig a little piga little piga little piga little piga little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig a little pig ",
        },
      ],
    };
  },
  components: { foldText },
  created() {},
  methods: {},
};
</script>

<style scoped>
.container {
  padding: 40px;
}
.list {
  width: 500px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: left;
  margin-bottom: 20px;
  padding: 8px;
}
</style>

2.子组件代码

<template>
  <div class="wrap">
    <div :class="textOver && !btnFold ? 'inner over' : 'inner'" ref="divRef">
      <span class="content" ref="spanRef">{{ showContent }}</span>
    </div>
    <span class="btn" v-if="textOver" @click="btnFold = !btnFold">{{
      btnFold ? "收起" : "展开"
    }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textOver: false, //文本是否超出3行
      btnFold: false, //按钮默认显示展开
    };
  },
  props: {
    showContent: {
      type: String,
      default: false,
    },
  },
  created() {
      this.$nextTick(() => {
      // 判断文本是否超过3行
      if (this.$refs.divRef) {
        let descHeight = window
          .getComputedStyle(this.$refs.divRef)
          .height.replace("px", "");
        console.log("descHeight:" + descHeight);
        if (descHeight > 60) {
          this.textOver= true;
        } else {
          this.textOver= false;
        }
      }
    });
   },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.wrap {
  padding-bottom: 30px;
}
.over {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.btn {
  font-size: 14px;
  color: rgb(75, 75, 216);
  float: right;
  cursor: pointer;
  margin-top: 10px;
}
</style>