V3 Element

Appearance

On this page

Collapse 折叠面板 ​

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

基础用法 ​

可同时展开多个面板，面板之间不影响

Title A

headline title

this is content a aaa
Title B
Disabled Title
<template>
  <div class="basic block">
    <vk-collapse v-model="openedValue">
      <vk-collapse-item name="a" title="Title A">
        <h1>headline title</h1>
        <div>this is content a aaa</div>
      </vk-collapse-item>
      <vk-collapse-item name="b" title="Title B">
        <div>this is bbbbb test</div>
      </vk-collapse-item>
      <vk-collapse-item name="c" title="Disabled Title" disabled>
        <div>this is cccc test</div>
      </vk-collapse-item>
    </vk-collapse>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const openedValue = ref(['a']);
</script>

手风琴效果 ​

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Title A

headline title

this is content a aaa
Title B
Title C
<template>
  <div class="basic block">
    <vk-collapse v-model="openedValue" accordion>
      <vk-collapse-item name="a" title="Title A">
        <h1>headline title</h1>
        <div>this is content a aaa</div>
      </vk-collapse-item>
      <vk-collapse-item name="b" title="Title B">
        <div>this is bbbbb test</div>
      </vk-collapse-item>
      <vk-collapse-item name="c" title="Title C">
        <div>this is cccc test</div>
      </vk-collapse-item>
    </vk-collapse>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const openedValue = ref(['a']);
</script>

Collapse API ​

属性 ​

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

事件 ​

事件名描述类型
change切换当前活动面板(Array<string | number>) => void

插槽 ​

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

Collapse Item API ​

属性 ​

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

插槽 ​

插槽名说明
defaultCollapse Item 的内容
titleCollapse Item 的标题