vue实现展开全部

Vue实现展开全部功能

实现展开全部功能通常涉及控制内容的显示与隐藏，结合Vue的数据绑定和条件渲染可以轻松实现。以下是几种常见方法：

使用v-show或v-if控制显示

通过绑定布尔值变量，切换内容的显示状态。v-show通过CSS控制显示，v-if会动态添加或移除DOM元素。

<template>
  <div>
    <p v-show="isExpanded">{{ fullContent }}</p>
    <p v-show="!isExpanded">{{ truncatedContent }}</p>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      fullContent: '这里是全部内容...',
      truncatedContent: '这里是部分内容...'
    }
  }
}
</script>

结合计算属性动态截取内容

当需要根据字数截断内容时，可使用计算属性动态生成截断后的文本。

<template>
  <div>
    <p>{{ displayContent }}</p>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      fullContent: '长文本内容...',
      maxLength: 100
    }
  },
  computed: {
    displayContent() {
      return this.isExpanded 
        ? this.fullContent 
        : this.fullContent.slice(0, this.maxLength) + '...'
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

使用CSS过渡效果

为展开/收起添加平滑的过渡效果，提升用户体验。

<template>
  <div>
    <div class="content" :class="{ 'expanded': isExpanded }">
      {{ fullContent }}
    </div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<style>
.content {
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.content.expanded {
  max-height: 1000px;
}
</style>

第三方库实现

对于复杂场景（如多行文本截断），可使用插件如vue-clamp：

npm install vue-clamp

<template>
  <div>
    <v-clamp autoresize :ellipsis="'...'" :expanded="isExpanded">
      {{ fullContent }}
    </v-clamp>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开全部' }}
    </button>
  </div>
</template>

<script>
import VClamp from 'vue-clamp'
export default {
  components: { VClamp },
  data() {
    return {
      isExpanded: false,
      fullContent: '长文本内容...'
    }
  }
}
</script>

以上方法可根据实际需求选择，简单场景推荐使用v-show或计算属性，需要动画效果时结合CSS过渡，复杂文本处理可考虑第三方库。