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

好的，下面是一个使用 UniApp 语言（Vue2）写的折叠面板组件，满足要求：

<template>
  <div>
    <div class="title" @click="toggle">
      <slot name="title"></slot>
    </div>
    <transition name="panel">
      <div class="content" v-show="expanded" :style="{height: contentHeight}">
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expanded: false,
      contentHeight: 0,
    };
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    },
  },
  mounted() {
    this.contentHeight = this.$refs.content.scrollHeight + 'px';
  },
};
</script>

<style>
.title {
  cursor: pointer;
}
.content {
  overflow: hidden;
  transition: height 0.3s ease-out;
}
.panel-enter-active,
.panel-leave-active {
  transition: height 0.3s ease-out;
}
.panel-enter,
.panel-leave-to {
  height: 0;
  overflow: hidden;
}
</style>

这个组件通过使用插槽来允许用户自定义 title 和 content 的内容。在组件内部，使用了 UniApp 提供的 transition 组件来实现高度动画效果。具体来说，通过设置 content 的高度，来实现折叠和展开效果。

使用时，可以像下面这样使用：

<template>
  <div>
    <my-panel>
      <template v-slot:title>
        折叠面板标题
      </template>
      <template v-slot:content>
        折叠面板内容
      </template>
    </my-panel>
  </div>
</template>

<script>
import MyPanel from '@/components/MyPanel';

export default {
  components: {
    MyPanel,
  },
};
</script>

其中，MyPanel 是你自己定义的组件名。在组件中，使用了两个 slot 来分别代表 title 和 content。注意，slot 的名字要和组件内部定义的名字一致。在组件中，我们使用了 ref 来获取 content 的高度，并在 mounted 钩子函数中初始化 contentHeight 变量。