Collapse

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

基本用法

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

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

可控 Controllability

简化流程：设计简洁直观的操作流程；

<template>
  <Collapse v-model="openedValue">
    <CollapseItem name="a" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </CollapseItem>
    <CollapseItem name="b" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="c" title="可控 Controllability" disabled>
      <div>简化流程：设计简洁直观的操作流程；</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 openedValue = ref(['a'])
</script>

手风琴效果

每次只能展开一个面板

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

可控 Controllability

简化流程：设计简洁直观的操作流程；

<template>
  <Collapse v-model="openedValue" accordion>
    <CollapseItem name="a" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
      <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
    </CollapseItem>
    <CollapseItem name="b" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="c" title="可控 Controllability" disabled>
      <div>简化流程：设计简洁直观的操作流程；</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 openedValue = ref(['a'])
</script>

自定义面板标题

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

一致性 Consistency

与现实生活一致:

与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

可控 Controllability

简化流程：设计简洁直观的操作流程；

<template>
  <Collapse v-model="openedValue">
    <CollapseItem name="a">
      <template #title>
        <h1 style="font-size: 16px;">一致性 Consistency<Icon icon="pen" color="#999"></Icon> </h1>
      </template>
      <h1>与现实生活一致:</h1>
      <div>与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念</div>
    </CollapseItem>
    <CollapseItem name="b" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
      <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
    </CollapseItem>
    <CollapseItem name="c" title="可控 Controllability" disabled>
      <div>简化流程：设计简洁直观的操作流程；</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 openedValue = ref(['a'])
</script>

Collapse Attributes

参数	说明	类型	可选值	默认值
accordion	是否手风琴模式	boolean	—	false
value	当前展开的面板，可以使用 v-model 双向绑定数据	array	—	—

Collapse Events

事件名称	说明	回调参数
change	当前展开的面板改变时触发（使用 v-model 时必用）	展开的面板 key 值

Collapse Item Attributes

参数	说明	类型	可选值	默认值
name	唯一标志符	string	—	—
title	面板标题	string	—	—
disabled	是否禁用面板	boolean	—	false
hide-arrow	是否隐藏面板右上角箭头	boolean	—	false