Yb-components
  • 组件
  • 其他组件
liaoyingmin
2023-02-09

YbCollapse 折叠面板

el-collapse 的扩展性不太好，所以设计了 yb-collapse

# 基本使用

  • value 属性不设置时，并且非手风琴模式时，默认全部展开
一致性
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率
简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
<template>
    <yb-collapse
        v-model="activeNames"
        :collapseItems="collapseItems"
        iconAlign="left"
        :gutter="20"
        size="small"
        :expandOnClickHeader="false"
    />
</template>
<script>
    export default {
        data() {
            return {
                activeNames: ['Consistency', 'Feedback'],
                collapseItems: [
                    {
                        title: '一致性',
                        name: 'Consistency',
                        content:
                            '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。',
                        tooltip:
                            '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。',
                    },
                    {
                        title: '反馈',
                        name: 'Feedback',
                        content:
                            '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。',
                    },
                    {
                        title: '效率',
                        name: 'Efficiency',
                        content:
                            '简化流程：设计简洁直观的操作流程；\n清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；\n帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。',
                    },
                ],
            };
        },
        watch: {
            activeNames: {
                handler() {
                    console.log(this.activeNames);
                },
                deep: true,
            },
        },
    };
</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
显示 复制

# 手风琴

一致性
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率
简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
<template>
    <yb-collapse
        v-model="activeName"
        :collapseItems="collapseItems"
        :accordion="true"
        size="medium"
    />
</template>
<script>
    export default {
        data() {
            return {
                activeName: 'Feedback',
                collapseItems: [
                    {
                        title: '一致性',
                        name: 'Consistency',
                        content:
                            '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。',
                    },
                    {
                        title: '反馈',
                        name: 'Feedback',
                        content:
                            '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。',
                    },
                    {
                        title: '效率',
                        name: 'Efficiency',
                        content:
                            '简化流程：设计简洁直观的操作流程；\n清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；\n帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。',
                    },
                ],
            };
        },
        watch: {
            activeName: {
                handler() {
                    console.log(this.activeName);
                },
                deep: true,
            },
        },
    };
</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
显示 复制

# 控制面板显示/隐藏

  • renderedPanelController：根据面板 name 设置是否渲染，默认渲染

    面板设置为 false：相当于渲染面板节点时 return null

  • showedPanelController： 根据面板 name 设置是否显示，默认显示

    面板设置为 false：相当于面板节点添加样式 display: none

一致性
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率
简化流程：设计简洁直观的操作流程； 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策； 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
<template>
    <div style="margin-bottom:20px">
        <el-button @click="toggleConsistencyPanelRender">
            toggle 【一致性】面板是否渲染
        </el-button>
        <el-button @click="toggleEfficiencyPanelShow">
            toggle 【效率】面板是否隐藏
        </el-button>
    </div>
    <div :style="{'background-color': '#eff2f5',padding:'10px'}">
        <yb-collapse
            v-model="activeNames"
            :collapseItems="collapseItems"
            :renderedPanelController="renderedPanelController"
            :showedPanelController="showedPanelController"
        >
        </yb-collapse>
    </div>
</template>
<script>
    export default {
        data() {
            const collapseItems = [
                {
                    title: '一致性',
                    name: 'Consistency',
                    content:
                        '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。',
                },
                {
                    title: '反馈',
                    name: 'Feedback',
                    content:
                        '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。',
                },
                {
                    title: '效率',
                    name: 'Efficiency',
                    defaultActive: false,
                    content:
                        '简化流程：设计简洁直观的操作流程；\n清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；\n帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。',
                },
            ];

            const renderedPanelController = {};
            const showedPanelController = {};
            const activeNames = collapseItems.map((item) => {
                renderedPanelController[item.name] = true;
                showedPanelController[item.name] = true;
                return item.name;
            });

            return {
                activeNames,
                collapseItems,
                renderedPanelController,
                showedPanelController,
            };
        },
        methods: {
            toggleConsistencyPanelRender() {
                this.renderedPanelController = {
                    Consistency: !this.renderedPanelController.Consistency,
                };
            },
            toggleEfficiencyPanelShow() {
                this.showedPanelController = {
                    Efficiency: !this.showedPanelController.Efficiency,
                };
            },
        },
    };
</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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
显示 复制

# 插槽使用

  • 所有 collapseItems 共用的插槽名称是: "title"、'icon'、"extra"、"default"
  • 单独某个 collapseItem 的 title 插槽名称是: collapseItem[].name+"-title"
  • 单独某个 collapseItem 的 icon 插槽名称是: collapseItem[].name+"-icon"
  • 单独某个 collapseItem 的 extra 插槽名称是: collapseItem[].name+"-extra"
  • 单独某个 collapseItem 的 default 插槽名称是: collapseItem[].name
