Accordion 折叠面板 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用

可以折叠/展开的内容区域。

规则

对复杂区域进行分组和隐藏。
通常，一次只允许单个内容区域展开；特殊情况，多个内容区域可以同时展开。

引入方式

数字生活小程序工程中，不需要 import，直接使用组件标签即可。

import { Accordion, Panel } from '@21cnfe/vui'  
Vue.component('Accordion', Accordion)  
Vue.component('Panel', Panel)

代码演示

Accordion 折叠面板 accordions

基本用法 defaultActiveKey 属性初始化选中面板的 key，onChange为面板切换或关闭时的回调方法，onPanelClick 为面板点击时回调方法

<Accordion @onChange="changeBack" @onPanelClick="clickBack" :defaultActiveKey="['1', '2']">
  <Panel name="1">
    <template slot="header">
      Title1
    </template>
    <template slot="content">
      <p>content1</p>
      <p>content2</p>
      <p>content3</p>
    </template>
  </Panel>
  <Panel name="2">
    <template slot="header">
      Title2
    </template>
    <template slot="content">
      <p>content1</p>
    </template>
  </Panel>
</Accordion>

折叠面板模式通过 accordion 属性开启折叠面板模式，每次只展示一个内容块，其他内容块会关闭

<Accordion openAnimation :accordion="true">
  <Panel name="1">
    <template slot="header">
      Title
    </template>
    <template slot="content">
      <p>content1</p>
      <p>content2</p>
      <p>content3</p>
    </template>
  </Panel>
  <Panel name="2">
    <template slot="header">
      Title2
    </template>
    <template slot="content">
      <p>content1</p>
    </template>
  </Panel>
</Accordion>

API

属性	说明	类型	默认值
`accordion`	`折叠面板`模式	Number	`false`
`defaultActiveKey`	初始化选中面板的 key	Array	`[]`
`name`	`Panel`的属性，指定对应面板，对应 defaultActiveKey 的 key 值	String	`--`
`openAnimation`	禁止动画可不设或设为`false`，设置自定义动画可传入字符串，eg:`transition: all 1s ease-out`	Boolean \| String	`transition: all 0.25s ease-out`

Event

事件名称	说明	回调参数
`onChange`	激活或者关闭tab面板时调用，参数`activeKey`为激活的tab面板数组	(activeKey: Array): void
`onPanelClick`	点击面板头部时回调，返回当前点击面板 `name` 和面板激活状态	(activeKey: String, isActive: Boolean): void

Slot（accordion.Panel）

插槽名称	说明
`header`	插入内容为Panel头部
`content`	插入内容为Panel内容部分

1. Accordion 折叠面板 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

Accordion 折叠面板 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用

规则

引入方式

代码演示

API

Event

Slot（accordion.Panel）

Accordion 折叠面板 APP
该方法或组件支持移动端小程序调用

PC
该方法或组件支持桌面端小程序调用