更新记录

0.0.1（2023-06-06）

一个基于Vue3和TypeScript开发的 Collapse 折叠面板组件，将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容，支持手风琴和异步展开

平台兼容性

组件库官方文档：fant-mini-plus

组件库提供更多vue3组件，比单独引入更加强大

Collapse 折叠面板

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

代码演示

基础用法

通过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)
  })
}

Collapse

Props

Slots

Collapse-Item

Props

回调参数

before-expend 执行时会传递以下回调参数：

Slots

联系方式

有不明白或者建议可以扫码交流

联系我们