# 折叠面板
# 预览
# 使用方法
<template>
<div>
<m-collapse :selected.sync="selected">
<m-collapse-item title="标题1" name="1">1</m-collapse-item>
<m-collapse-item title="标题2" name="2">2</m-collapse-item>
<m-collapse-item title="标题3" name="3">3</m-collapse-item>
</m-collapse>
</div>
</template>
<script>
import Collapse from '../../../src/collapse'
import CollapseItem from '../../../src/collapse-item'
export default {
components:{ 'm-collapse': Collapse, 'm-collapse-item': CollapseItem, },
data(){ return{ selected : ['3'] } },
}
</script>
# 选项
- 双向绑定
Collapse 组件的双向绑定与 Vue 官方的类似,支持 .sync 修饰符。
<m-collapse :selected.sync="selected">
- 必选参数
Collapse 组件必须接受两个参数: title 用于显示折叠面板的标题。 name 用于表示选中的 item。
<m-collapse-item title="标题1" name="1">1</m-collapse-item>
- 手风琴效果
Collapse 组件还支持手风琴效果,就是只能同时显示一个面板内容,可以通过设置 single 属性来更改,默认是 false 。
预览 代码<template> <div> <m-collapse :selected.sync="selected" single> <m-collapse-item title="标题1" name="1">1</m-collapse-item> <m-collapse-item title="标题2" name="2">2</m-collapse-item> <m-collapse-item title="标题3" name="3">3</m-collapse-item> </m-collapse> </div> </template> <script> import Collapse from '../../../src/collapse' import CollapseItem from '../../../src/collapse-item' export default { components:{ 'm-collapse': Collapse, 'm-collapse-item': CollapseItem, }, data(){ return{ selected : ['1'] } }, } </script>