# Collapse 折叠面板

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

# 平台差异说明

App（vue） App（nvue） H5 小程序
√ √ √ √

# 基本使用

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

<script>
	export default {
		methods: {
            open(e) {
              // console.log('open', e)
            },
            close(e) {
              // console.log('close', e)
            },
            change(e) {
              // console.log('change', e)
            }
        }
	}
</script>

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

  • 设置zx-collapse-item的name参数，并在zx-collapse中指定数组value可以让面板初始化时为打开状态
  • 如果设置zx-collapse-item的disabled参数，那么面板会保持被禁用状态
<template>
  <zx-collapse
    :value="['2']"
  >
    <zx-collapse-item
      title="文档指南"
    >
      <text class="zx-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
    </zx-collapse-item>
    <zx-collapse-item
      disabled
      title="组件全面"
    >
      <text class="zx-collapse-content">众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</text>
    </zx-collapse-item>
    <zx-collapse-item
      name="2"
      title="众多利器"
    >
      <text class="zx-collapse-content">众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text>
    </zx-collapse-item>
  </zx-collapse>
</template>

<script>
  export default {
    methods: {
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      }
    }
  }
</script>

# 手风琴模式

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

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

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

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

# 自定义标题和内容

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

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

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

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

# API

# Collapse Props

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

# Collapse Item Props

参数 说明 类型 默认值 可选值
title 面板标题 String - -
value 标题右侧内容 String - -
label 标题下方的描述信息 String - -
disabled 面板是否可以打开或收起 Boolean false true
isLink 是否展示右侧箭头并开启点击反馈 Boolean true false
clickable 是否开启点击反馈 Boolean true false
border 是否显示内边框 Boolean true false
align 标题的对齐方式 String left -
name 唯一标识符，如不设置，默认用当前collapse-item的索引值 String | Number - -
icon 标题左侧图片，可为绝对路径的图片或内置图标 String - -
duration 面板展开收起的过渡时间，单位ms Number 300 -

# Collapse Event

注意：请在<zx-collapse></zx-collapse>上监听此事件

事件名 说明 回调参数
change 当前激活面板展开/关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) activeNames: String | Array
open 当前激活面板展开时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) activeNames: String | Array
close 当前激活面板关闭时触发(如果是手风琴模式，参数activeNames类型为String，否则为Array) activeNames: String | Array

# Collapse Methods

注意：此方法需要通过ref调用

方法 说明
init 重新初始化内部高度计算，用于异步获取内容的情形，请结合this.$nextTick()使用

# Slot

微信小程序不支持slot写法

名称 说明
- 主体部分的内容
title 标题内容
icon icon
value 右侧value
right-icon 右侧icon