## 代码演示 ### 基础用法 通过`v-model`控制展开的面板列表,`activeNames`为数组格式。 ```html 内容 内容 内容 ``` ```ts const activeNames = ref([]) ``` ### 手风琴 通过`accordion`可以设置为手风琴模式,最多展开一个面板,此时`activeName`为字符串格式。 ```html 内容 内容 内容 ``` ```ts const activeNames = ref('1') ``` ### 禁用状态 通过 `disabled` 属性来禁用单个面板。 ```html 内容 内容 内容 ``` ### 异步更新 通过给`hd-collapse-item`组件传入 `beforeExpend` 函数可以在打开面板前进行校验和处理,返回 true 表示允许打开,返回 false 表示禁止打开。支持返回 Promise 进行例如调用接口获取面板数据的操作。 ```html 内容 内容 {{content2}} ``` ```ts const content2 = ref('内容2') // 内容 const loading = useLoading() // loading /** * 折叠面板展开前回调方法 */ function beforeExpend(name, index) { return new Promise((reslove, reject) => { loading.showLoading({}) setTimeout(() => { loading.hideLoading() content2.value = '通过传入 `beforeExpend` 函数可以在打开面板前进行校验和处理,返回 true 表示允许打开,返回 false 表示禁止打开。支持返回 Promise 进行例如调用接口获取面板数据的操作。' reslove(true) }, 500) }) } ```