Collapse

基础用法

<pa-collapse v-model="collapseValue" @change="onChange" @open="onOpen" @close="onClose">
  <pa-collapse-item v-for="index in 3" :key="index" :title="`标题${index}`">
    折叠内容折叠内容折叠内容折叠内容
  </pa-collapse-item>
</pa-collapse>

import { ref } from 'vue'
import type { CollapseItemValue } from '../..'

const collapseValue = ref<number[]>([0])

const onChange = (value: CollapseItemValue | CollapseItemValue[]) => {
  console.log('change', value)
}

const onOpen = (value: CollapseItemValue) => {
  console.log('open', value)
}

const onClose = (value: CollapseItemValue) => {
  console.log('close', value)
}

手风琴

<pa-collapse accordion>
  <pa-collapse-item v-for="index in 3" :key="index" :title="`标题${index}`">
    折叠内容折叠内容折叠内容折叠内容
  </pa-collapse-item>
</pa-collapse>

禁用状态

<pa-collapse>
  <pa-collapse-item
    v-for="index in 3"
    :key="index"
    :title="`标题${index}`"
    :disabled="index !== 1"
  >
    折叠内容折叠内容折叠内容折叠内容
  </pa-collapse-item>
</pa-collapse>

自定义标题内容

<pa-collapse>
  <pa-collapse-item>
    <template #title>
      <span class="color-primary">标题1</span>
      <pa-icon name="question" color="var(--pa-color-danger)" />
    </template>
    折叠内容折叠内容折叠内容折叠内容
  </pa-collapse-item>
  <pa-collapse-item title="标题2" icon="setting" value="内容">
    折叠内容折叠内容折叠内容折叠内容
  </pa-collapse-item>
</pa-collapse>

Collapse Props

参数	说明	类型	默认值
modelValue	当前展开面板的 name	CollapseItemValue|CollapseItemValue[]	-
accordion	是否开启手风琴模式	boolean	-
border	是否显示外边框	boolean	true

CollapseItem Props

参数	说明	类型	默认值
name	唯一标识符，默认为索引值	CollapseItemValue	-
title	标题栏左侧内容	string	''
icon	标题栏左侧图标名称或图片链接，可选值见 Icon 组件	string	'right-icon'
value	标题栏右侧内容	string	-
border	是否显示内边框	boolean	true
isLink	是否展示标题栏右侧箭头并开启点击反馈	boolean	true
disabled	是否禁用面板	boolean	-
readonly	是否为只读状态，只读状态下无法操作面板	boolean	-

Collapse Event

事件名	参数
update:modelValue	(value: NonNullable<CollapseProps['modelValue']>)
change	(value: NonNullable<CollapseProps['modelValue']>)
open	(name: CollapseItemValue)
close	(name: CollapseItemValue)

CollapseItem Event

事件名	参数

Collapse Slot

名称	说明
default	-

CollapseItem Slot

名称	说明
title	-
value	-

样式变量

🙈