Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

基础用法

通过 v-model 控制展开的面板列表，activeNames 为数组格式。

<z-collapse v-model="active1">
  <z-collapse-item title="标题1">
    zebra-swiper是基于uniapp开发的一款移动端轮播组件。
  </z-collapse-item>
  <z-collapse-item title="标题2">
    zebraSwiper 组件主要由 z-swiper，z-swiper-item 组成。
    其中，z-swiper-item 组件只可放置在 z-swiper 组件中。
  </z-collapse-item>
  <z-collapse-item title="标题3">
    在使用组件时，可以通过props像组件传递参数，从而实现不同的配置。
    通常，配置都将通过options对象传递给组件。所以配置项都应该写进options中。
    同时，也可以通过$refs的方式调用组件的方法。
  </z-collapse-item>
</z-collapse>

const active1 = ref([0])

手风琴

通过 accordion 可以设置为手风琴模式，最多展开一个面板，此时 activeName 为字符串格式。

<z-collapse v-model="active2" accordion>
  <z-collapse-item title="标题1">
    zebra-swiper是基于uniapp开发的一款移动端轮播组件。
  </z-collapse-item>
  <z-collapse-item title="标题2">
    zebraSwiper 组件主要由 z-swiper，z-swiper-item 组成。
    其中，z-swiper-item 组件只可放置在 z-swiper 组件中。
  </z-collapse-item>
  <z-collapse-item title="标题3">
    在使用组件时，可以通过props像组件传递参数，从而实现不同的配置。
    通常，配置都将通过options对象传递给组件。所以配置项都应该写进options中。
    同时，也可以通过$refs的方式调用组件的方法。
  </z-collapse-item>
</z-collapse>

const active2 = ref(0)

禁用状态

通过 disabled 属性来禁用单个面板。

<z-collapse v-model="active3">
  <z-collapse-item title="标题1">
    zebra-swiper是基于uniapp开发的一款移动端轮播组件。
  </z-collapse-item>
  <z-collapse-item title="标题2" disabled>
    zebraSwiper 组件主要由 z-swiper，z-swiper-item 组成。
    其中，z-swiper-item 组件只可放置在 z-swiper 组件中。
  </z-collapse-item>
  <z-collapse-item title="标题3" disabled>
    在使用组件时，可以通过props像组件传递参数，从而实现不同的配置。
    通常，配置都将通过options对象传递给组件。所以配置项都应该写进options中。
    同时，也可以通过$refs的方式调用组件的方法。
  </z-collapse-item>
</z-collapse>

自定义标题内容

通过 title 插槽可以自定义标题栏的内容。

<z-collapse v-model="active4">
  <z-collapse-item>
    <template #title> 标题1<z-icon name="tag" /> </template>
    zebra-swiper是基于uniapp开发的一款移动端轮播组件。
  </z-collapse-item>
  <z-collapse-item title="标题2" value="内容" icon="question-circle">
    zebraSwiper 组件主要由 z-swiper，z-swiper-item 组成。
    其中，z-swiper-item 组件只可放置在 z-swiper 组件中。
  </z-collapse-item>
</z-collapse>

全部展开与全部切换

通过 Collapse 实例上的 toggleAll 方法可以实现全部展开与全部切换。

<z-collapse v-model="active5" ref="collapse">
  <z-collapse-item title="标题1" name="1">
    zebra-swiper是基于uniapp开发的一款移动端轮播组件。
  </z-collapse-item>
  <z-collapse-item title="标题2" name="2">
    zebraSwiper 组件主要由 z-swiper，z-swiper-item 组成。
    其中，z-swiper-item 组件只可放置在 z-swiper 组件中。
  </z-collapse-item>
  <z-collapse-item title="标题3" name="3">
    在使用组件时，可以通过props像组件传递参数，从而实现不同的配置。
    通常，配置都将通过options对象传递给组件。所以配置项都应该写进options中。
    同时，也可以通过$refs的方式调用组件的方法。
  </z-collapse-item>
</z-collapse>
<view class="demo-collapse-buttons">
  <z-button type="primary" @click="openAll"> 全部展开 </z-button>
  <z-button
    type="primary"
    :custom-style="{ 'margin-left': '30rpx' }"
    @click="toggleAll"
  >
    全部切换
  </z-button>
</view>

import { ref } from 'vue';
const active5 = ref(['1'])
const collapse = ref()

const openAll = () => {
  collapse.value?.toggleAll?.(true)
}
const toggleAll = () => {
  collapse.value?.toggleAll?.()
}

.demo-collapse {
  &-buttons {
    margin-top: var(--z-padding-md);
  }
}

Tips: 手风琴模式下无法使用 toggleAll 方法。

Collapse Props

Collapse Events

CollapseItem Props

Collapse 方法

通过 ref 可以获取到 CollapseItem 实例并调用实例方法。

CollapseItem 方法

通过 ref 可以获取到 CollapseItem 实例并调用实例方法。

CollapseItem Slots

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。