Collapse

折叠, 配合CollapseItem组件实现折叠选项卡功能

基本使用

    <!-- isAccordion控制是否同时能打开多个选项卡 -->
    <a-collapse :is-accordion="isAccordion">
        <a-collapse-item v-for="n in 3" :key="n" :title="`第${n}行`">
            已经打开第{{n}}行
        </a-collapse-item>
    </a-collapse>

高级使用

<a-collapse :is-accordion="isAccordion">
    <a-collapse-item :is-open="true">
        <template slot="header">
            props: is-accordion
        </template>
        设置is-accordion="true"后, 同时只能打开一个选项卡
    </a-collapse-item>
    <a-collapse-item title="props: title" :is-open="false">
        collapse-item标签上设置可设置title/is-open属性
    </a-collapse-item>
    <a-collapse-item title="slot: header" :is-open="false">
        对了, collapse-item还支持name="header"的slot
    </a-collapse-item>
</a-collapse>

API

********** Collapse Api **********

props
参数说明类型默认值可选值是否必选
isAccordion是否同时只能打开1个选项卡Booleanfalse-
slot
名称说明
default只能放CollapseItem组件

********** CollapseItem Api **********

props
参数说明类型默认值可选值是否必选
isOpen是否打开, 支持.sync修饰符Booleanfalse-
hasLine标题下是否有线Booleanfalse-
hasAnimate是否有切换动画Booleantrue-
slot
名称说明
default任意组件/元素
title标题
events
名称说明参数参数类型
update:isOpen展开/闭合触发, 返回状态是否已打开Boolean
change展开/闭合触发, 返回当前选项卡索引当前选项卡索引Number
中国移动
19:01:30
86%