Collapse 折叠面板

介绍

将内容放置在折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

import { Collapse } from 'mind-ui-vue';
Vue.use(Collapse);

示例

<m-collapse v-model="visible" :duration="300">
  <div>
    contain
    注：最外层 div 不可设置 `margin-top` 与 `margin-botton`，
    否则会影响组件内部高度计算，
    如有需要，请在包裹标签中设置。
  </div>
</m-collapse>

<m-button @click="collapseToggle">collapse 面板</m-button>

export default {
  data() {
    return {
      visible: false,
    };
  },

  methods: {
    collapseToggle() {
      this.visible = !this.visible;
    }
  }
}

Api

Props

参数	说明	类型	可选值	默认值
v-model v1.1.0	是否展开折叠面板	Boolean	—	false
visible 后期版本将移除	是否展开折叠面板	Boolean	—	false
duration	动画时长(单位ms)	Number	—	300

Events

名称	说明	返回值
change	折叠面板动画结束回调	面板开启/关闭对应的 Boolean 值

Slots

名称	说明
-	折叠面板内容