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

您可以使用 Vue 的计算属性和 CSS 样式来实现这个功能。

1. 首先，您需要将文本内容存储在一个 Vue data 属性中：

data() {
  return {
    text: '这是一段超过三行的文本内容，需要显示展开按钮'
  }
}

2. 接下来，您可以编写一个计算属性来确定文本是否超过三行：

computed: {
  isTextOverflow() {
    const element = document.createElement('div')
    element.innerText = this.text
    element.style.position = 'absolute'
    element.style.visibility = 'hidden'
    element.style.height = 'auto'
    element.style.width = '300px' // 假设文本宽度为 300px
    document.body.appendChild(element)
    const isOverflow = element.offsetHeight > 3 * parseFloat(window.getComputedStyle(element).lineHeight)
    document.body.removeChild(element)
    return isOverflow
  }
}

此计算属性将创建一个 div 元素，将文本内容插入其中，然后将其添加到页面中以获取其高度。然后，它将检查文本是否超过三行，通过计算元素的高度和行高来实现。最后，它将从页面中删除元素，并返回一个布尔值，指示文本是否超过三行。

3. 最后，您可以使用 v-if 指令根据计算属性的返回值来显示或隐藏展开按钮：

<div>
  <p :class="{ 'text-overflow': isTextOverflow }">{{ text }}</p>
  <button v-if="isTextOverflow">展开</button>
</div>

在此示例中，我们为文本段落添加了一个名为 "text-overflow" 的 CSS 类，以便在文本超过三行时将其截断。我们还使用 v-if 指令来确定是否应显示展开按钮。

最后，您可以使用 CSS 样式来设置文本段落的截断和展开按钮的样式：

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

这将通过使用 -webkit-box 属性将文本段落截断为三行，并使用省略号来表示文本的截断。展开按钮将具有蓝色背景和白色文本，并具有一些基本的边框半径和内边距。