Collapse 折叠面板

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

基础用法

折叠组件的基础用法

vue

<template> <ap-collapse header="点击展开" :expand="false"> <div> <p>车遥遥兮马洋洋，追思君兮不可忘</p> <p>君安游兮西入秦，愿为影兮随君身</p> <p>君在阴兮影不见，君依光兮妾所愿</p> </div> </ap-collapse> </template>

显示代码

动画时间

可以通过设置duration设置动画时间, 初始值 400ms

vue

<template> <ap-collapse header="点击展开" :expand="false" :duration="1000"> <div> <p>车遥遥兮马洋洋，追思君兮不可忘</p> <p>君安游兮西入秦，愿为影兮随君身</p> <p>君在阴兮影不见，君依光兮妾所愿</p> </div> </ap-collapse> </template>

显示代码

禁用状态

可以通过设置disabled属性来禁用

vue

<template> <ap-collapse header="点击展开" :expand="false" disabled> <div> <p>车遥遥兮马洋洋，追思君兮不可忘</p> <p>君安游兮西入秦，愿为影兮随君身</p> <p>君在阴兮影不见，君依光兮妾所愿</p> </div> </ap-collapse> </template>

显示代码

自定义 header

可以通过header插槽自定义 header 内容

局限

header 插槽只可以定义箭头右侧的header内容和样式

vue

<template> <ap-collapse> <template #header> <ap-button text primary>自定义头部内容</ap-button> </template> <p> 人类在未知面前凝为一体，只要活着，人终会抵达所有可见之地。我的时间已不太多，属于我的那阵风尚未来到。但在我们之中，或者，在你们的子女，学生，朋友之中，必有一人，能够抵达。 </p> </ap-collapse> </template>

显示代码

完全自定义

可以通过 toggleHeader 完全自定义头部，可以自由操作折叠显示状态

注意

需要自己操作折叠显示，否则折叠会失效

vue

<template> <ap-collapse> <template #toggleHeader="{ show, toggleShow }"> <div class="toggle-header" @click="toggleShow()"> <div>点击展开</div> <ap-icon :style="{ transform: `rotate(${show ? 90 : 0}deg)`, transition: 'all 400ms', }" > <ArrowRight /> </ap-icon> </div> </template> <p> 当你重新踏上旅途之后，一定要记得旅途本身的意义。提瓦特的飞鸟、诗和城邦，女皇、愚人和怪物……都是你旅途的一部分。终点并不意味着一切，在抵达终点之前，用你的眼睛，多多观察这个世界吧…… </p> </ap-collapse> </template> <style scoped> .toggle-header { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ebeef5; border-bottom: 1px solid #ebeef5; padding: 10px 0; cursor: pointer; color: #303133; font-size: 13px; } </style>

显示代码

Collapse Props

prop	说明	类型	默认值
expand	是否展开	boolean	false
duration	展开的动画时间(ms)	number	400
header	标题	string	'header'
showArrow	是否展示小三角 icon	boolean	true
disabled	disabled	boolean	false

Collapse Slots

名称	说明	接收参数
-	default(默认插槽)	-
header	小箭头右侧区域，无需自己处理逻辑	-
toggleHeader	header 区域，完全自主,自己处理展开逻辑	show(boolean): 是否折叠， toggleShow(function)：折叠状态转换函数