# 折叠面板

可以折叠/展开的内容区域。

# 示例

# 设置默认开启

可同时展开多个面板,面板之间互不影响

# 预览

# 代码

点击查看源码
data() {
    return {
        selectedTab: ['1', '2', '3']
    }
}
<g-collapse :selected.sync="selectedTab">
    <g-collapse-item title="标题1" name="1">内容-1</g-collapse-item>
    <g-collapse-item title="标题2" name="2">内容-2</g-collapse-item>
    <g-collapse-item title="标题3" name="3">内容-3</g-collapse-item>
</g-collapse>

# 手风琴效果

每次只能展开一个面板,就像手风琴一样

# 预览

# 代码

点击查看源码
data() {
    return {
        selectedTab: ['1']
    }
}
<g-collapse :selected.sync="selectedTab" single>
    <g-collapse-item title="标题1" name="1">内容-1</g-collapse-item>
    <g-collapse-item title="标题2" name="2">内容-2</g-collapse-item>
    <g-collapse-item title="标题3" name="3">内容-3</g-collapse-item>
</g-collapse>

TIP

设定 single 同时建议 selectedTab 也设置为单个

# 属性

# 1. title

title 用于显示折叠面板的标题,为必传参数。

# 2. name

name 用于表示选中的 item,为必传参数

# 3. single

Collapse 组件可以通过设置 single 属性来更改显示效果。默认是 false,只能同时显示一个面板内容,当其值为 true 时,多个面板的内容可同时显示

# 4. 双向绑定

Collapse 组件的双向绑定,支持 .sync 修饰符。