Vue 文本超过三行时显示展开按钮

可以使用 Vue 的计算属性和指令来实现文本超过三行时显示展开按钮的功能。

首先，在模板中使用 `v-textarea` 组件或普通的 `textarea` 元素来渲染文本区域，并为其绑定一个 `v-ellipsis` 自定义指令，用于限制文本的行数和添加省略号：

<template>
  <div>
    <textarea v-ellipsis>{{ text }}</textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.'
    }
  }
}
</script>

<style>
textarea {
  width: 100%;
  height: 90px;
  border: none;
  resize: none;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  padding: 10px;
}

.ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 2px;
  padding-left: 5px;
  background: white;
}
</style>

然后，定义一个计算属性 `isOverflow` 来判断文本是否超过三行：

<template>
  <div>
    <textarea v-ellipsis>{{ text }}</textarea>
    <button v-if="isOverflow" @click="toggle">{{ expanded ? '收起' : '展开' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.',
      expanded: false
    }
  },
  computed: {
    isOverflow() {
      const el = this.$el.querySelector('textarea')
      return el.scrollHeight > el.offsetHeight + 10 * 2 * 1.5 // 计算文本区域高度是否超过三行
    }
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded
    }
  }
}
</script>

<style>
textarea {
  width: 100%;
  height: {{ expanded ? 'auto' : '90px' }}; /* 根据状态决定文本区域高度 */
  border: none;
  resize: none;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5;
  padding: 10px;
}

.ellipsis::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 2px;
  padding-left: 5px;
  background: white;
}
</style>

最后，在模板中根据 `isOverflow` 的值来决定是否显示展开按钮，并绑定 `toggle` 方法来切换文本区域的状态。当展开按钮被点击时，将 `expanded` 属性设为 `true`，文本区域的高度随之变为自适应；当再次点击展开按钮时，将 `expanded` 属性设为 `false`，文本区域的高度恢复到默认值。