更新记录

0.0.3（2024-10-05） 下载此版本

• chore: 更新兼容

0.0.2（2024-10-04） 下载此版本

• chore: 兼容vue2

0.0.1（2024-10-04） 下载此版本

• init

平台兼容性

lime-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无效。

打赏

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