自定义标题
公共extra
一致性 自定义内容
自定义标题
公共extra
反馈 UE/UX
自定义内容，这个自定义内容方式优先级没有指定字段的高
效率标题
公共extra
效率 Brevity
自定义内容，这个自定义内容方式优先级没有指定字段的高 
<template>
    <div :style="{'background-color': '#eff2f5',padding:'10px'}">
        <yb-collapse :collapseItems="collapseItems" :border="false">
            <template v-slot:Consistency="collapseItem, data">
                {{collapseItem.title}} 自定义内容
            </template>
            <template v-slot="collapseItem, data">
                {{collapseItem.title}} <el-tag>{{data.subTitle}}</el-tag>
                <br />
                自定义内容，这个自定义内容方式优先级没有指定字段的高
            </template>
            <template v-slot:Consistency-title,Feedback-title>
                自定义标题
            </template>
            <template v-slot:Efficiency-title> 效率标题 </template>
            <template v-slot:extra> 公共extra </template>
        </yb-collapse>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                collapseItems: [
                    {
                        title: '一致性',
                        name: 'Consistency',
                        subTitle: 'Layout',
                        content:
                            '与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。',
                    },
                    {
                        title: '反馈',
                        name: 'Feedback',
                        subTitle: 'UE/UX',
                        content:
                            '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。',
                    },
                    {
                        title: '效率',
                        name: 'Efficiency',
                        subTitle: 'Brevity',
                        defaultActive: false,
                        content:
                            '简化流程：设计简洁直观的操作流程；\n清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；\n帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。',
                    },
                ],
            };
        },
    };
</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
显示 复制

# 单个面板可使用 YbCollapseItem

标题
内容

收起-按钮阻止冒泡
内容自定义

自定义折叠展开事件
内容自定义
<template>
    <div>
        <yb-collapse-item title="标题" defaultActive> 内容 </yb-collapse-item>
        <br />
        <yb-collapse-item
            :border="true"
            :title="renderTitle"
            :renderIcon="renderIcon"
            :renderExtra="renderExtra"
            :content="renderContent"
            iconAlign="left"
        />
        <br />
        <yb-collapse-item
            :border="true"
            title="自定义折叠展开事件"
            ref="collapse"
            :collapsible="false"
            :renderExtra="renderExtraToggle"
            content="内容自定义"
        />
    </div>
</template>
<script>
    export default {
        methods: {
            renderTitle(h, { isActive }) {
                return h('span', '按钮阻止冒泡');
            },
            renderIcon(h, { isActive }) {
                return isActive ? h('span', '展开-') : h('span', '收起-');
            },
            renderContent(h) {
                return '内容自定义';
            },
            renderExtra(h, { isActive }) {
                return (
                    <el-button
                        on={{
                            click: (e) => {
                                e.stopPropagation();
                            },
                        }}
                    >
                        按钮
                    </el-button>
                );
            },
            renderExtraToggle(h, { isActive }) {
                return (
                    <el-button
                        on={{
                            click: (e) => {
                                this.$refs?.collapse.toggle();
                            },
                        }}
                    >
                        {isActive ? '收起' : '展开'}
                    </el-button>
                );
            },
        },
    };
</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
52
53
54
55
56
57
58
59
60
61
62
63
64
显示 复制

# YbCollapse Attributes

参数 说明 类型 可选值 默认值
value/v-model 当前激活的面板 (如果是手风琴模式，绑定值类型需要为 string，否则为 array) string | array -- --
collapseItems 面板配置，详见YbCollapseItem Attributes array -- []
accordion 是否手风琴模式 boolean -- --
gutter 面板间隔 number -- 0
- 控制所有 collapseItem 的共同属性，同YbCollapseItem Attributes，优先级小于 collapseItem 的配置 -- -- --

# YbCollapseItem Attributes

参数 说明 类型 可选值 默认值
data 原始数据配置 object -- --
name 唯一标志符 string | number -- --
border 是否有边框 boolean -- --
renderExtra 右上角操作区域渲染使用的 function function(h, YbCollapseItem 的 Vue 实例,data 原始配置数据) -- --
content 显示内容 string | function(h, YbCollapseItem 的 Vue 实例, data 原始配置数据) -- --
title 标题 string | function(h, YbCollapseItem 的 Vue 实例, data 原始配置数据) -- --
titleStyle 标题样式 object -- --
titleClassName 标题 className string -- --
defaultActive 是否默认展开 boolean -- --
collapsible 是否可折叠 boolean -- true
renderIcon 折叠 icon 渲染使用的 function function(h, YbCollapseItem 的 Vue 实例, data 原始配置数据) -- --
iconAlign 折叠 icon 位置 string 'left'|'right' 'right'
iconStyle 折叠 icon 样式 object -- --
iconClassName 折叠 icon className string -- --
headerStyle 头部样式 object -- --
headerClassName 头部 className string -- --
bodyStyle body 样式 object -- --
bodyClassName body className string -- --
size 面板尺寸 string medium | small | mini --
lazy 是否延迟渲染 boolean -- --
tooltip 提示内容，在 title 后显示一个小图标，hover 后显示内容 string -- --
expandOnClickHeader 是否在点击头部的时候展开或者收缩，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩 boolean -- true

# YbCollapseItem Events

事件名称 说明 回调参数
change 当面板状态发生改变时触发 { name, isActive, data }
click 当面板被点击时触发 { name, isActive, data }

# YbCollapseItem Methods

方法名 说明 回调参数
toggle 切换面板状态 --
open 展开面板 --
close 关闭面板 --

# YbCollapseItem Scoped Slot

name 说明
title 标题插槽，两个参数分别为 YbCollapseItem 的 Vue 实例、data 原始配置数据
icon 折叠 icon 插槽，两个参数分别为 YbCollapseItem 的 Vue 实例、data 原始配置数据
extra 右上角操作区域插槽，两个参数分别为 YbCollapseItem 的 Vue 实例、data 原始配置数据
default 显示内容 content 插槽，两个参数分别为 YbCollapseItem 的 Vue 实例、data 原始配置数据
上次更新: 2024/11/21, 15:09:56
YbPagination 分页器
YbScrollTool 滚动工具

← YbScrollTool 滚动工具→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License