## Collapse 折叠面板 折叠卡片，将内容区域折叠/展开。 ### 代码示例 基础用法 >[info] 默认可以同时展开多个面板，可以设置默认展开第几个。  ```html <template> <div class="container"> <cvu-collapse v-model="panelOpenIndex"> <cvu-collapse-panel name="1"> 史蒂夫·乔布斯 <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p> </cvu-collapse-panel> <cvu-collapse-panel name="2"> 斯蒂夫·盖瑞·沃兹尼亚克 <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p> </cvu-collapse-panel> <cvu-collapse-panel name="3"> 乔纳森·伊夫 <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p> </cvu-collapse-panel> </cvu-collapse> </div> </template> <script> export default { data () { return { panelOpenIndex: '1' } } } </script> ``` 手风琴 >[info] 通过设置属性`accordion`开启手风琴模式，每次只能打开一个面板。 ```html <template> <div class="container"> <cvu-collapse accordion> <cvu-collapse-panel name="1"> 史蒂夫·乔布斯 <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p> </cvu-collapse-panel> <cvu-collapse-panel name="2"> 斯蒂夫·盖瑞·沃兹尼亚克 <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p> </cvu-collapse-panel> <cvu-collapse-panel name="3"> 乔纳森·伊夫 <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p> </cvu-collapse-panel> </cvu-collapse> </div> </template> ``` 面板嵌套 ```html <template> <cvu-collapse accordion v-model="value3"> <cvu-collapse-panel name="1"> 史蒂夫·乔布斯 <div slot="content"> 史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。 <cvu-collapse accordion v-model="value4"> <cvu-collapse-panel name="1-1"> iPhone <p slot="content">iPhone，是美国苹果公司研发的智能手机，它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布，并在2007年6月29日正式发售。</p> </cvu-collapse-panel> <cvu-collapse-panel name="1-2"> iPad <p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列，定位介于苹果的智能手机iPhone和笔记本电脑产品之间，（屏幕中有4个虚拟程序固定栏）与iPhone布局一样，提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫（Jonathan Ive）（有些翻译为 乔纳森·艾维）领导的团队设计的，这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p> </cvu-collapse-panel> </cvu-collapse> </div> </cvu-collapse-panel> <cvu-collapse-panel name="2"> 斯蒂夫·盖瑞·沃兹尼亚克 <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p> </cvu-collapse-panel> <cvu-collapse-panel name="3"> 乔纳森·伊夫 <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p> </cvu-collapse-panel> </cvu-collapse> </template> <script> export default { data () { return { value3: '1', value4: '1-1' } } } </script> ``` 简洁模式 >[info] 设置属性`simple`可以显示为不带边框和背景色的简洁模式。  ```html <template> <div class="container"> <cvu-collapse accordion simple> <cvu-collapse-panel name="1"> 史蒂夫·乔布斯 <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p> </cvu-collapse-panel> <cvu-collapse-panel name="2"> 斯蒂夫·盖瑞·沃兹尼亚克 <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p> </cvu-collapse-panel> <cvu-collapse-panel name="3"> 乔纳森·伊夫 <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p> </cvu-collapse-panel> </cvu-collapse> </div> </template> ``` ## API ### collapse props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | value | 当前激活的面板的 name，可以使用 v-model 双向绑定 | Array | String | \- | | accordion | 是否开启手风琴模式，开启后每次至多展开一个面板 | Boolean | false | | simple | 是否开启简洁模式 | Boolean | false | | close-all | 是否可全部关闭 | Boolean | false | ### collapse events | 事件名 | 说明 | 返回值 | | --- | --- | --- | | on-change | 切换面板时触发，返回当前已展开的面板的 key，格式为数组 | \[\] | ### collapse-panel props | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | name | 当前面板的 name，与 Collapse的`value`对应，不填为索引值 | String | index | | hide-arrow | 隐藏箭头 | Boolean | false | | arrow-placement | 箭头位置， hideArrow属性为false生效, 可选值为left、right | String | left | ### collapse-panel slot | 名称 | 说明 | | --- | --- | | 无 | 面板头内容 | | content | 描述内容 |