Collapse 折叠面板

尊重所有声音，但只成为自己

基础用法

当你需要同时展开多个面板的时候，并通过 collapse-item 组件的默认插槽拉编写你的内容

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci excepturi natus error quam aperiam consequatur dolores amet reiciendis provident aspernatur, sit veritatis consectetur cumque dicta debitis nihil omnis fugit alias.

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(['2'])
</script>

<template>
  <c-collapse v-model="value">
    <c-collapse-item title="标题1" name="1">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo odit
        illum consequuntur, totam porro repudiandae quo nisi facilis!
        Reprehenderit maiores possimus odit in obcaecati eum aliquid veritatis
        et nisi suscipit!
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题2" name="2">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci
        excepturi natus error quam aperiam consequatur dolores amet reiciendis
        provident aspernatur, sit veritatis consectetur cumque dicta debitis
        nihil omnis fugit alias.
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题3" name="3">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat
        perferendis, repudiandae molestiae quaerat et labore animi facere quos
        consequuntur in repellat corrupti iusto totam omnis enim reprehenderit
        quo asperiores accusantium.
      </p>
    </c-collapse-item>
  </c-collapse>
</template>

<style scoped></style>

手风琴效果

一般当你展示的折叠数据较多，全部展开影响阅读，你可以尝试一下这个效果，给组件设置 accordion 属性即可

Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis neque exercitationem qui dolore, ipsa iste? Perspiciatis explicabo quae nihil aspernatur quidem velit dolore numquam nostrum, reiciendis mollitia quaerat exercitationem ducimus.

<script setup lang="ts">
import { ref } from 'vue'

// 手风琴模式下，你可以设置一个数组，但是只会存在一个选中的 name
// const value = ref(['1'])
// 也可以直接写一个单字符
// 一般我们更推荐你使用单字符
const value = ref('1')
</script>

<template>
  <c-collapse v-model="value" accordion>
    <c-collapse-item title="标题1" name="1">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis
        neque exercitationem qui dolore, ipsa iste? Perspiciatis explicabo quae
        nihil aspernatur quidem velit dolore numquam nostrum, reiciendis
        mollitia quaerat exercitationem ducimus.
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题2" name="2">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusantium
        quia quam sint sit? Iste sapiente consequatur neque deleniti dolorum
        culpa dolore nihil pariatur vero! Nemo quae nam quia dolorem repellat?
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题3" name="3">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos nobis
        repellat nulla debitis cum iure dolorum! Nesciunt, harum, optio eum
        libero quisquam explicabo in facere eius culpa mollitia tempore!
        Corrupti.
      </p>
    </c-collapse-item>
  </c-collapse>
</template>

<style scoped></style>

禁止

你可以通过设置 disabled 属性来禁止某个面板的点击

<script setup lang="ts">
import { ref } from 'vue'

const value = ref([])
</script>

<template>
  <c-collapse v-model="value">
    <c-collapse-item title="标题1" name="1">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo odit
        illum consequuntur, totam porro repudiandae quo nisi facilis!
        Reprehenderit maiores possimus odit in obcaecati eum aliquid veritatis
        et nisi suscipit!
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题2" name="2" disabled>
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci
        excepturi natus error quam aperiam consequatur dolores amet reiciendis
        provident aspernatur, sit veritatis consectetur cumque dicta debitis
        nihil omnis fugit alias.
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题3" name="3">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat
        perferendis, repudiandae molestiae quaerat et labore animi facere quos
        consequuntur in repellat corrupti iusto totam omnis enim reprehenderit
        quo asperiores accusantium.
      </p>
    </c-collapse-item>
  </c-collapse>
</template>

<style scoped></style>

自定义标题

标题有时候一个简单的文本，并不能满足你的需求，那么此时你可以通过给 title 的插槽来实现自定义的标题，title 插槽比 title 属性优先级更高

<script setup lang="ts">
import { ref } from 'vue'
import { Alarm } from '@vicons/ionicons5'

const value = ref([])
</script>

<template>
  <c-collapse v-model="value">
    <c-collapse-item title="标题1" name="1">
      <template #title>
        <c-icon :size="20" :icon="Alarm" color="#37a6a6" />
        <span> 这个标题我想换一下口味</span>
      </template>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo odit
        illum consequuntur, totam porro repudiandae quo nisi facilis!
        Reprehenderit maiores possimus odit in obcaecati eum aliquid veritatis
        et nisi suscipit!
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题2" name="2">
      <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci
        excepturi natus error quam aperiam consequatur dolores amet reiciendis
        provident aspernatur, sit veritatis consectetur cumque dicta debitis
        nihil omnis fugit alias.
      </p>
    </c-collapse-item>
    <c-collapse-item title="标题3" name="3">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat
        perferendis, repudiandae molestiae quaerat et labore animi facere quos
        consequuntur in repellat corrupti iusto totam omnis enim reprehenderit
        quo asperiores accusantium.
      </p>
    </c-collapse-item>
  </c-collapse>
</template>

<style scoped></style>

Collapse API

Collapse 属性

属性名	详情	类型	默认值
model-value / v-model	绑定值，手风琴模式下是一个 string，正常模式则是一个 array	`string` / `array`	--
accordion	是否手风琴模式	`boolean`	false

Collapse 事件

事件名	说明	类型
change	接收一个参数 activeNames，值与 modelValue 一致	`Function`

插槽

插槽名	说明
default	`Collapse Item` 子标签

Collapse Item API

Collapse Item 属性

属性名	说明	类型	默认值
name	唯一标志符	`string` / `number`	--
title	面板标题	`string`	''
disabled	是否禁用	`boolean`	false

Collapse Item 插槽

插槽名	说明
default	`Collapse Item` 的内容
title	`Collapse Item` 的标题

Collapse 折叠面板 ​

基础用法 ​

手风琴效果 ​

禁止 ​

自定义标题 ​

Collapse API ​

Collapse 属性 ​

Collapse 事件 ​

插槽 ​

Collapse Item API ​

Collapse Item 属性 ​

Collapse Item 插槽 ​