更新记录

0.0.7（2025-02-14） 下载此版本

• fix: 修复uniappx ios 高度为auto时隐藏节点

0.0.6（2025-02-09） 下载此版本

• chore: 更新文档

0.0.5（2025-02-09） 下载此版本

• chore: 更新文档

平台兼容性

lime-collapse 折叠面板

• 将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容

安装

插件市场导入即可，首次可能需要重新编译

注意

• 🔔 本插件依赖的lime-svg在 uniapp x app中是原生插件，如果购买(收费为5元)则需要自定义基座，才能使用！uniapp可忽略。
• 🔔 不需要lime-svg在lime-icon代码中注释掉即可

// lime-icon/components/l-icon.uvue 第4行 注释掉即可。
<!-- <l-svg class="l-icon" :class="classes" :style="styles" :color="color" :src="iconUrl" v-else :web="web" @error="imageError" @load="imageload" @click="$emit('click')"></l-svg> -->

文档

collapse

代码演示

基础用法

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

受控

通过 v-model 控制展开的面板列表，values 为数组格式，value是唯一的值，如果不填则默认下标。

<l-collapse v-model="values">
    <l-collapse-panel title="折叠标题" value="2" :note="values.includes('2') ? '收起' : '展开'">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
</l-collapse>

const values = ref([])

手风琴

通过 accordion 可以设置为手风琴模式，最多展开一个面板。

<l-collapse v-model="values1" :accordion="true">
    <l-collapse-panel title="折叠标题" note="单元测试">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" note="单元测试">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" note="单元测试">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" note="单元测试">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
</l-collapse>

禁用状态

通过 disabled 属性来禁用单个面板。

<l-collapse>
    <l-collapse-panel title="折叠标题" note="单元测试">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
    <l-collapse-panel title="折叠标题" note="单元测试" :disabled="true">
        <text>1此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容此处可自定义内容可自定义内容</text>
    </l-collapse-panel>
</l-collapse>

自定义内容

通过 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/compoents/lime-collapse 
<lime-collapse />

插件标签

• 默认 l-collapse 为 component
• 默认 l-collapse-panel 为 component
• 默认 lime-collapse 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Collapse Props

CollapsePanel Props

Collapse Events

CollapsePanel Slots

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式)。uvue app无效。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。