组件开发--手风琴，实现展开收起功能

需求

实现手风琴效果，点击展开内容展示，点击收起内容隐藏

效果图

组件引用

<ProcessSteps
      v-for="(item, index) in processStepsList"
      :key="item.value + index"
      :index="index"
      :label="item.label"
      :open="item.open"
      :onClickOpen="() => handleClickOpen(index)"
>
    <div v-if='item.value==1'>{{item.label}}</div>
    <div v-else-if='item.value==2'>{{item.label}}</div>
    <div v-else-if='item.value==3'>{{item.label}}</div>
    <div v-else='item.value==1'>4{item.label}}</div>
</ProcessSteps>


const processStepsList = ref([
  { label: 'label1', value: '1', code: 'parse', open: true },
  { label: 'label2', value: '2', code: 'process', open: true },
  { label: 'label3', value: '3', code: 'return', open: true },
  { label: 'label4', value: '4', code: 'complex', open: true },
]);
//展开收起
function handleClickOpen(index) {
  processStepsList.value[index].open = !processStepsList.value[index].open
}

组件代码

<!--
 * @Author: SunnyYang
 * @Date: 2024-01-19 10:44:56
 * @LastEditors: SunnyYang
 * @LastEditTime: 2024-01-21 13:07:35
 * @Description: 
-->
<template>
  <div class="process-steps flex-between">
    <div class="process-steps-title">
      <span class="num">{{ index + 1 }}</span>
      <span class="text">
        {{ label }}
      </span>
    </div>
    <div class="process-steps-arrow flex-items-center" @click="onClickOpen">
      {{ open ? '收起' : '展开' }}
      <img v-if="open" src="@/assets/images/icon_expand_up.png" alt="" srcset="" class="icon-arrow" />
      <img v-else src="@/assets/images/icon_expand_down.png" alt="" srcset="" class="icon-arrow" />
    </div>
  </div>

  <div class="process-steps-content">
    <slot></slot>
  </div>
</template>

<script setup name='ProcessSteps'>
defineProps(['index', 'label', 'open', 'onClickOpen']);
</script>

<style lang="scss" scoped>
$color: #1d70f5;
$color-text: #000000;
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-items-center {
  display: flex;
  align-items: center;
}
.process-steps {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin-top: 36px;
  margin-bottom: 16px;
  &-title {
    @extend .flex-items-center;
    .num {
      width: 24px;
      height: 24px;
      background: $color;
      color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 8px;
      font-size: 14px;
      font-weight: 600;
    }
    .text {
      font-size: 16px;
      font-weight: 600;
      color: $color-text;
    }
  }

  &-arrow {
    font-size: 16px;
    color: $color;
    padding-left: 120px;
    cursor: pointer;
  }

  .icon-arrow {
    width: 16px;
    height: 16px;
  }
}
</style>