Minimalist UI

Collapse 折叠面板

引入组件

<template>
  <m-collapse>
    <m-collapse-item title="标题1" name="content1">
      内容1
    </m-collapse-item>
    <m-collapse-item title="标题2" name="content2">
      内容2
    </m-collapse-item>
    <m-collapse-item title="标题3" name="content3">
      内容3
    </m-collapse-item>
  </m-collapse>
</template>

<script>
  import { MCollapse, MCollapseItem } from "@csr/m_ui";
  export default {
    components: {
      MCollapse,
      MCollapseItem
    }
  }
</script>

基础用法

内容1 内容2 内容3
代码
<m-collapse>
  <m-collapse-item title="标题1" name="content1">
    内容1
  </m-collapse-item>
  <m-collapse-item title="标题2" name="content2">
    内容2
  </m-collapse-item>
  <m-collapse-item title="标题3" name="content3">
    内容3
  </m-collapse-item>
</m-collapse>

默认展开

内容1 内容2 内容3
代码
<m-collapse v-model="selected">
  <m-collapse-item title="标题1" name="content1">
    内容1
  </m-collapse-item>
  <m-collapse-item title="标题2" name="content2">
    内容2
  </m-collapse-item>
  <m-collapse-item title="标题3" name="content3">
    内容3
  </m-collapse-item>
</m-collapse>

<script>
  export default {
    data() {
      return { selected: ['content1'] }
    }
  }
</script>

手风琴模式

内容1 内容2 内容3
代码
<m-collapse v-model="selected" single="true">
  <m-collapse-item title="标题1" name="content1">
    内容1
  </m-collapse-item>
  <m-collapse-item title="标题2" name="content2">
    内容2
  </m-collapse-item>
  <m-collapse-item title="标题3" name="content3">
    内容3
  </m-collapse-item>
</m-collapse>

<script>
  export default {
    data() {
      return { selected: ['content1'] }
    }
  }
</script>

不使用v-model

内容1 内容2 内容3
代码
<m-collapse v-model="selected" single="true">
  <m-collapse-item title="标题1" name="content1">
    内容1
  </m-collapse-item>
  <m-collapse-item title="标题2" name="content2">
    内容2
  </m-collapse-item>
  <m-collapse-item title="标题3" name="content3">
    内容3
  </m-collapse-item>
</m-collapse>

<script>
  export default {
    data() {
      return { selected: ['content1'] }
    }
  }
</script>

API

MCollapse

属性说明类型默认值
v-model 当前激活的面板，当激活面板改变时会同步更新 array | string | number
active-name 当前激活的面板，不使用v-model时可用该属性指定激活面板 array | string | number
single 是否开启手风琴模式，可选值：true（开启），false（不开启） boolean false

MCollapseItem

属性说明类型默认值
title 面板的标题，必传 string
name 面板的标识，必传，该属性的值唯一。 string | number

事件

事件名 说明 回调参数
change 激活面板发生改变时触发 (activeNames: Array<string | number>)

← Cascader 级联选择器 →