当前位置：首页 > VUE

vue实现商品展开合起

2026-01-23 02:40:32VUE

实现商品展开/收起功能

使用Vue实现商品展开和收起功能，可以通过控制一个布尔值状态来切换显示内容。以下是一种常见的实现方式：

基础实现方法

模板部分

<template>
  <div class="product">
    <div class="product-info">
      {{ truncatedDescription }}
    </div>
    <button @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      description: '这里是商品的完整描述内容...',
      maxLength: 100,
      isExpanded: false
    }
  },
  computed: {
    truncatedDescription() {
      return this.isExpanded 
        ? this.description 
        : this.description.substring(0, this.maxLength) + '...'
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

进阶实现方案

添加动画效果 可以使用Vue的transition组件为展开/收起添加平滑动画：

<transition name="fade">
  <div class="product-info" v-if="isExpanded">
    {{ description }}
  </div>
</transition>

CSS样式

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

动态计算截断位置

对于需要精确控制显示行数的情况，可以使用CSS实现：

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

.product-info.expanded {
  -webkit-line-clamp: initial;
}

组件化实现

将功能封装为可复用组件：

vue实现商品展开合起

<template>
  <div>
    <div :class="['content', { 'expanded': isExpanded }]">
      <slot></slot>
    </div>
    <button @click="toggle">
      {{ isExpanded ? '收起' : '展开更多' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  },
  methods: {
    toggle() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>