uniapp语言写一个 折叠面板组件

好的，我可以帮你写一个基于uniapp的折叠面板组件。

1. 创建一个名为`FoldPanel`的组件。

<template>
  <div class="fold-panel">
    <div class="fold-panel-header" @click="toggleFold">
      <div class="fold-panel-title">{{ title }}</div>
      <div class="fold-panel-arrow" :class="{fold: folded}"></div>
    </div>
    <div class="fold-panel-content" :style="{height: contentHeight}">
      <slot></slot>
    </div>
  </div>
</template>

2. 在组件中定义`title`、`folded`和`contentHeight`三个属性以及`toggleFold`方法。

<script>
export default {
  name: 'FoldPanel',
  props: {
    title: String,
    folded: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      contentHeight: this.folded ? '0px' : 'auto'
    }
  },
  methods: {
    toggleFold () {
      this.folded = !this.folded
      this.contentHeight = this.folded ? '0px' : 'auto'
    }
  }
}
</script>

3. 在CSS中定义组件的样式。

.fold-panel {
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px;
}

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

.fold-panel-title {
  font-size: 16px;
  font-weight: bold;
}

.fold-panel-arrow {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
  transition: transform 0.2s ease;
}

.fold-panel-arrow.fold {
  transform: rotate(-90deg);
}

.fold-panel-content {
  transition: height 0.2s ease;
  overflow: hidden;
  padding: 10px;
}

现在你可以在uniapp中使用这个折叠面板组件了。例如：

<template>
  <div>
    <FoldPanel title="面板1">
      面板1的内容
    </FoldPanel>
    <FoldPanel title="面板2" :folded="false">
      面板2的内容
    </FoldPanel>
  </div>
</template>

<script>
import FoldPanel from '@/components/FoldPanel.vue'

export default {
  components: {
    FoldPanel
  }
}
</script>

这样就可以在页面中显示两个折叠面板了。第一个面板默认是折叠状态，而第二个面板默认是展开状态。