• Collapse 折叠面板
    • 概述
    • 代码示例
    • API
      • Collapse props
      • Collapse events
      • Panel props
      • Panel slot

    Collapse 折叠面板

    概述

    将内容区域折叠/展开。

    代码示例

    Collapse 折叠面板 - 图1

    基础用法

    默认可以同时展开多个面板,可以设置默认展开第几个。

    1. <template>
    2. <Collapse v-model="value1">
    3. <Panel name="1">
    4. 史蒂夫·乔布斯
    5. <p slot="content">史蒂夫·乔布斯(Steve Jobs),1955年2月24日生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创办人。</p>
    6. </Panel>
    7. <Panel name="2">
    8. 斯蒂夫·盖瑞·沃兹尼亚克
    9. <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak),美国电脑工程师,曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学,后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。</p>
    10. </Panel>
    11. <Panel name="3">
    12. 乔纳森·伊夫
    13. <p slot="content">乔纳森·伊夫是一位工业设计师,现任Apple公司设计师兼资深副总裁,英国爵士。他曾参与设计了iPod,iMac,iPhone,iPad等众多苹果产品。除了乔布斯,他是对苹果那些著名的产品最有影响力的人。</p>
    14. </Panel>
    15. </Collapse>
    16. </template>
    17. <script>
    18. export default {
    19. data () {
    20. return {
    21. value1: '1'
    22. }
    23. }
    24. }
    25. </script>

    Collapse 折叠面板 - 图2

    手风琴

    通过设置属性accordion开启手风琴模式,每次只能打开一个面板。

    1. <template>
    2. <Collapse v-model="value2" accordion>
    3. <Panel name="1">
    4. 史蒂夫·乔布斯
    5. <p slot="content">史蒂夫·乔布斯(Steve Jobs),1955年2月24日生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创办人。</p>
    6. </Panel>
    7. <Panel name="2">
    8. 斯蒂夫·盖瑞·沃兹尼亚克
    9. <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak),美国电脑工程师,曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学,后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。</p>
    10. </Panel>
    11. <Panel name="3">
    12. 乔纳森·伊夫
    13. <p slot="content">乔纳森·伊夫是一位工业设计师,现任Apple公司设计师兼资深副总裁,英国爵士。他曾参与设计了iPod,iMac,iPhone,iPad等众多苹果产品。除了乔布斯,他是对苹果那些著名的产品最有影响力的人。</p>
    14. </Panel>
    15. </Collapse>
    16. </template>
    17. <script>
    18. export default {
    19. data () {
    20. return {
    21. value2: '1'
    22. }
    23. }
    24. }
    25. </script>

    Collapse 折叠面板 - 图3

    面板嵌套

    折叠面板可以进行嵌套。

    1. <template>
    2. <Collapse accordion v-model="value3">
    3. <Panel name="1">
    4. 史蒂夫·乔布斯
    5. <div slot="content">
    6. 史蒂夫·乔布斯(Steve Jobs),1955年2月24日生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创办人。
    7. <Collapse accordion v-model="value4">
    8. <Panel name="1-1">
    9. iPhone
    10. <p slot="content">iPhone,是美国苹果公司研发的智能手机,它搭载iOS操作系统。第一代iPhone于2007年1月9日由苹果公司前首席执行官史蒂夫·乔布斯发布,并在2007年6月29日正式发售。</p>
    11. </Panel>
    12. <Panel name="1-2">
    13. iPad
    14. <p slot="content">iPad是由苹果公司于2010年开始发布的平板电脑系列,定位介于苹果的智能手机iPhone和笔记本电脑产品之间,(屏幕中有4个虚拟程序固定栏)与iPhone布局一样,提供浏览网站、收发电子邮件、观看电子书、播放音频或视频、玩游戏等功能。由英国出生的设计主管乔纳森·伊夫(Jonathan Ive)(有些翻译为 乔纳森·艾维)领导的团队设计的,这个圆滑、超薄的产品反映出了伊夫对德国天才设计师Dieter Rams的崇敬之情。</p>
    15. </Panel>
    16. </Collapse>
    17. </div>
    18. </Panel>
    19. <Panel name="2">
    20. 斯蒂夫·盖瑞·沃兹尼亚克
    21. <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak),美国电脑工程师,曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学,后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。</p>
    22. </Panel>
    23. <Panel name="3">
    24. 乔纳森·伊夫
    25. <p slot="content">乔纳森·伊夫是一位工业设计师,现任Apple公司设计师兼资深副总裁,英国爵士。他曾参与设计了iPod,iMac,iPhone,iPad等众多苹果产品。除了乔布斯,他是对苹果那些著名的产品最有影响力的人。</p>
    26. </Panel>
    27. </Collapse>
    28. </template>
    29. <script>
    30. export default {
    31. data () {
    32. return {
    33. value3: '1',
    34. value4: '1-1'
    35. }
    36. }
    37. }
    38. </script>

    Collapse 折叠面板 - 图4

    简洁模式

    设置属性 simple 可以显示为不带边框和背景色的简洁模式。

    <template>
        <Collapse simple>
            <Panel name="1">
                史蒂夫·乔布斯
                <p slot="content">史蒂夫·乔布斯(Steve Jobs),1955年2月24日生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创办人。</p>
            </Panel>
            <Panel name="2">
                斯蒂夫·盖瑞·沃兹尼亚克
                <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak),美国电脑工程师,曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学,后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。</p>
            </Panel>
            <Panel name="3">
                乔纳森·伊夫
                <p slot="content">乔纳森·伊夫是一位工业设计师,现任Apple公司设计师兼资深副总裁,英国爵士。他曾参与设计了iPod,iMac,iPhone,iPad等众多苹果产品。除了乔布斯,他是对苹果那些著名的产品最有影响力的人。</p>
            </Panel>
        </Collapse>
    </template>
    <script>
        export default {
    
        }
    </script>
    

    API

    Collapse props

    属性说明类型默认值
    value当前激活的面板的 name,可以使用 v-model 双向绑定Array | String-
    accordion是否开启手风琴模式,开启后每次至多展开一个面板Booleanfalse
    simple是否开启简洁模式Booleanfalse

    Collapse events

    事件名说明返回值
    on-change切换面板时触发,返回当前已展开的面板的 key,格式为数组[]

    Panel props

    属性说明类型默认值
    name当前面板的 name,与 Collapse的value对应,不填为索引值Stringindex
    hide-arrow隐藏箭头Booleanfalse

    Panel slot

    名称说明
    面板头内容
    content描述内容