Collapse 折叠面板

折叠面板组件，支持手风琴模式、自定义标题和内容。常用于 FAQ、设置面板等场景。

基础用法

通过 v-model 控制展开的面板，ZcCollapseItem 的 name 属性标识面板。

一致性 Consistency

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

反馈 Feedback

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

效率 Efficiency

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

<template>
  <ZcCollapse v-model="activeNames">
    <ZcCollapseItem name="1" title="一致性 Consistency">
      <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念。</div>
    </ZcCollapseItem>
    <ZcCollapseItem name="2" title="反馈 Feedback">
      <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作。</div>
    </ZcCollapseItem>
    <ZcCollapseItem name="3" title="效率 Efficiency">
      <div>简化流程：设计简洁直观的操作流程。</div>
    </ZcCollapseItem>
  </ZcCollapse>
</template>

<script setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
</script>

手风琴模式

通过 accordion 属性开启手风琴模式，每次只展开一个面板。

面板一

手风琴模式下面板一的内容。

面板二

手风琴模式下面板二的内容。

面板三

手风琴模式下面板三的内容。

<template>
  <ZcCollapse v-model="activeName" accordion>
    <ZcCollapseItem name="1" title="面板一">
      <div>手风琴模式下面板一的内容。</div>
    </ZcCollapseItem>
    <ZcCollapseItem name="2" title="面板二">
      <div>手风琴模式下面板二的内容。</div>
    </ZcCollapseItem>
    <ZcCollapseItem name="3" title="面板三">
      <div>手风琴模式下面板三的内容。</div>
    </ZcCollapseItem>
  </ZcCollapse>
</template>

<script setup>
import { ref } from 'vue'
const activeName = ref('1')
</script>

自定义标题

通过 title 插槽自定义面板标题内容。

自定义标题

面板内容

禁用面板

这个面板被禁用了

<template>
  <ZcCollapse>
    <ZcCollapseItem name="1">
      <template #title>
        <span style="color: var(--color-zc-primary-500);">自定义标题</span>
      </template>
      <div>面板内容</div>
    </ZcCollapseItem>
    <ZcCollapseItem name="2" title="禁用面板" disabled>
      <div>这个面板被禁用了</div>
    </ZcCollapseItem>
  </ZcCollapse>
</template>

Collapse API

ZcCollapse Props

参数	说明	类型	默认值
modelValue	当前展开的面板名称（v-model）	string | number | Array<string | number>	[]
accordion	是否手风琴模式	boolean	false

ZcCollapse Events

事件名	说明	回调参数
change	展开状态变化时触发	(value: CollapseModelValue)

ZcCollapseItem Props

参数	说明	类型	默认值
name	面板标识（与 v-model 对应）	string | number	—
title	面板标题文本	string	—
disabled	是否禁用	boolean	false

ZcCollapseItem Events

事件名	说明	回调参数
item-click	点击面板标题时触发	(name: string | number | undefined)

ZcCollapseItem Slots

插槽名	说明
default	面板内容
title	自定义面板标题（覆盖 title 属性）