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

好的，我可以为您提供一个简单的折叠面板组件的代码示例，满足您的需求，以下是示例代码：

<template>
  <div class="collapse">
    <div class="collapse-header" @click="toggleCollapse">
      <slot name="title"></slot>
    </div>
    <transition name="collapse">
      <div class="collapse-content" v-if="expanded" :style="{ height: contentHeight + 'px' }">
        <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.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;
}

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

使用时可以通过以下方式引入组件：

<template>
  <div>
    <collapse>
      <template #title>
        <h3>折叠面板标题1</h3>
      </template>
      <template #content>
        <p>折叠面板内容1</p>
      </template>
    </collapse>
    <collapse>
      <template #title>
        <h3>折叠面板标题2</h3>
      </template>
      <template #content>
        <p>折叠面板内容2</p>
      </template>
    </collapse>
  </div>
</template>

<script>
import Collapse from '@/components/Collapse.vue';

export default {
  components: {
    Collapse
  }
};
</script>

请注意，示例代码中使用了 Vue 的过渡动画实现了折叠展开时内容高度的动态变化。同时，为了避免组件内部样式影响到外部样式，使用了 scoped 属性对样式进行了作用域限制。