Collapse 折叠面板

概述

将内容区域折叠/展开。

使用指南

在.vue中引入组件

<script>
    import iCollapse from 'iview-mpvue/dist/components/collapse/collapse'
    import iCollapseItem from 'iview-mpvue/dist/components/collapse-item/collapse-item'
    export default {
        components: {
            'i-collapse': iCollapse,
            'i-collapse-item': iCollapseItem
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/collapse/style/css'
import 'iview-mpvue/dist/components/collapse-item/style/css'

示例

<div class="caption-wrap">
    <text class="caption-title">折叠面板</text>
    <i-collapse :name="name">
        <i-collapse-item title="史蒂夫·乔布斯" name="name1">
            <div slot="content">
                史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
            </div>
        </i-collapse-item>
        <i-collapse-item title="斯蒂夫·盖瑞·沃兹尼亚克" name="name2">
            <div slot="content" i-class-content="green-text">
                斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
                Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
                Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
            </div>
        </i-collapse-item>
        <i-collapse-item title="乔纳森·伊夫" name="name3">
            <div slot="content">
                乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
            </div>
        </i-collapse-item>
    </i-collapse>
</div>

<div class="caption-wrap">
    <text class="caption-title">折叠面板 - 手风琴模式</text>
    <i-collapse :name="name" :accordion="true">
        <i-collapse-item title="史蒂夫·乔布斯" name="name1">
            <div slot="content">
                史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
            </div>
        </i-collapse-item>
        <i-collapse-item title="斯蒂夫·盖瑞·沃兹尼亚克" name="name2">
            <div slot="content">
                斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
                Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
                Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
            </div>
        </i-collapse-item>
        <i-collapse-item title="乔纳森·伊夫" name="name3">
            <div slot="content">
                乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
            </div>
        </i-collapse-item>
    </i-collapse>
</div>

<div class="caption-wrap">
    <text class="caption-title">修改样式</text>
    <i-collapse :name="name" :accordion="true">
        <i-collapse-item
            name="name1"
            title="史蒂夫·乔布斯"
            i-class-title="collapse-item-title"
            i-class-content="collapse-item-content">
            <div slot="content">
                史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
            </div>
        </i-collapse-item>
        <i-collapse-item
            name="name2"
            title="斯蒂夫·盖瑞·沃兹尼亚克"
            i-class-title="collapse-item-title"
            i-class-content="collapse-item-content">
            <div slot="content" i-class-content="green-text">
                斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary
                Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC
                Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。
            </div>
        </i-collapse-item>
        <i-collapse-item
            name="name3"
            title="乔纳森·伊夫"
            i-class-title="collapse-item-title"
            i-class-content="collapse-item-content">
            <div slot="content">
                乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
            </div>
        </i-collapse-item>
    </i-collapse>
</div>

API

Collapse properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
name	当前展开的面板的 name	String	-
accordion	是否为手风琴模式	Boolean	false

CollapseItem properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
i-class-title	自定义标题类名	String	-
i-class-content	自定义内容类名	String	-
name	当前面板的标识	String	-
title	当前面板的标题	String	-