logpm/uni_modules/fant-mini-plus/components/hd-collapse-item/INDEX.md

代码演示

基础用法

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

禁用状态

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

异步更新

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