折叠面板

预览

使用方法

<template>
  <div>
    <e-collapse :selected.sync="selected">
      <e-collapse-item name="1" title="标题1">更多内容111</e-collapse-item>
      <e-collapse-item name="2" title="标题2">更多内容222</e-collapse-item>
      <e-collapse-item name="3" title="标题3">更多内容333</e-collapse-item>
    </e-collapse>
  </div>
</template>

<script>
import Collapse from '../../../src/collapse'
import CollapseItem from '../../../src/collapse-item'

export default {
  components: {
    'e-collapse': Collapse,
    'e-collapse-item': CollapseItem
  },
  data() {
    return {
      selected: ['1']
    }
  }
}
</script>

选项

1. 必选参数

Collapse 组件必须接受两个参数： title 用于显示折叠面板的标题。 name 用于表示选中的 item。

2. 双向绑定

Collapse 组件的双向绑定与 Vue 官方的类似，支持 .sync 修饰符。

3. 手风琴效果

Collapse 组件还支持手风琴效果，就是只能同时显示一个面板内容,可以通过设置 single 属性来更改，默认是 false 。

预览

代码

<template>
  <div>
    <e-collapse :selected.sync="selected" single>
      <e-collapse-item name="1" title="标题1">更多内容111</e-collapse-item>
      <e-collapse-item name="2" title="标题2">更多内容222</e-collapse-item>
      <e-collapse-item name="3" title="标题3">更多内容333</e-collapse-item>
    </e-collapse>
  </div>
</template>