仅当内容超过两行时显示只读/隐藏按钮

我正在创建一个评论部分（类似于 youtube 的东西），并且我希望能够在 {{content}} 有多行时显示阅读更多/隐藏按钮。这就是我到目前为止所做的，我的阅读更多/隐藏按钮可以工作，因为我添加了一个计算的线夹，使内容仅在存在多行时才显示两行，我只想在存在多行的情况下显示该按钮。但如果您有任何其他建议使其发挥作用，我愿意接受。

<template>
  <div>
    <div class="d-flex flex-row align-items-center">
      <h4 class="card-title">{{ author }}</h4>

      <h6 class="card-subtitle text-muted ml-3">
        {{ timeAgo(createdAt) }} ago
      </h6>
    </div>

    <p
      class="multiline"
      :style="{'-webkit-line-clamp': computedLineclamp }"
    >
      <b
        class="timestamp"
        v-if="timestamp !== null"
      >
        @{{ timeToHHMMSS(timestamp) }}
      </b>

      {{ content }}
    </p>

    <div>
      <base-button
        v-show="!readmore"
        @click="changeLineclamp()"
        link
        class="text-white p-0"
        size="sm"
      >
        Read more
      </base-button>

      <base-button
        v-show="readmore"
        @click="hideContent()"
        link
        class="text-white p-0"
        size="sm"
      >
        Hide
      </base-button>
    </div> 
  </div>
</template>
  
<script>
// Internal modules
import { timeSince, toHHMMSS } from "@/plugins/timeControls.js";

export default {
    name: "comment-item",
    data() {
        return {
            lineclamp: 2,
            readmore: false,
            showButton: false,
            isMultiline: false,
        }
    },
    props: {
        id: {
            type: String,
            required: true,
        },
        author: {
            type: String,
            required: true,
        },
        createdAt: {
            type: Number,
            required: true,
        },
        timestamp: {
            type: Number,
            required: true,
        },
        content: {
            type: String,
            required: true,
        }
    },
    methods: {
        hideButton(){
            if (this.computedLineclamp) {
                this.readmore;
            }
        },
        changeLineclamp() {
            this.lineclamp = 'initial';
            this.readmore = true;
            this.showButton = false;
        },
        hideContent() {
            this.lineclamp = 2;
            this.readmore = false
        },
        timeAgo(date) {
            return timeSince(date);
        },
        timeToHHMMSS(time) {
            return toHHMMSS(time);
        },
    },
    computed: {
        computedLineclamp() {
            return this.lineclamp;
        },
    },
};
</script>
  
<style lang="scss" scoped>
@import "@/assets/sass/dashboard/custom/_variables.scss";
ul {
    list-style-type: none;
    padding: 0;
}

.button {
    visibility: none;
}
.timestamp {
    color: $primary;
}

.multiline {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    &.__lineclamp{
        -webkit-line-clamp: 2;
    }
    &.__none{
        -webkit-line-clamp: initial;
    }
}

.button-visible {
    display: block;
    color: red;

    &.__none {
        display: none;
    }
}

.hide {
    line-clamp: none;
}
</style>

我尝试在内容中添加 v-bind:class="{multiline__lineclamp:showButton==='button-visible', multiline__none:showButton==='button-visible__none'}" 但它不起作用，我也尝试在脚本部分创建一个方法，但没有成功

<p
  class="multiline"
  :class="{
    multiline__lineclamp:showButton === 'button-visible',
    multiline__none:showButton === 'button-visible__none'
  }"
  :style="{ '-webkit-line-clamp': computedLineclamp }"
>
  <b
    class="timestamp"
    v-if="timestamp !== null"
  >
    @{{ timeToHHMMSS(timestamp) }}
  </b>

  {{ content }}
</p>

如你所说-“我只是想展示一下是否存在优于 2 的线夹。”
我的理解是你想展示read_more/hide仅当文本夹超过 2 时才使用按钮。

因此，要做到这一点，您可以检查这两个条件 -

scroll height == client height (Text is fully rendered)
scroll height > client height (Text is clamped)

这是工作演示，它将像这样工作-

程序是——

1. 默认情况下，line-clamp: 2属性将应用于文本。
2. The read_more/hide仅当段落内的文本超过两行时按钮才可见，并且您可以显示/隐藏内容。
3. 演示中有三个按钮可将文本更改为一行、两行和三行，因此您可以在它们之间切换并查看结果。

技术部分是-

1. 我创建了一个名为的数据属性hide_btns隐藏两个按钮(read_more/hide)如果文本限制小于 2。
2. 然后，我创建了一个名为的方法，checkIfElClamped这将检查文本夹紧长度并切换数据属性hide_btns因此。
3. 我还使用了观察者钩子来监视文本，当文本发生变化时，它会调用相同的方法checkIfElClamped再次对文本采取动作夹紧。

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  resize: both; /* allowing resize for this demo only */
}

<html>
  <div id="app">
    <div>
      <button @click="clampToOne()">One line content</button>
      <button @click="clampToTwo()">Two line content</button>
      <button @click="clampToMore()">More than two line</button>

      <p class="multiline" :style="styleObj">
        {{ content }}
      </p>
      
      <div v-if="!hide_btns">
        <button
          v-show="!readmore"
          @click="changeLineclamp()"
          link
          class="text-white p-0"
          size="sm"
        >
          Read more
        </button>
        <button
          v-show="readmore"
          @click="hideContent()"
          link
          class="text-white p-0"
          size="sm"
        >
          Hide
        </button>
      </div>
    </div>
  </div>

  <!-- Don't forget to include Vue from CDN! -->
  <script src="https://unpkg.com/vue@2"></script>
  <script>
    new Vue({
      el: "#app", //Tells Vue to render in HTML element with id "app"
      data() {
        return {
          lineclamp: 2,
          readmore: false,
          content: null,
          hide_btns: false
        };
      },

      watch: {
        content: {
         immediate: true, // to trigger upon creation
         handler(newVal) {
          this.checkIfElClamped();
         }
        },  
      },

      methods: {
        checkIfElClamped() {
          // to reset the line clamp and read more button state
          this.hideContent();
          
          this.$nextTick(() => {
            let el = document.querySelector(".multiline");
            if(el) {
              this.hide_btns = el.scrollHeight === el.clientHeight; 
            }
          });
        },

        hideButton() {
          if (this.computedLineclamp) {
            this.readmore = true;
          }
        },

        changeLineclamp() {
          this.lineclamp = "initial";
          this.readmore = true;
          this.showButton = false;
        },

        hideContent() {
          this.lineclamp = 2;
          this.readmore = false;
        },

        clampToOne() {
          this.content =
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
        },

        clampToTwo() {
          this.content =
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
        },

        clampToMore() {
          this.content =
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting";
        }
      },
      
      computed: {
        computedLineclamp() {
          return this.lineclamp;
        },

        styleObj() {
          return {
            color: "red",
            "line-clamp": this.computedLineclamp + "!important",
            "-webkit-line-clamp": this.computedLineclamp + "!important"
          };
        }
      }
    });
  </script>
</html>