更新记录

0.1.0（2025-08-31） 下载此版本

• chore: 更新文档

0.0.9（2025-04-25） 下载此版本

• feat: 兼容uniappx鸿蒙next

0.0.8（2025-03-05） 下载此版本

• fix: 修复size无效问题

平台兼容性

uni-app(4.75)

uni-app x(4.75)

其他

lime-collapse 折叠面板组件

一个功能丰富的折叠面板组件，用于展示分组内容区块。支持手风琴模式、标题、副标题、图标、自定义内容等多种配置，可用于展示分类信息、FAQ问答、详情展示等多种场景。组件提供了丰富的自定义选项，可以满足各种复杂的界面设计需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 折叠面板组件文档 - 站点1
• 折叠面板组件文档 - 站点2
• 折叠面板组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-collapse
2. 导入后可能需要重新编译项目
3. 在页面中使用l-collapse和l-collapse-panel组件

::: tip 注意🔔 本插件依赖的【lime-svg】是原生插件，如果购买(收费为6元)则需要自定义基座，才能使用， 若不需要删除即可 :::

代码演示

基础用法

最简单的折叠面板用法，包含标题和内容。

<l-collapse>
  <l-collapse-panel title="标题1">
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

手风琴模式

每次只能展开一个面板，其他面板会自动关闭。

<l-collapse accordion>
  <l-collapse-panel title="标题1">
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

卡片风格

使用圆角卡片风格展示折叠面板。

<l-collapse inset>
  <l-collapse-panel title="标题1">
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

带图标的面板

在面板左侧添加图标，可以设置图标的名称、颜色和大小。

<l-collapse>
  <l-collapse-panel 
    title="标题1" 
    icon="home"
    iconColor="#1989fa"
    iconSize="24px"
  >
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

带图片的面板

在面板左侧添加图片。

<l-collapse>
  <l-collapse-panel 
    title="标题1" 
    image="https://example.com/image.jpg"
    imageWidth="40px"
    imageHeight="40px"
  >
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

禁用面板

禁止特定面板的展开/收起操作。

<l-collapse>
  <l-collapse-panel title="标题1" disabled>
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

受控模式

通过v-model控制展开的面板。

<l-collapse v-model="activeNames">
  <l-collapse-panel title="标题1" value="1">
    <text>这里是面板内容</text>
  </l-collapse-panel>
  <l-collapse-panel title="标题2" value="2">
    <text>这里是面板内容</text>
  </l-collapse-panel>
</l-collapse>

const activeNames = ref([])

自定义内容

通过 title 插槽可以自定义标题栏的内容。插槽还有icon。通过设置 icon 属性在标题左侧展示图标，通过 image 属性在标题左侧展示图片。

<l-collapse>
    <l-collapse-panel>
        <template #title>
            <view style="flex-direction: row; align-items: center;">
                <text style="margin-right: 10rpx;">标题1</text> 
                <l-icon name="help-circle" size="32rpx" />
            </view>
        </template>
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" icon="map-aiming">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
</l-collapse>

全部展开与全部切换

通过 Collapse 实例上的 toggleAll 方法可以实现全部展开与全部切换

<l-collapse ref="collapseRef">
    <l-collapse-panel title="折叠标题">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" :disabled="true">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
</l-collapse>

<button @click="openAll">全部展开</button>
<button @click="toggleAll">全部切换</button>

// vue
const openAll = () => {
    this.$refs.collapseRef.toggleAll(true)
}
const toggleAll = () => {
    this.$refs.collapseRef.toggleAll(false)
}

// uvue
const openAll = () => {
    const collapseRef =  this.$refs['collapseRef'] as ComponentPublicInstance;
    collapseRef.$callMethod('toggleAll', true)
}
const toggleAll = () => {
    const collapseRef =  this.$refs['collapseRef'] as ComponentPublicInstance;
    collapseRef.$callMethod('toggleAll', false)
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-collapse/components/lime-collapse -->
<lime-collapse />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Collapse Props 属性说明

CollapsePanel Props 属性说明

Collapse Events 事件

Collapse Slots 插槽

CollapsePanel Slots 插槽

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助