Collapse 折叠面板

通过折叠面板收纳内容区域。

合理区分信息，快速抓住用户眼球

合理排布信息的优先级，突出主要信息，弱化次要信息

基础用法

可同时展开多个面板，面板之间不影响。

查看代码 < />

<template>
      <w-collapse v-model="activeNames" @change="handleChange">
        <w-collapse-item title="主次分明" name="1">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>合理排布信息的优先级，突出主要信息，弱化次要信息</div>
        </w-collapse-item>
        <w-collapse-item title="突出重点" name="2">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>合理排布信息的优先级，突出主要信息，弱化次要信息</div>
        </w-collapse-item>
        <w-collapse-item title="化繁为简" name="3">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>依据相似属性，划分同类信息，将繁杂的信息精简到几个分类，减少数量</div>
        </w-collapse-item>
        <w-collapse-item title="步步为营" name="4">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>对于有明确节点的任务，拆解步骤，一步一步进行，有条不紊</div>
        </w-collapse-item>
      </w-collapse>
</template>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

合理区分信息，快速抓住用户眼球

合理排布信息的优先级，突出主要信息，弱化次要信息

手风琴效果

每次只能展开一个面板。

查看代码 < />


<template>
      <w-collapse v-model="activeNames" @change="handleChange" accordion>
        <w-collapse-item title="主次分明" name="1">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>合理排布信息的优先级，突出主要信息，弱化次要信息</div>
        </w-collapse-item>
        <w-collapse-item title="突出重点" name="2">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>合理排布信息的优先级，突出主要信息，弱化次要信息</div>
        </w-collapse-item>
        <w-collapse-item title="化繁为简" name="3">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>依据相似属性，划分同类信息，将繁杂的信息精简到几个分类，减少数量</div>
        </w-collapse-item>
        <w-collapse-item title="步步为营" name="4">
          <div>合理区分信息，快速抓住用户眼球</div>
          <div>对于有明确节点的任务，拆解步骤，一步一步进行，有条不紊</div>
        </w-collapse-item>
      </w-collapse>
</template>
<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

查看代码 < />


<template>
  <section class="collapse-demo">
      <w-collapse>
        <w-collapse-item>
          <template slot="title">
            主次分明<i class="w-icon-link"></i>
          </template>
          合理区分信息，快速抓住用户眼球
        </w-collapse-item>
        <w-collapse-item title="突出重点">
          合理排布信息的优先级，突出主要信息，弱化次要信息
        </w-collapse-item>
        <w-collapse-item title="化繁为简">
          依据相似属性，划分同类信息，将繁杂的信息精简到几个分类，减少数量
        </w-collapse-item>
        <w-collapse-item title="步步为营">
          对于有明确节点的任务，拆解步骤，一步一步进行，有条不紊
        </w-collapse-item>
      </w-collapse>
</template>
<script>
  export default {
    data() {
      return {
        activeNames: ['1']
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      }
    }
  }
</script>

API

Collapse Attributes

参数	说明	类型	可选值	默认值
value / v-model	当前激活的面板(如果是手风琴模式，绑定值类型需要为`string`，否则为`array`)	string / array	—	—
accordion	是否手风琴模式	boolean	—	false

Collapse Events

事件名称	说明	回调参数
change	当前激活面板改变时触发(如果是手风琴模式，参数 `activeNames` 类型为`string`，否则为`array`)	(activeNames: array / string)

Collapse Item Attributes

参数	说明	类型	可选值	默认值
name	唯一标志符	string/number	—	—
title	面板标题	string	—	—
disabled	是否禁用	boolean	—	—

贡献者

类型	参与者
设计者	UED视觉组
维护者	UED前端组

# Collapse 折叠面板

基础用法

查看代码 < />

手风琴效果

查看代码 < />

自定义面板标题

查看代码 < />

# API

# Collapse Attributes

# Collapse Events

# Collapse Item Attributes

# 贡献者

Collapse 折叠面板

API

Collapse Attributes

Collapse Events

Collapse Item Attributes

贡献者