LimeCollapse 折叠面板

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

安装

导入即可，首次可能需要重新编译

注意

• 🔔 本插件依赖的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

参数	说明	类型	默认值
title	分组标题	string	-
accordion	手风琴效果，每个面板互斥展开，每次只展开一个面板	boolean	false
inset	是否展示为圆角卡片风格	boolean	false
disabled	禁用	boolean	false
v-modle	当前展开面板的 values	string | number	false

CollapsePanel Props

参数	说明	类型	默认值
value	前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识	string	-
title	标题	string	-
disabled	禁用	boolean	false
note	右侧内容	string	-
size	标题单元格大小，可选值为 small	string	-
icon	标题左侧图标名称，等同于 Icon 组件的 name 属性	string	-
iconColor	标题左侧图标颜色	string	-
iconSize	标题左侧图标尺寸	string	-
rightIconColor	右侧图标颜色	string	-
rightIconSize	右侧图标尺寸	string	-
image	左侧图片链接	string	-
imageWidth	图片宽度	string	-
imageHeight	图片高度	string	-
bgColor	背景色	string	-

Collapse Events

事件名	说明	回调参数
change	点击时触发	_event: string

CollapsePanel Slots

名称	说明
title	自定义左侧标题
note	自定义右侧内容
description	自定义标题下方的描述信息
icon	自定义左侧图标
rightIcon	自定义右侧图标

主题定制

样式变量

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

名称	默认值	描述
--l-collapse-panel-bg-color:	white	-
--l-collapse-content-padding:	32rpx	-
--l-collapse-content-line-height:	1.5	-
--l-collapse-content-font-size:	28rpx	-
--l-collapse-content-text-color:	$text-color-1	-
--l-collapse-transition-duration:	240ms	-
--l-collapse-right-icon-color:	$text-color-4	-
--l-collapse-right-icon-size:	44rpx	-
--l-collapse-border-color:	$border-color-2	-

打赏

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

源代码

组件源码