展开收起 CSS封装(组件)

<template>
  <div>
    <div style="display: flex; align-items: flex-end">
      <p :class="istrue ? 'overs' + lengths : 'FontSize'" ref="over">
        {{ title }}
      </p>
      <span>
        <img
          v-if="getImgShow"
          @click="istrue = !istrue"
          style="
            width: 15px;
            height: 15px;
            margin-bottom: -5px;
            cursor: pointer;
          "
          :src="getImgUrl(istrue)"
          alt
        />
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: this.text,
      lengths: this.maxLines,
      istrue: true,
      getImgShow: false,
    };
  },
  props: {
    text: {
      type: String,
      default: "",
    },
    maxLines: {
      type: Number,
      default: 3,
    },
  },
  mounted() {
    this.showLife();
  },
  methods: {
    showLife() {
      let refsList = this.$refs.over;
      if (refsList.scrollHeight > refsList.clientHeight) {
        this.getImgShow = true;
      } else {
        this.getImgShow = false;
      }
    },
    getImgUrl(img) {
      if (img) {
        return require("@/assets/image/open.png");
      } else {
        return require("@/assets/image/put.png");
      }
    },
  },
  watch: {
    text: function (newVal, oldVal) {
      this.title = newVal;
    },
    lengths: function (newVal, oldVal) {
      this.maxLines = newVal;
    },
  },
};
</script>
<style scoped>
.overs1 {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overs2 {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overs3 {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overs4 {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.overs5 {
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.FontSize {
  font-size: 12px;
}
</style>