## 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 | 描述內容 |