5.3 折叠项（Collapse Item）

折叠面板中的单个可展开项，需作为 dof-collapse 的直接子组件使用。

基础用法

<template>
  <dof-collapse :active-names="activeNames" @change="onCollapseChange">
    <dof-collapse-item :name="1" :collapsed="false">
      <text slot="title">面板标题</text>
      <text slot="desc">说明文字</text>
      <text>面板内容</text>
    </dof-collapse-item>
  </dof-collapse>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
    }
  },
  methods: {
    onCollapseChange({ name }) {
      this.activeNames = name
    },
  },
}
</script>

Attributes

Prop	Type	Required	Default	Description
collapsed	Boolean	N	true	是否处于收起状态
name	Number	N	1	折叠项标识；在同一 dof-collapse 中应保持唯一
needDarkMode	Boolean	N	false	是否启用 M-dark/T-dark 内置暗黑适配
backgroundColor	String	N	''	背景色
bodyColor	String	N	''	内容区背景色
borderColor	String	N	''	边框 / 分隔线颜色
touchColor	String	N	''	按下态背景色
isRTL	Boolean	N	false	是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

颜色属性为空时使用内置配色；业务显式颜色和样式覆盖优先于默认配色，关闭暗黑适配后仍有效。

显式背景色在按下态仍保留。

Slots

插槽名	说明
title	标题区域内容
desc	标题右侧、箭头前的说明内容
default	面板内容

WARNING

dof-collapse-item 依赖父级 dof-collapse 注入的状态数据，不能独立使用。