Collapse 折叠面板

基本用法

单击展开,最多支持一项展开,支持手风琴模式可多项展开

示例代码

<template>
  <div>
    <t-collapse :selected.sync="selectedItems" :single="true">
      <t-collapse-item title="标题1" name="1">内容1</t-collapse-item>
      <t-collapse-item title="标题2" name="2">内容2</t-collapse-item>
      <t-collapse-item title="标题3" name="3">内容3</t-collapse-item>
    </t-collapse>
    <div style="margin:20px 0;">手风琴模式</div>
    <t-collapse :selected.sync="selectedItems">
      <t-collapse-item title="标题1" name="1">内容1</t-collapse-item>
      <t-collapse-item title="标题2" name="2">内容2</t-collapse-item>
      <t-collapse-item title="标题3" name="3">内容3</t-collapse-item>
    </t-collapse>
  </div>
</template>

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

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

Attributes

Collapse

参数	说明	类型	可选值	默认值
selected	被选中项	Array	——	——
single	是否单一展示	Boolean	true,false	false

CollapseItem

参数	说明	类型	可选值	默认值
title	标题	String	——	——
name	唯一标识,必须赋值	String	——	——