折叠面板 Collapse

可以折叠/展开的内容区域，对复杂区域进行分组和隐藏，保持页面的整洁。

基本使用

内容区 1

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

内容区 2

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world. A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

内容区 3

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

Show Code

vue

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

const collapseData = ref([
  {
    key: '1',
    header: '内容区 1',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
  {
    key: '2',
    header: '内容区 2',
    text: `  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
  },
  {
    key: '3',
    header: '内容区 3',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
])
const activeKey = ref(['1'])
watchEffect(() => {
  console.log('activeKey:', activeKey.value)
})
</script>
<template>
  <n-collapse :collapse-data="collapseData" v-model:active-key="activeKey" />
</template>

手风琴效果

只允许单个内容区域展开，只需 activeKey 传入 number | string 即可

内容区 1

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

内容区 2

Copy

内容区 3

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

Show Code

vue

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

const collapseData = ref([
  {
    key: '1',
    header: '内容区 1',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
  {
    key: '2',
    header: '内容区 2',
    text: `  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
  },
  {
    key: '3',
    header: '内容区 3',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
])
const key = ref('1')
watchEffect(() => {
  console.log('key:', key.value)
})
</script>
<template>
  <n-collapse :collapse-data="collapseData" v-model:active-key="key" />
</template>

可复制面板内容

内容区 1

template

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

内容区 2

template

Copy

内容区 3

template

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

Show Code

vue

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

const collapseData = ref([
  {
    key: '1',
    header: '内容区 1',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
  {
    key: '2',
    header: '内容区 2',
    text: `  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
  },
  {
    key: '3',
    header: '内容区 3',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
])
const activeKey = ref(['1'])
watchEffect(() => {
  console.log('activeKey:', activeKey.value)
})
</script>
<template>
  <n-collapse copyable lang="template" :collapse-data="collapseData" v-model:active-key="activeKey" />
</template>

可自定义内容

自定义 header、lang、text 内容和样式

burlywood color 内容区 1 (key = 1)

typescript

Copy

burlywood color A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world. (key = 1)

内容区 2

typescript

Copy

内容区 3

typescript

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

Show Code

vue

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

const collapseData = ref([
  {
    key: '1',
    header: '内容区 1',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
  {
    key: '2',
    header: '内容区 2',
    text: `  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
  },
  {
    key: '3',
    header: '内容区 3',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
])
const activeKey = ref(['1'])
watchEffect(() => {
  console.log('activeKey:', activeKey.value)
})
</script>
<template>
  <n-collapse :collapse-data="collapseData" v-model:active-key="activeKey">
    <template #header="{ header, key }">
      <span v-if="key === '1'" style="color: burlywood">burlywood color {{ header }} (key = {{ key }})</span>
    </template>
    <template #lang>typescript</template>
    <template #text="{ text, key }">
      <span v-if="key === '1'" style="color: burlywood">burlywood color {{ text }} (key = {{ key }})</span>
    </template>
  </n-collapse>
</template>

可隐藏箭头图标

内容区 1

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

内容区 2

Copy

内容区 3

Copy

A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.

Show Code

vue

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

const collapseData = ref([
  {
    key: '1',
    header: '内容区 1',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
  {
    key: '2',
    header: '内容区 2',
    text: `  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
  A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`,
  },
  {
    key: '3',
    header: '内容区 3',
    text: 'A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.',
  },
])
const activeKey = ref(['1'])
watchEffect(() => {
  console.log('activeKey:', activeKey.value)
})
</script>
<template>
  <n-collapse :show-arrow="false" :collapse-data="collapseData" v-model:active-key="activeKey" />
</template>

API

参数	说明	类型	默认值
collapseData	折叠面板数据，可使用 v-slot 替换对应索引的 header 和 text	Collapse[]	[]
activeKey(v-model)	当前激活 tab 面板的 key	number[]	number
copyable	是否可复制面板内容	boolean	false
lang	面板右上角固定内容，例如标识language	string	slot
fontSize	面板标题和内容的字体大小，单位px	number	14
headerFontSize	面板标题字体大小，单位px，优先级高于fontSize	number	0
textFontSize	面板内容字体大小，单位px，优先级高于fontSize	number	0
showArrow	是否展示面板上的箭头	boolean	true

Collapse Type

名称	说明	类型	必传
key	对应activeKey，如果没有传入key属性，则默认使用数据索引(0,1,2...)绑定	string \| number	false
header	面板标题	string \| slot	false
text	面板内容	string \| slot	false

Events

事件名称	说明	参数
change	切换面板的回调	(key: any) => void

折叠面板 Collapse ​

基本使用 ​

手风琴效果 ​

可复制面板内容 ​

可自定义内容 ​

可隐藏箭头图标 ​

API ​

Collapse Type ​

Events ​

折叠面板 Collapse

基本使用

手风琴效果

可复制面板内容

可自定义内容

可隐藏箭头图标

API

Collapse Type

Events