You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.5 KiB
2.5 KiB
代码演示
基础用法
通过v-model控制展开的面板列表，activeNames为数组格式。
<hd-collapse v-model="activeNames">
<hd-collapse-item title="标题1" name="1" index="1">内容</hd-collapse-item>
<hd-collapse-item title="标题2" name="2" index="2">内容</hd-collapse-item>
<hd-collapse-item title="标题3" name="3" index="3">内容</hd-collapse-item>
</hd-collapse>
const activeNames = ref<string | string[]>([])
手风琴
通过accordion可以设置为手风琴模式，最多展开一个面板，此时activeName为字符串格式。
<hd-collapse accordion v-model="activeNames">
<hd-collapse-item title="标题1" name="1" index="1">内容</hd-collapse-item>
<hd-collapse-item title="标题2" name="2" index="2">内容</hd-collapse-item>
<hd-collapse-item title="标题3" name="3" index="3">内容</hd-collapse-item>
</hd-collapse>
const activeNames = ref<string | string[]>('1')
禁用状态
通过 disabled 属性来禁用单个面板。
<hd-collapse accordion>
<hd-collapse-item title="标题1" index="1">内容</hd-collapse-item>
<hd-collapse-item title="标题2" index="2" disabled>内容</hd-collapse-item>
<hd-collapse-item title="标题3" index="3" disabled>内容</hd-collapse-item>
</hd-collapse>
异步更新
通过给hd-collapse-item组件传入 beforeExpend 函数可以在打开面板前进行校验和处理，返回 true 表示允许打开，返回 false 表示禁止打开。支持返回 Promise 进行例如调用接口获取面板数据的操作。
<hd-loading></hd-loading>
<hd-collapse accordion>
<hd-collapse-item title="标题1" :index="1">内容</hd-collapse-item>
<hd-collapse-item title="标题2" :index="2">内容</hd-collapse-item>
<hd-collapse-item title="标题3" :index="3" :before-expend="beforeExpend">{{content2}}</hd-collapse-item>
</hd-collapse>
const content2 = ref<string>('内容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)
})
}