Collapse 折叠面板

折叠面板由容器 mu-collapse 与面板项 mu-collapse-item 组合而成，用于分组收纳内容。支持多选展开、手风琴模式、整组与单项禁用，以及自定义标题与标题栏额外内容。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-collapse 与 mu-collapse-item 的用法，可按需组合。

<template>
  <mu-collapse v-model="active">
    <mu-collapse-item name="a" title="面板一">
      <text class="body-text">面板一的内容区域，展开时内容淡入并下滑。</text>
    </mu-collapse-item>
    <mu-collapse-item name="b" title="面板二">
      <text class="body-text">面板二的内容区域，可放置任意自定义内容。</text>
    </mu-collapse-item>
  </mu-collapse>
</template>

基础用法

通过 v-model 绑定已展开项的名称数组，每个面板用 name 标识、title 显示标题。

<mu-collapse v-model="active">
  <mu-collapse-item name="a" title="面板一">
    <text class="body-text">面板一的内容区域，展开时内容淡入并下滑。</text>
  </mu-collapse-item>
  <mu-collapse-item name="b" title="面板二">
    <text class="body-text">面板二的内容区域，可放置任意自定义内容。</text>
  </mu-collapse-item>
  <mu-collapse-item name="c" title="面板三">
    <text class="body-text">面板三的内容区域。</text>
  </mu-collapse-item>
</mu-collapse>

手风琴

开启 accordion 后同时只展开一项，此时 v-model 为字符串。

<mu-collapse v-model="accordionActive" accordion>
  <mu-collapse-item name="a" title="面板 A">
    <text class="body-text">手风琴模式下同时只展开一项。</text>
  </mu-collapse-item>
  <mu-collapse-item name="b" title="面板 B">
    <text class="body-text">展开面板 B 时，面板 A 会自动收起。</text>
  </mu-collapse-item>
</mu-collapse>

禁用项

为单个面板设置 disabled，禁用后不可点击展开。

<mu-collapse v-model="disabledActive">
  <mu-collapse-item name="a" title="可用面板">
    <text class="body-text">当前面板可以正常展开与收起。</text>
  </mu-collapse-item>
  <mu-collapse-item name="b" title="禁用面板" :disabled="true">
    <text class="body-text">禁用后不可点击展开。</text>
  </mu-collapse-item>
</mu-collapse>

整组禁用

为 mu-collapse 设置 disabled，整组所有面板均不可展开。

<mu-collapse v-model="groupDisabledActive" disabled>
  <mu-collapse-item name="a" title="面板一">
    <text class="body-text">整组禁用后所有子项均不可展开。</text>
  </mu-collapse-item>
  <mu-collapse-item name="b" title="面板二">
    <text class="body-text">点击无响应。</text>
  </mu-collapse-item>
</mu-collapse>

自定义标题与额外内容

通过 title 插槽自定义标题，通过 extra 插槽在标题栏右侧添加额外内容。

<mu-collapse v-model="customActive">
  <mu-collapse-item name="a">
    <template #title>
      <text class="title-custom">自定义标题</text>
    </template>
    <template #extra>
      <text class="extra-custom">3 条</text>
    </template>
    <text class="body-text">通过 title 与 extra 插槽自定义标题栏内容。</text>
  </mu-collapse-item>
</mu-collapse>

隐藏箭头

设置 arrow 为 false 隐藏右侧展开箭头。

<mu-collapse v-model="arrowActive">
  <mu-collapse-item name="a" title="无箭头面板" :arrow="false">
    <text class="body-text">通过 arrow 为 false 隐藏右侧展开箭头。</text>
  </mu-collapse-item>
</mu-collapse>

单独使用

mu-collapse-item 不放在 mu-collapse 内时，可直接用 v-model 控制自身展开，并通过 border 控制底部分隔边框。

<mu-collapse-item v-model="alone" title="独立面板" :border="false">
  <text class="body-text">不放在 mu-collapse 内时，可直接用 v-model 控制展开。</text>
</mu-collapse-item>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

折叠面板

属性名称	说明	类型	默认值
v-model	展开项，手风琴模式下为字符串，非手风琴模式下为数组	any	-
accordion	是否手风琴模式，同时只展开一项，此时 v-model 为字符串	boolean	false
disabled	是否禁用整组折叠面板	boolean	false
border	是否显示子项分隔边框	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

面板项

属性名称	说明	类型	默认值
v-model	单独使用时控制自身展开状态	boolean	false
name	面板唯一标识，未设置时回退为 title	string	-
title	面板标题	string	-
disabled	是否禁用该面板	boolean	false
arrow	是否显示右侧展开箭头	boolean	true
border	是否显示底部分隔边框	boolean	true
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
change	展开项变化时触发（mu-collapse）	value: any
change	单独使用时展开状态变化时触发（mu-collapse-item）	value: boolean

插槽

组件支持以下插槽。

名称	说明
default	折叠面板内容（mu-collapse），通常为 mu-collapse-item 列表
title	自定义标题（mu-collapse-item）
extra	标题栏右侧额外内容（mu-collapse-item）
default	展开后的内容区域（mu-collapse-item）

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：mu-collapse 的 v-model 类型随 accordion 变化，accordion 为 true 时是字符串，为 false 时是数组。
• 使用注意：mu-collapse-item 的 name 必须唯一，未设置时回退为 title，多个面板 title 相同会导致展开状态冲突。
• 使用注意：放在 mu-collapse 内的 mu-collapse-item 由父级统一控制展开，其自身 v-model 不生效，单独使用时才生效；disabled 会整组向下生效。