uniapp语言vue2写一个 折叠面板组件 要求title和content都可以使用slot自定义 要求折叠展示的时候content 高度要有动画效果, 越详细越好

好的，以下是更详细的代码实现：

<template>
  <div class="collapse">
    <div class="collapse-header" @click="toggleCollapse">
      <slot name="title"></slot>
      <div :class="{ 'rotate-icon': expanded }">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
          <path d="M896 512a384 384 0 1 1-384-384 384 384 0 0 1 384 384z" fill="#8a8a8a"/>
          <path d="M768 512a256 256 0 1 1-256-256 256 256 0 0 1 256 256z m-192 0a64 64 0 1 0-128 0 64 64 0 0 0 128 0z" fill="#fff"/>
        </svg>
      </div>
    </div>
    <transition name="collapse">
      <div class="collapse-content" v-if="expanded" :style="{ height: contentHeight + 'px' }" ref="content">
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expanded: false,
      contentHeight: 0
    };
  },
  methods: {
    toggleCollapse() {
      this.expanded = !this.expanded;
      if (this.expanded) {
        this.$nextTick(() => {
          this.contentHeight = this.$refs.content.clientHeight;
        });
      } else {
        this.contentHeight = 0;
      }
    }
  }
};
</script>

<style scoped>
.collapse {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.collapse-header {
  padding: 10px;
  background-color: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rotate-icon {
  transform: rotate(180deg);
}

.collapse-content {
  padding: 10px;
  overflow: hidden;
  transition: height 0.3s ease-out;
}
</style>

在这个示例中，我们增加了一个旋转箭头，用于表明当前折叠状态。同时，我们使用了 `this.$nextTick` 方法确保在内容高度计算之前，组件已经被渲染并更新了 DOM。

除此之外，我们还对样式进行了微调，使其更加美观。您可以根据需要进行更改。

使用方法与之前给出的示例相同，这里不再赘述。