Pure Element

Appearance

Collapse 折叠面板 ​

通过折叠面板来收纳、展开内容区域。

基础用法 ​

通过 v-model 绑定当前展开的面板 name 数组，每个面板通过 name 标识。

一致性
一致性是指用户操作与预期保持一致。
反馈
效率
基础用法
Collapse 组件的基础用法
<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref<Array<string | number>>(['1'])
</script>

<template>
  <Collapse v-model="activeNames">
    <CollapseItem name="1" title="一致性">
      一致性是指用户操作与预期保持一致。
    </CollapseItem>
    <CollapseItem name="2" title="反馈">
      通过界面元素对用户操作做出及时反馈。
    </CollapseItem>
    <CollapseItem name="3" title="效率">
      简化流程，提高操作效率。
    </CollapseItem>
  </Collapse>
</template>

手风琴模式 ​

设置 accordion 后，同一时刻只会展开一个面板。

一致性
手风琴模式下，同一时刻只会展开一个面板。
反馈
效率
手风琴模式
Collapse accordion 用法
<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import CollapseItem from '@/components/Collapse/CollapseItem.vue'

const activeNames = ref<Array<string | number>>(['1'])
</script>

<template>
  <Collapse v-model="activeNames" accordion>
    <CollapseItem name="1" title="一致性">
      手风琴模式下，同一时刻只会展开一个面板。
    </CollapseItem>
    <CollapseItem name="2" title="反馈">
      切换到当前面板时，其他面板会自动收起。
    </CollapseItem>
    <CollapseItem name="3" title="效率" disabled>
      该项已禁用，无法展开。
    </CollapseItem>
  </Collapse>
</template>

API ​

Collapse Attributes ​

参数说明类型默认值
modelValue当前激活的面板 name 列表Array<string | number>-
accordion是否开启手风琴模式（单选）booleanfalse

Collapse Events ​

事件名说明回调参数
update:modelValue折叠面板激活项发生变化时触发(names: Array<string | number>)
change同上，语义化别名(names: Array<string | number>)

CollapseItem Attributes ​

参数说明类型默认值
name唯一标识string | number-
title面板标题（可用 slot 覆盖）string-
disabled是否禁用当前面板booleanfalse