更新记录

1.0.0（2026-10-08）下载此版本

首个版本，实现组件基础能力，支持 Vue2 / Vue3、全平台（App / H5 / 各家小程序）。

平台兼容性

uni-app(4.24)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
-	-	√	√	√	√	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	-	√	√	-	-	-

e-collapse 折叠面板

折叠面板组件，由 e-collapse 容器与 e-collapse-item 折叠项组成，适合 FAQ、分组表单、可折叠设置项等场景。

特性

支持手风琴模式（同时只展开一项）与普通模式（多项独立开合）
支持默认展开指定项
平滑的高度过渡动画
箭头使用 CSS 绘制 + 旋转动画，无字体依赖
支持禁用单个折叠项

基本用法

<template>
  <view>
    <!-- 手风琴模式：同时只展开一项 -->
    <e-collapse v-model="active" accordion>
      <e-collapse-item name="1" title="什么是 ETC 门架？">
        <text>ETC 门架是设置在高速公路主线上方的电子不停车收费设备。</text>
      </e-collapse-item>
      <e-collapse-item name="2" title="如何查看通行流水？">
        <text>可在「通行记录」页面按时间范围查询。</text>
      </e-collapse-item>
      <e-collapse-item name="3" title="数据更新频率？">
        <text>门架交易数据约 5 分钟同步一次。</text>
      </e-collapse-item>
    </e-collapse>

    <!-- 普通模式：多项可同时展开，v-model 传数组 -->
    <e-collapse v-model="activeList">
      <e-collapse-item name="a" title="分组一">内容一</e-collapse-item>
      <e-collapse-item name="b" title="分组二">内容二</e-collapse-item>
    </e-collapse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: '1',        // 手风琴模式：字符串
      activeList: ['a']   // 普通模式：数组
    }
  }
}
</script>

e-collapse 属性

属性名	类型	默认值	说明
`modelValue`	String \| Number \| Array	`''`	展开项。手风琴模式传单值，普通模式传数组
`accordion`	Boolean	`false`	是否手风琴模式
`border`	Boolean \| Number	`true`	边框样式：`false`/`0` 无边框，`true`/`1` 外边框，`2` 全边框

e-collapse-item 属性

属性名	类型	默认值	说明
`name`	String \| Number	`''`	唯一标识，不传则用 `title` 兜底
`title`	String	`''`	标题
`disabled`	Boolean	`false`	是否禁用
`maxHeight`	Number \| String	`2000`	内容区最大高度（rpx），超出则滚动

插槽

插槽名	说明
（默认）	折叠内容
`icon`	标题左侧图标
`extra`	标题右侧附加内容

事件

组件	事件名	说明	回调参数
`e-collapse`	`change`	展开项变化	手风琴返回单值，普通返回数组
`e-collapse-item`	`click`	点击标题	`{ name, originEvent }`

实现说明

展开动画为什么用 max-height 而不是 height？

height 需要知道内容的确切高度才能过渡，而内容高度在渲染前不可知，小程序端也无法可靠地读取 scrollHeight。改用 max-height 从 0 过渡到 2000rpx 这个足够大的上限值，视觉上足够顺滑且跨端稳定。

副作用：如果内容超过 2000rpx，需要调大 maxHeight，否则会被截断。

为什么内部统一用数组存展开项？

手风琴模式存单值、普通模式存数组会让状态逻辑出现两套分支。组件内部统一用 activeNames 数组维护，只在对外 emit 时按当前模式转换成单值或数组，这样 toggle 逻辑只需要写一份。

使用提示

手风琴模式下切换 accordion 会怎样？

从普通模式切到手风琴模式时，如果当前有多个面板展开，组件会自动收敛为只保留第一个，避免出现「手风琴模式下却展开多项」的矛盾状态。

默认全部收起

v-model 传 ''（手风琴）或 []（普通）即可全部收起。

平台兼容

App (vue / nvue)、H5、全平台小程序均支持。

隐私与权限

纯前端渲染组件，不申请任何权限，不采集、不上传任何数据。