Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板，面板之间不影响。

Consistency

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to; Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Feedback

Efficiency

Controllability

<template>
    <Collapse v-model="openValue">
        <CollapseItem name="a" title="Consistency">
          <div class="content">Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
        </CollapseItem>
        <CollapseItem name="b" title="Feedback">
          <div class="content">Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
        </CollapseItem>
        <CollapseItem name="c" title="Efficiency">
          <div class="content">Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
        </CollapseItem>
        <CollapseItem name="d" title="Controllability">
          <div class="content">Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
        </CollapseItem>
    </Collapse>
</template>
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'
const openValue = ref(['a'])

</script>

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Consistency

Feedback

Efficiency

Controllability

<template>
    <Collapse v-model="openValue" accordion>
        <CollapseItem name="a" title="Consistency">
          <div class="content">Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
        </CollapseItem>
        <CollapseItem name="b" title="Feedback">
          <div class="content">Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
        </CollapseItem>
        <CollapseItem name="c" title="Efficiency">
          <div class="content">Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
        </CollapseItem>
        <CollapseItem name="d" title="Controllability">
          <div class="content">Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
        </CollapseItem>
    </Collapse>
</template>
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'
const openValue = ref(['a'])

</script>

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

Consistency

Feedback

Efficiency

Controllability

<template>
    <Collapse v-model="openValue">
        <CollapseItem name="a" title="">
          <template #title>
            <div>Consistency <Icon icon="paperclip"/></div>
          </template>
          <div class="content">Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
        </CollapseItem>
        <CollapseItem name="b" title="Feedback">
          <div class="content">Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
        </CollapseItem>
        <CollapseItem name="c" title="Efficiency">
          <div class="content">Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
        </CollapseItem>
        <CollapseItem name="d" title="Controllability">
          <div class="content">Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
        </CollapseItem>
    </Collapse>
</template>
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'
import Icon from '@/components/Icon/Icon.vue'   
const openValue = ref(['a'])

</script>

监听

可以通过绑定 change 事件来监听 collapse 的切换（打开控制台）

Consistency

Feedback

Efficiency

Controllability

<template>
    <Collapse v-model="openValue" @change="change">
        <CollapseItem name="a" title="Consistency">
          <div class="content">Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;
Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.</div>
        </CollapseItem>
        <CollapseItem name="b" title="Feedback">
          <div class="content">Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.</div>
        </CollapseItem>
        <CollapseItem name="c" title="Efficiency">
          <div class="content">Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.</div>
        </CollapseItem>
        <CollapseItem name="d" title="Controllability">
          <div class="content">Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.</div>
        </CollapseItem>
    </Collapse>
</template>
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'
import Icon from '@/components/Icon/Icon.vue'   
const openValue = ref(['a'])
const change = (value) => {
  console.log('Collapse change', value)
}
</script>

参数

属性名	说明	类型	默认值
model-value / v-model	激活的 `name`	array
accordion	是否手风琴模式	boolean	false

事件

属性名	说明	回调参数
change	当前激活面板改变时触发	array

Collapse 折叠面板 ​

基础用法 ​

手风琴效果 ​

自定义面板标题 ​

监听 ​

参数 ​

事件 ​

Collapse 折叠面板

基础用法

手风琴效果

自定义面板标题

监听

参数

事件