Collapse 折叠面板

按需加载方法

import { Collapse, CollapseItem } from '@nutui/nutui';
Collapse.install(Vue);
CollapseItem.install(Vue);

基本用法

通过v-model控制展开的面板列表，activeNames为数组格式

<nut-collapse v-model="activeNames" @change="callback">
    <nut-collapse-item title="标题1" :name="1">
        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府 
    </nut-collapse-item>
    <nut-collapse-item title="标题2" :name="2">
        京东到家：教师节期间 创意花束销量增长53倍 
    </nut-collapse-item>
    <nut-collapse-item title="标题3" :name="3" disabled>
    </nut-collapse-item>
</nut-collapse>

export default {
  data() {
    return {
        activeNames: [1, 2]
    };
  },
  methods: {
    callback(name) {
      console.log(`点击了name是${name}的面板,callback`);
    }
  }
};

手风琴

通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式；subTitle可以设置副标题的内容

<nut-collapse v-model="activeName" :accordion="true">
    <nut-collapse-item :title="title1" :name="1">
        华为终端操作系统EMUI 11发布，9月11日正式开启 
    </nut-collapse-item>
    <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
        中国服务机器人市场已占全球市场超1/4 
    </nut-collapse-item>
    <nut-collapse-item :title="title3" :name="3">
        QuestMobile：90后互联网用户规模超越80后达3.62亿 
    </nut-collapse-item>
</nut-collapse>

export default {
  data() {
    return {
      activeName: 1,
      subTitle: '副标题'
    };
  }
};

图标展示

通过expandIconPosition可以设置图标的位置，icon设置自定义图标，rotate设置图标旋转的角度

<nut-collapse v-model="activeName" :accordion="true" :expand-icon-position="expandIconPosition" :icon="icon" :rotate="rotate">
    <nut-collapse-item :title="title1" :name="1">
        京东数科IPO将引入“绿鞋机制” 
    </nut-collapse-item>
    <nut-collapse-item :title="title2" :name="2">
        世界制造业大会开幕，阿里巴巴与安徽合作再升级
    </nut-collapse-item>
</nut-collapse>

export default {
  data() {
    return {
      activeName: 1,
      expandIconPosition: 'left',
      icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'
      rotate: 180,
    };
  }
};

Collapse Prop

Events

使用 @change = “function” 回调。如果未使用，会直接触发 methods 中定义的 change 方法，如不需要回调，尽量不要在 methods 中定义 change 方法

CollapseItem Props

说明：使用折叠面板组件，请保证 NutUI 的版本在 V2.2.11 及以上