FxCollapse 折叠面板
通过折叠面板收纳内容区域。自实现、不依赖任何 UI 框架。
FxCollapse 属于 @fx/components（UI 框架无关的通用组件），配合 FxCollapseItem 使用。
基础用法
可同时展开多个面板，面板之间互不影响。
vue
<template>
<div class="demo-collapse">
<FxCollapse v-model="activeNames" @change="handleChange">
<FxCollapseItem title="一致性 Consistency" name="1">
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</FxCollapseItem>
<FxCollapseItem title="反馈 Feedback" name="2">
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<div>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</FxCollapseItem>
<FxCollapseItem title="效率 Efficiency" name="3">
<div>
简化流程：设计简洁直观的操作流程；
</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</FxCollapseItem>
<FxCollapseItem title="可控 Controllability" name="4">
<div>
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
</div>
<div>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</div>
</FxCollapseItem>
</FxCollapse>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const activeNames = ref(['1'])
function handleChange(val: string[]) {
console.log(val)
}
</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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
手风琴模式
通过 accordion 属性启用手风琴模式，同时只能展开一个面板。
vue
<template>
<div class="demo-collapse">
<FxCollapse v-model="activeName" accordion>
<FxCollapseItem title="一致性 Consistency" name="1">
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</FxCollapseItem>
<FxCollapseItem title="反馈 Feedback" name="2">
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<div>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</FxCollapseItem>
<FxCollapseItem title="效率 Efficiency" name="3">
<div>
简化流程：设计简洁直观的操作流程；
</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</FxCollapseItem>
<FxCollapseItem title="可控 Controllability" name="4">
<div>
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
</div>
<div>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</div>
</FxCollapseItem>
</FxCollapse>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const activeName = ref('1')
</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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
自定义标题
通过 title 插槽自定义面板标题，插槽提供 isActive 表示当前展开状态。
vue
<template>
<div class="demo-collapse">
<FxCollapse accordion>
<FxCollapseItem name="1">
<template #title="{ isActive }">
<div :class="['title-wrapper', { 'is-active': isActive }]">
一致性 Consistency
<FxIcon name="ant-design:info-circle-filled" :size="iconSize" class="header-icon" />
</div>
</template>
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</FxCollapseItem>
<FxCollapseItem title="反馈 Feedback" name="2">
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<div>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</FxCollapseItem>
<FxCollapseItem title="效率 Efficiency" name="3">
<div>
简化流程：设计简洁直观的操作流程；
</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</FxCollapseItem>
<FxCollapseItem title="可控 Controllability" name="4">
<div>
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
</div>
<div>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</div>
</FxCollapseItem>
</FxCollapse>
</div>
</template>
<script setup lang="ts">
const iconSize = '16px'
</script>
<style scoped>
.title-wrapper {
display: flex;
align-items: center;
gap: 4px;
}
.title-wrapper.is-active {
color: var(--fx-color-primary);
}
</style>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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
自定义图标
通过 icon prop 或 icon 插槽自定义展开/收起图标。
vue
<template>
<div class="demo-collapse">
<FxCollapse v-model="activeNames" @change="handleChange">
<FxCollapseItem title="一致性 Consistency" name="1" icon="ep:caret-right">
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</FxCollapseItem>
<FxCollapseItem title="反馈 Feedback" name="2">
<template #icon="{ isActive }">
<span class="icon-ele">
{{ isActive ? 'Expanded' : 'Collapsed' }}
</span>
</template>
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<div>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</FxCollapseItem>
<FxCollapseItem title="效率 Efficiency" name="3">
<div>
简化流程：设计简洁直观的操作流程；
</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</FxCollapseItem>
<FxCollapseItem title="可控 Controllability" name="4">
<div>
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
</div>
<div>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</div>
</FxCollapseItem>
</FxCollapse>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const activeNames = ref(['1'])
function handleChange(val: string[]) {
console.log(val)
}
</script>
<style scoped>
.icon-ele {
margin: 0 8px 0 auto;
color: var(--fx-color-primary);
}
</style>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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
图标位置
通过 expand-icon-position 属性设置展开图标位置。
vue
<template>
<div class="demo-collapse-position">
<div class="flex items-center mb-4">
<span class="mr-4">expand icon position: </span>
<FxSwitch
v-model="position"
inactive-value="left"
active-value="right"
inactive-text="left"
active-text="right"
/>
</div>
<FxCollapse :expand-icon-position="position">
<FxCollapseItem title="一致性 Consistency" name="1">
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</FxCollapseItem>
<FxCollapseItem title="反馈 Feedback" name="2">
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<div>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</FxCollapseItem>
<FxCollapseItem title="效率 Efficiency" name="3">
<div>
简化流程：设计简洁直观的操作流程；
</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</FxCollapseItem>
</FxCollapse>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const position = ref<'left' | 'right'>('left')
</script>
<style scoped>
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 16px;
}
.mr-4 {
margin-right: 16px;
}
</style>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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
阻止折叠
通过 before-collapse 属性在折叠前进行拦截。返回 false 或 rejected Promise 会阻止折叠。
vue
<template>
<div v-loading="loading" class="demo-collapse">
<div class="flex items-center mb-4">
<span class="mr-4">before collapse return: </span>
<FxSwitch
v-model="before"
:inactive-value="false"
:active-value="true"
inactive-text="false"
active-text="true"
/>
</div>
<FxCollapse v-model="activeNames" :before-collapse="beforeCollapse">
<FxCollapseItem title="一致性 Consistency" name="1">
<div>
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
</div>
<div>
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
</div>
</FxCollapseItem>
<FxCollapseItem title="反馈 Feedback" name="2">
<div>
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
</div>
<div>
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
</div>
</FxCollapseItem>
<FxCollapseItem title="效率 Efficiency" name="3">
<div>
简化流程：设计简洁直观的操作流程；
</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</FxCollapseItem>
<FxCollapseItem title="可控 Controllability" name="4">
<div>
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
</div>
<div>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</div>
</FxCollapseItem>
</FxCollapse>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const before = ref(true)
const activeNames = ref(['1'])
const loading = ref(false)
const beforeCollapse = (): Promise<boolean> => {
loading.value = true
return new Promise((resolve) => {
setTimeout(() => {
loading.value = false
resolve(before.value)
}, 1000)
})
}
</script>
<style scoped>
.demo-collapse {
position: relative;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.mb-4 {
margin-bottom: 16px;
}
.mr-4 {
margin-right: 16px;
}
</style>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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
Collapse API
Collapse Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 当前展开面板，accordion 模式下为 string / number，否则为 array | string | number | (string | number)[] | [] |
| accordion | 是否启用手风琴模式 | boolean | false |
| expand-icon-position | 展开图标位置 | 'left' | 'right' | 'right' |
| before-collapse | 折叠前回调。返回 false 或 rejected Promise 会阻止折叠 | (name: string | number) => boolean | Promise<boolean> | — |
Collapse Events
| 名称 | 说明 | 类型 |
|---|---|---|
| change | 展开面板变化时触发，accordion 模式下参数为 string / number，否则为 array | (activeNames: array | string) => void |
Collapse Slots
| 名称 | 说明 | 子标签 |
|---|---|---|
| default | 折叠面板内容 | Collapse Item |
Collapse Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| activeNames | 当前展开面板名称 | ComputedRef<(string | number)[]> |
| setActiveNames | 设置展开面板 | (activeNames: (string | number)[]) => void |
Collapse Item API
Collapse Item Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 面板唯一标识 | string | number | — |
| title | 面板标题 | string | '' |
| icon | 展开图标。字符串为 IconString 类型（即 FxIcon 图标名，如 ep:edit、ant-design:home、svg:xxx），亦可传组件 | string / Component | 'ep:arrow-right' |
| disabled | 禁用面板 | boolean | false |
Collapse Item Slots
| 名称 | 说明 | 类型 |
|---|---|---|
| default | 面板内容 | — |
| title | 面板标题内容 | { isActive: boolean } |
| icon | 展开图标内容 | { isActive: boolean } |
Collapse Item Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
| isActive | 当前面板是否展开 | ComputedRef<boolean | undefined> |
局部引入
ts
import { FxCollapse, FxCollapseItem } from "@fx/components"1