Collapse 折叠面板

可以折叠/展开的内容区域。

何时使用

• 对复杂区域进行分组和隐藏，保持页面的整洁。
• '手风琴' 是一种特殊的折叠面板，只允许单个内容区域展开。

示例

基础折叠面板：

<template>
  <f-collapse v-model:activeKey="activeKey">
    <f-collapse-panel key="1" header="This is panel header 1">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="2" header="This is panel header 2">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="3" header="This is panel header 3" collapsible="disabled">
      {{ text }}
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  setup() {
    const 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'])

    watch(activeKey, val => {
      console.log(val)
    })

    return {
      text,
      activeKey,
    }
  },
})
</script>

手风琴折叠面板：

<template>
  <f-collapse v-model:activeKey="activeKey" accordion>
    <f-collapse-panel key="1" header="This is panel header 1">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="2" header="This is panel header 2">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="3" header="This is panel header 3">
      {{ text }}
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const activeKey = ref([])
    const 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.`

    return {
      activeKey,
      text,
    }
  },
})
</script>

嵌套折叠面板：

<template>
  <f-collapse v-model:activeKey="activeKey" @change="changeActivekey">
    <f-collapse-panel key="1" header="This is panel header 1">
      <f-collapse>
        <f-collapse-panel key="4" header="This is panel nest panel">
          {{ text }}
        </f-collapse-panel>
        <f-collapse-panel key="5" header="This is panel nest panel">
          {{ text }}
        </f-collapse-panel>
        <f-collapse-panel key="6" header="This is panel nest panel">
          {{ text }}
        </f-collapse-panel>
      </f-collapse>
    </f-collapse-panel>
    <f-collapse-panel key="2" header="This is panel header 2">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="3" header="This is panel header 3">
      {{ text }}
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const activeKey = ref([])
    const 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 changeActivekey = (key: string) => {
      console.log(key)
    }

    return {
      activeKey,
      text,
      changeActivekey,
    }
  },
})
</script>

简洁折叠面板：

<template>
  <f-collapse v-model:activeKey="activeKey" :bordered="false">
    <f-collapse-panel key="1" header="This is panel header 1">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="2" header="This is panel header 2">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="3" header="This is panel header 3">
      {{ text }}
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const activeKey = ref(['1'])
    const 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.`
    return {
      activeKey,
      text,
    }
  },
})
</script>

额外节点折叠面板：

<template>
  <f-collapse v-model:activeKey="activeKey" :expand-icon-position="expandIconPosition">
    <f-collapse-panel key="1" header="This is panel header 1">
      {{ text }}
      <template #extra><setting-outlined @click="handleClick" /></template>
    </f-collapse-panel>
    <f-collapse-panel key="2" header="This is panel header 2">
      {{ text }}
      <template #extra><setting-outlined @click="handleClick" /></template>
    </f-collapse-panel>
    <f-collapse-panel key="3" header="This is panel header 3" collapsible="disabled">
      {{ text }}
      <template #extra><setting-outlined @click="handleClick" /></template>
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts">
import { SettingOutlined } from '@ant-design/icons-vue'
import { defineComponent, ref, watch } from 'vue'
import type { CollapseProps } from 'ant-design-vue'

export default defineComponent({
  components: {
    SettingOutlined,
  },
  setup() {
    const 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'])
    const expandIconPosition = ref<CollapseProps['expandIconPosition']>('left')

    const handleClick = (event: MouseEvent) => {
      // If you don't want click extra trigger collapse, you can prevent this:
      event.stopPropagation()
    }
    watch(activeKey, val => {
      console.log(val)
    })

    return {
      text,
      activeKey,
      expandIconPosition,
      handleClick,
    }
  },
})
</script>

自定义折叠面板：

<template>
  <f-collapse v-model:activeKey="activeKey">
    <template #expandIcon="{ isActive }">
      <UserAddOutlined style="margin-right: 12px" />
    </template>
    <f-collapse-panel key="1" header="This is panel header 1">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="2" header="This is panel header 2">
      {{ text }}
    </f-collapse-panel>
    <f-collapse-panel key="3" header="This is panel header 3">
      {{ text }}
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { UserAddOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    UserAddOutlined,
  },
  setup() {
    const activeKey = ref(['1'])
    const 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.`
    return {
      activeKey,
      text,
    }
  },
})
</script>

自定义图标：

<template>
  <f-collapse v-model:activeKey="activeKey" :expand-icon-position="expandIconPosition">
    <template #expandIcon>
      <ContainerOutlined />
    </template>
    <f-collapse-panel v-for="i of 3" :key="i" :header="`This is panel header ${i}`">
      {{ text }}
      <template #extra>
        <span class="demo-handle">
          <DownOutlined v-if="isExtend(i)" />
          <UpOutlined v-else />
          {{ isExtend(i) ? '收起' : '展开' }}
        </span>
      </template>
    </f-collapse-panel>
  </f-collapse>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { DownOutlined, UpOutlined, ContainerOutlined } from '@ant-design/icons-vue'
import type { CollapseProps } from 'ant-design-vue'

const 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'])
const expandIconPosition = ref<CollapseProps['expandIconPosition']>('left')

const isExtend = (key: string | number) => activeKey.value.includes(`${key}`)

watch(activeKey, val => {
  console.log(val)
})
</script>
<style>
.fs-collapse .anticon {
  margin-right: 4px;
}
</style>

API

Collapse

参数	说明	类型	默认值	版本
accordion	手风琴模式	boolean	false
activeKey(v-model)	当前激活 tab 面板的 key	string[]|string	默认无，accordion 模式下默认第一个元素
bordered	带边框风格的折叠面板	boolean	true
collapsible	所有子面板是否可折叠或指定可折叠触发区域	header | disabled	-	3.0
destroyInactivePanel	销毁折叠隐藏的面板	boolean	false
expandIcon	自定义切换图标	Function(props):VNode | slot="expandIcon" slot-scope="props"|#expandIcon="props"
expandIconPosition	设置图标位置： left, right	left	-	1.5.0
ghost	使折叠面板透明且无边框	boolean	false	3.0

事件

事件名称	说明	回调参数	版本
change	切换面板的回调	function(key)

Collapse.Panel

参数	说明	类型	默认值	版本
collapsible	是否可折叠或指定可折叠触发区域	header | disabled	-	3.0
extra	自定义渲染每个面板右上角的内容	VNode | slot	-	1.5.0
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
header	面板头内容	string|slot	无
key	对应 activeKey	string | number	无
showArrow	是否展示当前面板上的箭头	boolean	true