Vue 中文本内容超出规定行数后展开收起的处理的实现方法
时间: 2024-03-09 14:05:16 浏览: 23
在 Vue 中实现文本内容超出规定行数后展开收起功能的方法有多种,其中比较常用的方式是使用 CSS 样式和 Vue 指令来实现。
1. 使用 CSS 样式实现:
首先,需要使用 CSS 样式来限制文本的行数,例如:
```css
.text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 显示 3 行文本 */
overflow: hidden;
}
```
然后,在模板中使用 v-bind:class 绑定样式,并添加一个“展开/收起”按钮,例如:
```html
<template>
<div>
<div class="text" :class="{ 'expand': isExpanded }">{{ text }}</div>
<div v-if="!isExpanded && needExpand" class="btn" @click="expand">展开</div>
<div v-if="isExpanded && needExpand" class="btn" @click="collapse">收起</div>
</div>
</template>
```
最后,在 Vue 实例中添加响应的代码,例如:
```js
export default {
data() {
return {
text: '这是一段很长的文本,可能会超过规定的行数。这是一段很长的文本,可能会超过规定的行数。这是一段很长的文本,可能会超过规定的行数。',
isExpanded: false
}
},
computed: {
needExpand() {
const element = this.$refs.text
return element.scrollHeight > element.offsetHeight
}
},
methods: {
expand() {
this.isExpanded = true
},
collapse() {
this.isExpanded = false
}
}
}
```
2. 使用 Vue 指令实现:
首先,定义一个 v-ellipsis 指令,用于限制文本的行数,并添加“展开/收起”按钮,例如:
```html
<template>
<div>
<div v-ellipsis="3">{{ text }}</div>
<div v-if="!isExpanded && needExpand" class="btn" @click="expand">展开</div>
<div v-if="isExpanded && needExpand" class="btn" @click="collapse">收起</div>
</div>
</template>
```
然后,在 Vue 实例中添加 v-ellipsis 指令的实现,例如:
```js
Vue.directive('ellipsis', {
bind(el, binding) {
const lineHeight = parseInt(getComputedStyle(el).lineHeight)
const lineClamp = binding.value || 1
el.style.overflow = 'hidden'
el.style.display = '-webkit-box'
el.style.webkitBoxOrient = 'vertical'
el.style.webkitLineClamp = lineClamp
el.style.maxHeight = lineHeight * lineClamp + 'px'
}
})
```
最后,在 Vue 实例中添加响应的代码,例如:
```js
export default {
data() {
return {
text: '这是一段很长的文本,可能会超过规定的行数。这是一段很长的文本,可能会超过规定的行数。这是一段很长的文本,可能会超过规定的行数。',
isExpanded: false
}
},
computed: {
needExpand() {
const element = this.$el.querySelector('[v-ellipsis]')
return element.scrollHeight > element.offsetHeight
}
},
methods: {
expand() {
this.isExpanded = true
},
collapse() {
this.isExpanded = false
}
}
}
```