Collapse 折叠面板

约 1453 字大约 5 分钟

2025-10-31

通过折叠面板收纳内容区域

基本使用

<template>
  <un-collapse @change="change" @close="close" @open="open">
    <un-collapse-item title="文档指南" name="Docs guide">
      <text class="un-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
    </un-collapse-item>
    <un-collapse-item title="组件全面" name="Variety components">
      <text class="un-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
    </un-collapse-item>
    <un-collapse-item title="众多利器" name="Numerous tools">
      <text class="un-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
    </un-collapse-item>
  </un-collapse>
</template>

<script setup lang="ts">
const open = (e: string) => {
  console.log('open', e)
}

const close = (e: string) => {
  console.log('close', e)
}

const change = (e: string) => {
  console.log('change', e)
}
</script>

控制面板的初始状态，以及是否可以操作

设置un-collapse-item的name参数，并在un-collapse中指定数组value可以让面板初始化时为打开状态
如果设置un-collapse-item的disabled参数，那么面板会保持被禁用状态

<template>
  <un-collapse :value="['2']">
    <un-collapse-item name="1" title="文档指南">
      <text class="un-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
    </un-collapse-item>
    <un-collapse-item disabled title="组件全面">
      <text class="un-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
    </un-collapse-item>
    <un-collapse-item name="2" title="众多利器">
      <text class="un-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
    </un-collapse-item>
  </un-collapse>
</template>

<script setup lang="ts">
const open = (e: string) => {
  console.log('open', e)
}

const close = (e: string) => {
  console.log('close', e)
}

const change = (e: string) => {
  console.log('change', e)
}
</script>

手风琴模式

将un-collapse的accordion设置为true，这样可以开启手风琴模式

<template>
    <view class="u-page__item">
        <text class="u-page__item__title">手风琴模式</text>
        <un-collapse accordion>
            <un-collapse-item title="文档指南">
                <text class="un-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
            </un-collapse-item>
            <un-collapse-item title="组件全面">
                <text class="un-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
            </un-collapse-item>
            <un-collapse-item title="众多利器">
                <text class="un-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
            </un-collapse-item>
        </un-collapse>
    </view>
</template>

<style lang="scss">
    .u-page {
        padding: 0;

        &__item {
    
            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;
        
                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }

    .un-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }
</style>

自定义标题和内容

通过设置template标签和#语法来自定义标题和内容

<template>
    <view class="u-page__item">
        <text class="u-page__item__title">自定义标题和内容</text>
        <un-collapse accordion>
            <un-collapse-item>
                <template #title>
                    <text class="u-page__item__title__slot-title">文档指南</text>
                </template>
                <text class="un-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
            </un-collapse-item>
            <un-collapse-item title="组件全面">
                <template #icon>
                    <un-icon name="tags-fill" size="20"></un-icon>
                </template>
                <text class="un-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
            </un-collapse-item>
            <un-collapse-item title="众多利器">
                <template #value>
                    <text class="u-page__item__title__slot-title">自定义内容</text>
                </template>
                <text class="un-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
            </un-collapse-item>
        </un-collapse>
    </view>
</template>

<style lang="scss">
    .u-page {
        padding: 0;

        &__item {
    
            &__title {
                 color: $u-tips-color;
                 background-color: $u-bg-color;
                 padding: 15px;
                 font-size: 15px;
        
                &__slot-title {
                     color: $u-primary;
                     font-size: 14px;
                 }
            }
        }
    }

    .u-collapse-content {
        color: $u-tips-color;
        font-size: 14px;
    }
</style>

API

CollapseProps

字段名	类型	说明	默认值
value \| v-model	Array<string \| number>	当前展开面板的name	-
accordion	boolean	是否手风琴模式	false
border	boolean	是否显示外边框	true

CollapseItemProps

字段名	类型	说明	默认值
title	string	标题	-
value	string	标题右侧内容	-
label	string	标题下方的描述信息	-
disabled	boolean	是否禁用折叠面板	false
isLink	boolean	是否展示右侧箭头并开启点击反馈	true
clickable	boolean	是否开启点击反馈	true
border	boolean	是否显示内边框	true
align	string	标题的对齐方式（可选值：left、center、right）	left
name	string \| number	唯一标识符	-
icon	string	标题左侧图片，可为绝对路径的图片或内置图标	-
duration	number	面板展开收起的过渡时间，单位ms	300

API

Collapse Props

参数	说明	类型	默认值
value	当前展开面板的name	Array<[string \| number]>	-
accordion	是否手风琴模式	Boolean	false
border	是否显示外边框	Boolean	true

Collapse Item Props

参数	说明	类型	默认值
title	标题	string	""
value	标题右侧内容	string	""
label	标题下方的描述信息	string	""
disabled	是否禁用折叠面板	Boolean	false
isLink	是否展示右侧箭头并开启点击反馈	Boolean	true
clickable	是否开启点击反馈	Boolean	true
border	是否显示内边框	Boolean	true
align	标题的对齐方式	Enum	left
name	唯一标识符	string \| number	""
icon	标题左侧图片，可为绝对路径的图片或内置图标	string	""
duration	面板展开收起的过渡时间，单位ms	number	300

Collapse Event

事件名	说明	类型
change	当前激活面板展开时触发	Function
open	面板打开时触发	Function
close	面板关闭时触发	Function