更新记录

1.0.0（2026-06-12） 下载此版本

✅ 初始版本 ✅ 支持基础展开/收起功能 ✅ 支持 easycom 自动引入 ✅ 支持自定义标题插槽 ✅ 支持展开动画效果

平台兼容性

uni-app(3.7.9)

📦 collaps-panel-pro

符合 easycom 规范的高性能折叠面板组件，专为 uni-app 项目设计

✨ 特性

• 📱 跨平台兼容：完美支持 H5、微信小程序、App 等多端
• 🚀 easycom 自动引入：无需手动 import，直接使用
• 🎨 精美动画：流畅的展开/收起过渡效果
• ⚙️ 灵活配置：支持默认展开、禁用状态等多种配置
• 🔧 自定义插槽：支持自定义标题和内容区域
• 📡 事件回调：实时监听展开状态变化

🚀 快速开始

基础用法

<template>
  <view class="demo">
    <collaps-panel-pro title="基础面板">
      <text>点击面板头部即可展开或收起内容</text>
    </collaps-panel-pro>
  </view>
</template>

默认展开

<template>
  <view class="demo">
    <collaps-panel-pro title="默认展开" :open="true">
      <text>页面加载时自动展开</text>
    </collaps-panel-pro>
  </view>
</template>

禁用状态

<template>
  <view class="demo">
    <collaps-panel-pro title="禁用面板" :disabled="true">
      <text>无法点击展开</text>
    </collaps-panel-pro>
  </view>
</template>

监听状态变化

<template>
  <view class="demo">
    <collaps-panel-pro 
      title="监听状态" 
      @change="onPanelChange"
      @update:open="onOpenChange"
    >
      <text>展开状态: {{ isOpen }}</text>
    </collaps-panel-pro>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    onPanelChange(isOpen) {
      console.log('面板状态变化:', isOpen)
    },
    onOpenChange(isOpen) {
      this.isOpen = isOpen
    }
  }
}
</script>

自定义标题插槽

<template>
  <view class="demo">
    <collaps-panel-pro>
      <template #title>
        <view class="custom-title">
          <text class="icon">⭐</text>
          <text>自定义标题</text>
        </view>
      </template>
      <text>使用插槽自定义标题内容</text>
    </collaps-panel-pro>
  </view>
</template>

<style lang="scss" scoped>
.custom-title {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
.icon {
  font-size: 32rpx;
}
</style>

📦 Props

📡 Events

🎰 Slots

📁 目录结构

components/
└── collaps-panel-pro/
    ├── collaps-panel-pro.vue  # 组件主文件
    ├── package.json           # 组件配置
    └── README.md              # 组件文档

📝 更新日志

v1.0.0

• ✅ 初始版本
• ✅ 支持基础展开/收起功能
• ✅ 支持 easycom 自动引入
• ✅ 支持自定义标题插槽
• ✅ 支持展开动画效果

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

Made with ❤️ for uni-app