# Collapse 折叠面板
通过折叠面板收纳内容区域
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ 小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基本用法
<template>
<pi-collapse @change="change" @close="close" @open="open">
<pi-collapse-item title="问：为什么piui这么好用？">
<text>答：piui是基于uniapp的高质量UI开源组件库</text>
</pi-collapse-item>
<pi-collapse-item title="问：piui有没有折叠面板组件？">
<text>答：有的，在这里：http://piui.sadais.com/docs/components/collapse.html</text>
</pi-collapse-item>
<pi-collapse-item title="问：折叠面板是否可以支持二级标题？" desc="描述文本1">
<text>答：当然可以！</text>
</pi-collapse-item>
</pi-collapse>
</template>
<script>
export default {
name: 'Collapse',
data() {
return {}
},
methods: {
change(e) {
console.log(e)
},
close(e) {
// console.log(e)
},
open(e) {
// console.log(e)
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 展开和禁用
- 通过
disabled参数设置禁用状态
<template>
<pi-collapse>
<pi-collapse-item title="问：为什么piui这么好用？">
<text>答：piui是基于uniapp的高质量UI开源组件库</text>
</pi-collapse-item>
<pi-collapse-item title="问：piui有没有折叠面板组件？" disabled>
<text>答：有的，在这里：http://piui.sadais.com/docs/components/collapse.html</text>
</pi-collapse-item>
<pi-collapse-item title="问：折叠面板是否可以支持二级标题？" desc="描述文本1">
<text>答：当然可以！</text>
</pi-collapse-item>
</pi-collapse>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 手风琴模式和默认打开
- 通过
accordion属性设置手风琴模式 - 通过
value参数设置默认打开的项，支持数字和字符串
<template>
<pi-collapse accordion value="1">
<pi-collapse-item name="1" title="问：为什么piui这么好用？">
<text>答：piui是基于uniapp的高质量UI开源组件库</text>
</pi-collapse-item>
<pi-collapse-item name="2" title="问：piui有没有折叠面板组件？">
<text>答：有的，在这里：http://piui.sadais.com/docs/components/collapse.html</text>
</pi-collapse-item>
<pi-collapse-item name="3" title="问：折叠面板是否可以支持二级标题？" desc="描述文本1">
<text>答：当然可以！</text>
</pi-collapse-item>
</pi-collapse>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 移除下划线
- 通过
border属性设置是否移除下划线，默认为true
<template>
<pi-collapse accordion :border="false">
<pi-collapse-item title="问：为什么piui这么好用？">
<text>答：piui是基于uniapp的高质量UI开源组件库</text>
</pi-collapse-item>
<pi-collapse-item title="问：piui有没有折叠面板组件？">
<text>答：有的，在这里：http://piui.sadais.com/docs/components/collapse.html</text>
</pi-collapse-item>
<pi-collapse-item title="问：折叠面板是否可以支持二级标题？" desc="描述文本1">
<text>答：当然可以！</text>
</pi-collapse-item>
</pi-collapse>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 自定义标题和内容
- 通过
slot插槽自定义标题和内容
<template>
<pi-collapse>
<pi-collapse-item>
<text slot="title" class="pi-primary">问：为什么piui这么好用？</text>
<text>答：piui是基于uniapp的高质量UI开源组件库</text>
</pi-collapse-item>
<pi-collapse-item>
<view slot="title" class="pi-align-center">
<pi-icon name="question" custom-class="pi-primary pi-fz-36 pi-mg-right-10" />
<text class="pi-tertiary">问：piui有没有折叠面板组件？</text>
</view>
<text>答：有的，在这里：http://piui.sadais.com/docs/components/collapse.html</text>
</pi-collapse-item>
<pi-collapse-item
title="问：折叠面板是否可以支持二级标题？"
desc="创建时间：2022年7月11日16:28:20"
>
<text>答：当然可以！</text>
</pi-collapse-item>
<pi-collapse-item title="支持自定义内容吗？">
<text slot="value" class="pi-primary">自定义内容</text>
<text>必须支持！</text>
</pi-collapse-item>
</pi-collapse>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 自定义样式
可通过custom-class, custom-style 设置折叠面板样式
<template>
<pi-collapse custom-class="pi-mg-top-20" :custom-style="{ border: '1px solid #f00' }">
<pi-collapse-item title="问：为什么piui这么好用？">
<text>答：piui是基于uniapp的高质量UI开源组件库</text>
</pi-collapse-item>
<pi-collapse-item
title="问：piui有没有折叠面板组件？"
:custom-style="{ borderBottom: '1px solid #f00', borderTop: '1px solid #f00' }"
>
<text>答：有的，在这里：http://piui.sadais.com/docs/components/collapse.html</text>
</pi-collapse-item>
<pi-collapse-item title="问：折叠面板是否可以支持二级标题？">
<text>答：当然可以！</text>
</pi-collapse-item>
</pi-collapse>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# API
# Collapse Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| value | 当前展开面板的 name，非手风琴模式：[<String / Number>]，手风琴模式：String/Number | String/Number/Array | false | null |
| accordion | 是否手风琴模式 | Boolean | false | true |
| border | 是否显示外边框 | Boolean | false | true |
| customStyle | 自定义标签样式，对象形式 | Object | false | {} |
| customClass | 自定义标签样式类，字符串形式 | String | false | '' |
# Collapse Item Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| title | 面板标题 | String | false | - |
| value | 标题右侧内容 | String | false | - |
| name | 唯一标识符，如不设置，默认用当前collapse-item的索引值 | String/Number | false | true |
| dec | 标题下方的描述信息 | String | false | - |
| disabled | 面板是否可以打开或收起 | Boolean | false | true |
| border | 是否显示内边框 | Boolean | false | true |
| duration | 面板展开收起的过渡时间，单位ms | Number | false | 300 |
| customStyle | 自定义标签样式，对象形式 | Object | false | {} |
| customClass | 自定义标签样式类，字符串形式 | String | false | '' |
# Collapse Event
- 注意：请在
<pi-collapse></pi-collapse>上监听此事件
| 方法名称 | 说明 | 参数 |
|---|---|---|
| change | 当前激活面板展开时触发(如果是手风琴模式，参数 activeNames 类型为 String，否则为 Array) | activeNames: String |
| open | 当前激活面板展开时触发(如果是手风琴模式，参数 activeNames 类型为 String，否则为 Array) | activeNames: String |
| close | 当前激活面板关闭时触发(如果是手风琴模式，参数 activeNames 类型为 String，否则为 Array) | activeNames: String |
# Slot 插槽说明
| 名称 | 说明 |
|---|---|
| title | 标题内容 |
| value | 右侧内容 value |