Collapse 折叠面板

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

基础用法

可同时展开多个面板,面板之间互不影响.

周杰伦

最美的不是下雨天,而是和你一起躲过雨的屋檐

赵雷

理想永远都年轻

你让我倔强地反抗着命运

你让我变得苍白

却依然天真的相信花儿会再次的盛开

Beyond

无法可修饰的一双手

带出温暖永远在背后

总是啰嗦始终关注

不懂珍惜太内疚

沉醉于音阶她不赞赏

母亲的爱却从未退让

决心冲开心中挣扎

亲恩终可报答

<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '../../../src/components/Collapse/Collapse.vue'
import CollapseItem from '../../../src/components/Collapse/CollapseItem.vue'

const opendValue = ref(['1'])
</script>

<template>
  <Collapse v-model="opendValue">
    <CollapseItem name="1">
      <template #title>
        <span>周杰伦</span>
      </template>

      <template #content>
        <div>最美的不是下雨天,而是和你一起躲过雨的屋檐</div>
      </template>
    </CollapseItem>

    <CollapseItem name="2">
      <template #title>赵雷</template>

      <template #content>
        <div>理想永远都年轻</div>
        <div>你让我倔强地反抗着命运</div>
        <div>你让我变得苍白</div>
        <div>却依然天真的相信花儿会再次的盛开</div>
      </template>
    </CollapseItem>

    <CollapseItem name="3">
      <template #title>
        <span>Beyond</span>
      </template>

      <template #content>
        <div>无法可修饰的一双手</div>
        <div>带出温暖永远在背后</div>
        <div>总是啰嗦始终关注</div>
        <div>不懂珍惜太内疚</div>
        <div>沉醉于音阶她不赞赏</div>
        <div>母亲的爱却从未退让</div>
        <div>决心冲开心中挣扎</div>
        <div>亲恩终可报答</div>
      </template>
    </CollapseItem>
  </Collapse>
</template>

<style lang="scss" scoped></style>

手风琴效果

每次只能展开一个面板. 通过 accordion 属性来设置是否以手风琴模式显示.

周杰伦

最美的不是下雨天,而是和你一起躲过雨的屋檐

赵雷

理想永远都年轻

你让我倔强地反抗着命运

你让我变得苍白

却依然天真的相信花儿会再次的盛开

Beyond

无法可修饰的一双手

带出温暖永远在背后

总是啰嗦始终关注

不懂珍惜太内疚

沉醉于音阶她不赞赏

母亲的爱却从未退让

决心冲开心中挣扎

亲恩终可报答

<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '../../../src/components/Collapse/Collapse.vue'
import CollapseItem from '../../../src/components/Collapse/CollapseItem.vue'

const opendValue = ref(['1'])
</script>

<template>
  <Collapse v-model="opendValue" accordion>
    <CollapseItem name="1">
      <template #title>
        <span>周杰伦</span>
      </template>

      <template #content>
        <div>最美的不是下雨天,而是和你一起躲过雨的屋檐</div>
      </template>
    </CollapseItem>

    <CollapseItem name="2">
      <template #title>赵雷</template>

      <template #content>
        <div>理想永远都年轻</div>
        <div>你让我倔强地反抗着命运</div>
        <div>你让我变得苍白</div>
        <div>却依然天真的相信花儿会再次的盛开</div>
      </template>
    </CollapseItem>

    <CollapseItem name="3">
      <template #title>
        <span>Beyond</span>
      </template>

      <template #content>
        <div>无法可修饰的一双手</div>
        <div>带出温暖永远在背后</div>
        <div>总是啰嗦始终关注</div>
        <div>不懂珍惜太内疚</div>
        <div>沉醉于音阶她不赞赏</div>
        <div>母亲的爱却从未退让</div>
        <div>决心冲开心中挣扎</div>
        <div>亲恩终可报答</div>
      </template>
    </CollapseItem>
  </Collapse>
</template>

<style lang="scss" scoped></style>

禁用面板

通过disabled属性来设置是否禁用某个面板

周杰伦

最美的不是下雨天,而是和你一起躲过雨的屋檐

赵雷

理想永远都年轻

你让我倔强地反抗着命运

你让我变得苍白

却依然天真的相信花儿会再次的盛开

Beyond

无法可修饰的一双手

带出温暖永远在背后

总是啰嗦始终关注

不懂珍惜太内疚

沉醉于音阶她不赞赏

母亲的爱却从未退让

决心冲开心中挣扎

亲恩终可报答

<script setup lang="ts">
import { ref } from 'vue'
import Collapse from '../../../src/components/Collapse/Collapse.vue'
import CollapseItem from '../../../src/components/Collapse/CollapseItem.vue'

const opendValue = ref(['1'])
</script>

<template>
  <Collapse v-model="opendValue" accordion>
    <CollapseItem name="1">
      <template #title>
        <span>周杰伦</span>
      </template>

      <template #content>
        <div>最美的不是下雨天,而是和你一起躲过雨的屋檐</div>
      </template>
    </CollapseItem>

    <CollapseItem name="2" disabled>
      <template #title>赵雷</template>

      <template #content>
        <div>理想永远都年轻</div>
        <div>你让我倔强地反抗着命运</div>
        <div>你让我变得苍白</div>
        <div>却依然天真的相信花儿会再次的盛开</div>
      </template>
    </CollapseItem>

    <CollapseItem name="3">
      <template #title>
        <span>Beyond</span>
      </template>

      <template #content>
        <div>无法可修饰的一双手</div>
        <div>带出温暖永远在背后</div>
        <div>总是啰嗦始终关注</div>
        <div>不懂珍惜太内疚</div>
        <div>沉醉于音阶她不赞赏</div>
        <div>母亲的爱却从未退让</div>
        <div>决心冲开心中挣扎</div>
        <div>亲恩终可报答</div>
      </template>
    </CollapseItem>
  </Collapse>
</template>

<style lang="scss" scoped></style>

Collapse API

Collapse Attributes

属性名	说明	类型	默认值
model-value / v-model	当前活动面板	string[]	[]
accordion	是否手风琴模式	boolean	false

Collapse Events

事件名	说明	类型
click	切换当前活动面板	Function

Collapse Slots

插槽名	说明	子标签
default	自定义默认内容	Collapse Item

Collapse Item API

Collapse Item Attributes

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

Collapse Item Slot

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