uView Next
4.0.105

外观

Collapse 折叠面板

约 1523 字大约 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-modelArray<string | number>当前展开面板的name-
accordionboolean是否手风琴模式false
borderboolean是否显示外边框true

CollapseItemProps

字段名类型说明默认值
titlestring标题-
valuestring标题右侧内容-
labelstring标题下方的描述信息-
disabledboolean是否禁用折叠面板false
isLinkboolean是否展示右侧箭头并开启点击反馈true
clickableboolean是否开启点击反馈true
borderboolean是否显示内边框true
alignstring标题的对齐方式（可选值：left、center、right）left
namestring | number唯一标识符-
iconstring标题左侧图片，可为绝对路径的图片或内置图标-
durationnumber面板展开收起的过渡时间，单位ms300

API

Collapse Props

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

Collapse Item Props

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

Collapse Event

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

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名默认值说明
$un-collapse-item-padding10px 15px折叠面板内容区域的内边距

Copyright © 2026 uView Next