Collapse 折叠面板

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

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

折叠面板默认为手风琴模式，即打开一个其他会关闭，可以通过设置accordion设置为false关闭手风琴模式。

• 通过设置tn-collapse-item的open属性设置面板初始化时是否为打开。
• 通过设置tn-collapse-item的disabled属性设置面板是否允许操作，当前会保持上一次打开关闭状态。

展开后的内容是通过slot插槽传入的，我们可以在外层包裹一个view元素，然后即可给内容添加对应的样式。

<template>
  <tn-collapse>
    <tn-collapse-item v-for="(item, index) in list" :key="index" :title="item.title" :disabled="item.disabled">
      <view class="collapse-item-content">
        {{ item.content }}
      </view>
    </tn-collapse-item>
  </tn-collapse>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            title: '关雎',
            content: '关关雎鸠，在河之洲。窈窕淑女，君子好逑。参差荇菜，左右流之。窈窕淑女，寤寐求之。求之不得，寤寐思服。悠哉悠哉，辗转反侧。参差荇菜，左右采之。窈窕淑女，琴瑟友之。参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。',
            disabled: false
          },
          {
            title: '长歌行',
            content: '青青园中葵，朝露待日晞。阳春布德泽，万物生光辉。常恐秋节至，焜黄华叶衰。百川东到海，何时复西归？少壮不努力，老大徒伤悲！',
            disabled: false
          },
          {
            title: '秋风辞',
            content: '秋风起兮白云飞，草木黄落兮雁南归。兰有秀兮菊有芳，怀佳人兮不能忘。泛楼船兮济汾河，横中流兮扬素波。少壮几时兮奈老何！',
            disabled: false
          }
        ]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .collapse-item-content {
    word-wrap: break-word;
  }
</style>

API

Collapse Props

属性名	说明	类型	默认值	可选值
accordion	手风琴模式	Boolean	true	false
headStyle	自定义item的头部样式	Object	-	-
bodyStyle	自定义item的主体样式	Object	-	-
itemStyle	自定义item的整个样式	Object	-	-
arrow	显示右边的箭头	Boolean	true	false
arrowColor	箭头的颜色，当arrow为true时有效	String	#AAAAAA	-
hoverClass	点击时样式类名，按下时有效，样式必须写在根目录的App.vue或通过其引入的全局样式中才有效，none或者空为无效果，作用于头部标题区域	String	tn-hover	-

Collapse Slots

none

Collapse Event

事件名称	说明	回调参数
change	当前折叠面板展开时触发，(如果为手风琴模式，返回的参数为String，否则为Array)	activeNames: 当前激活标签的唯一标识名

Collapse Method

方法	说明
init	重新初始化内部内容的高度，当异步获取数据时可以使用当前函数

CollapseItem Props

属性名	说明	类型	默认值	可选值
open	初始化时是否打开面板	Boolean	false	true
name	面板唯一标识，如果没有填写则以当前item的索引值	Number|String	-	-
title	面板的标题	String	-	-
align	面板标题的对齐方式	String	left	center/right
disabled	面板不允许操作	Boolean	false	true
activeStyle	当tn-collapse的arrow属性为false时，自定义当前选中的item的样式	Object	-	-
index	tn-collapse-item标识，标记当前点击的是哪一个item	String|Number	-	-

CollapseItem Slots

名称	说明
default	主体的内容
title	头部内容，不包含右边的箭头区域
title-all	整个头部内容，包含右边的箭头区域

CollapseItem Event

事件名称	说明	回调参数
change	折叠面板打开或者关闭时触发	index: 传入的index属性，show: 当前面板打开关闭状态，true为打开，false为关闭