SuperAPI AI 工具集

el-collapse

通用与其它

查看项目

更新于 10-15 23:32

技能介绍

用途:el-collapse 是 Element Plus 的折叠面板组件,把内容收纳在可展开的面板中,适合 FAQ、手风琴面板、可折叠内容区、可展开列表等场景。

主要能力:支持手风琴模式(accordion,一次只展开一个面板);通过 v-model 绑定当前激活面板名;可设置展开图标位置(expand-icon-position,left/right);提供 before-collapse 钩子,在折叠前执行确认逻辑;支持自定义标题插槽、自定义图标插槽与 icon 属性;面板项可设 name、title、icon、disabled。

使用方式:以 el-collapse 包裹 el-collapse-item,用 v-model 绑定激活项。非手风琴模式下 v-model 为数组,如 const activeNames = ref(['1']);手风琴模式下为字符串,如 const activeName = ref('1')。自定义标题用 #title 插槽,自定义图标可传 icon 属性(如从 @element-plus/icons-vue 引入 CaretRight)。before-collapse 返回布尔值或 Promise<boolean>,返回 false 可阻止折叠。

事件与暴露:change 事件在激活面板变化时触发;组件暴露 activeNames 与 setActiveNames。

限制:资料未提供安装命令、版本要求、样式定制细节与浏览器兼容性信息,暂未提供。