ui-collapse 可折叠面板组

版本：v2.3.11

可折叠面板组件用于展示可展开/折叠的内容区域，支持手风琴模式和多面板同时展开

基本使用

<template>
  <div class="collapse-demo">
    <ui-collapse>
      <ui-collapse-item title="折叠面板1">
        这是折叠面板1的内
      </ui-collapse-item>
      <ui-collapse-item title="折叠面板2">
        这是折叠面板2的内
      </ui-collapse-item>
      <ui-collapse-item title="折叠面板3">
        这是折叠面板3的内
      </ui-collapse-item>
    </ui-collapse>
  </div>
</template>

<style scoped>
.collapse-demo {
  padding: 20px;
}
</style>

Props

Collapse

参数	类型	默认值	说明
activeNames	Array	[]	当前激活的面板名称数组
accordion	Boolean	false	是否开启手风琴模式
border	Boolean	true	是否显示边框

CollapseItem

参数	类型	默认值	说明
name	String/Number	-	面板名称，唯一标识
title	String	-	面板标题
disabled	Boolean	false	是否禁用该面
value	String/Number	-	用于 v-model 绑定

Events

事件	说明	回调参数
change	面板展开/折叠时触	(activeNames: Array) 当前激活的面板名称数组

Slots

CollapseItem

名称	说明
default	面板内容
title	自定义面板标
right-icon	自定义右侧图

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/collapse/collapse