折叠面板

Accordion 是折叠面板组件，适用于展示多个内容区域。

defineComponent RenderableContent

示例

点击展开查看详情

导入

JavaScript
import { createAccordion } from 'vanilla-jui';

基础用法

使用 createAccordion(props) 创建 AccordionPanel 实例：

JavaScript
const accordion = createAccordion({  active: 'usage',  data: [    { name: 'intro', title: 'Intro', content: 'Intro content' },    {      name: 'profile',      title: ({ index }) => `Panel ${index + 1}`,      content: ({ item }) => `Panel name: ${item.name}`,    },  ],});const container = document.querySelector('#demo');if (container) accordion.mount(container);

参数

createAccordion(props)

参数	类型	默认值	说明
`data`	`AccordionItem[]`	见下表	初始非空面板配置列表
`id`	`string \| null`	自动生成	根节点 id；为空时自动生成
`active`	`number \| string \| Array \| null`	`0`	初始激活项
`collapsible`	`boolean`	`false`	允许关闭当前已激活项
`multiple`	`boolean`	`false`	允许同时展开多个面板
`direction`	`'vertical' \| 'horizontal'`	`vertical`	布局与展开动画方向
`className`	`object`	见下表	覆盖组件结构类名
`onChange`	`Function \| null`	`null`	用户切换面板后的回调

data

字段	类型	说明
`name`	`string`	可选；为空时自动生成。传入固定值时要求唯一
`title`	`string`	面板标题
`content`	`RenderableContent`	面板内容
`cache`	`boolean`	函数型 content 是否缓存结果
`ttl`	`number`	缓存有效时间，单位毫秒；`0` 表示不过期

onChange

onChange(index, name, headerRef, panelRef, accordion)

参数	说明
`index`	当前激活面板索引
`name`	当前激活面板名称
`headerRef`	当前激活面板头 DOM 引用
`panelRef`	当前激活面板内容 DOM 引用
`accordion`	当前实例

className

字段	默认值	说明
`root`	`j-accordion`	根节点
`header`	`accordion-header`	面板头
`title`	`header-title`	标题区域
`arrow`	`header-arrow`	箭头区域
`panel`	`accordion-panel`	面板区域
`content`	`panel-content`	内容区域

实例属性

属性	说明
`props`	归一化后的创建期配置
`state.data`	响应式面板数据，变更后由 keyed 列表更新
`state.activeNames`	当前展开的面板名称列表
`state.loading`	异步函数型 content 正在解析
`element`	`build()` 后生成的稳定根节点
`runtime`	`built`、`mounted`、`destroyed` 状态
`current`	当前主面板，包含 `index` 和 `name`

state

把运行时需要关注的数据放入响应式 state：

字段	说明
`activeNames`	当前展开的面板名称列表
`data`	面板数据列表
`loading`	异步函数型 `content` 正在解析

基于状态更新视图，如：

JavaScript
// 增加数据项accordion.state.data.push({  name: 'faq',  title: 'FAQ',  content: 'FAQ content',});// 更新数据项const faq = accordion.state.data.find((item) => item.name === 'faq');if (faq) faq.title = 'FAQ updated';// 删除数据项accordion.state.data = accordion.state.data.filter(  (item) => item.name !== 'faq');

实例方法

方法	说明
`build()`	创建 DOM、绑定事件并同步初始状态
`mount(container)`	构建并挂载到指定容器
`unmount()`	从当前容器移除根节点
`activate(indexOrName)`	激活、展开或折叠指定面板
`setState(patch)`	设置响应式状态字段
`destroy()`	销毁实例，移除已挂载 DOM 并释放资源

公共控制器方法还包括 own()、use()、on()、off() 和 emit()，语义见定义组件。