vue展开全文实现

Vue 实现展开全文功能

在 Vue 中实现展开全文功能可以通过动态绑定 class 或 style 来控制文本的显示高度，结合点击事件切换状态。以下是几种常见实现方式：

基础实现方案

1. 使用 v-if 或 v-show 控制全文显示

   
   <template>
   <div>
    <p v-if="!isExpanded">{{ truncatedText }}</p>
    <p v-else>{{ fullText }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全文' }}
    </button>
   </div>
   </template>

export default { data() { return { fullText: '这里是完整的文本内容...', isExpanded: false } }, computed: { truncatedText() { return this.fullText.slice(0, 50) + '...' } } } ```

CSS 过渡动画方案

1. 通过 CSS 实现平滑展开效果

   
   <template>
   <div>
    <div 
      class="expandable-content" 
      :class="{ 'expanded': isExpanded }"
      @click="isExpanded = !isExpanded"
    >
      {{ fullText }}
    </div>
   </div>
   </template>

.expandable-content { max-height: 60px; overflow: hidden; transition: max-height 0.3s ease; cursor: pointer; } .expandable-content.expanded { max-height: 1000px; } ```

第三方组件方案

1. 使用 vue-read-more 等现成组件

   npm install vue-read-more

<template>
  <read-more 
    :text="fullText" 
    :max-chars="100"
    more-str="展开全文"
    less-str="收起"
  />
</template>

<script>
import ReadMore from 'vue-read-more'
export default {
  components: { ReadMore },
  data() {
    return {
      fullText: '长文本内容...'
    }
  }
}
</script>

高级实现技巧

• 动态计算文本高度

  methods: {
  checkTextOverflow() {
    this.needsExpand = this.$refs.textEl.scrollHeight > this.$refs.textEl.clientHeight
  }
  }

• 响应式截断文本

  

  computed: {
  displayText() {
    return this.isExpanded 
      ? this.fullText 
      : this.fullText.substring(0, this.truncateLength) + '...'
  }
  }

这些方案可以根据具体需求组合使用，实现更完善的展开全文功能。对于复杂场景，可以考虑结合 Vue 的过渡系统或第三方动画库实现更丰富的视觉效果。