Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板, 面板之间互不影响

<template>
  <px-collapse v-model="activeNames" @change="handleChange">
    <px-collapse-item name="1" title="标题1">
      <div>
        大家好，初次见面! Monaka是一只普通的家猫, 危险等级为: C.A.T
        直接称呼Monaka, mnk都可以喵! 不知道为什么大家都觉得我的尾巴是撬棍,
        明明是柔软的尾巴喵! 🍗生日是8月17日,
        体重是6个苹果!喜欢吃的东西是肉和猫条喵, 讨厌的东西是黄爪,
        黄爪又吓人又难吃喵!
        平时喜欢画画和玩游戏喵!还喜欢美食鉴赏!唱歌是弱项不过会努力学习的喵!
        体能比较差, 害怕玩恐怖游戏, 但是又有点猎奇心态, 所以喜欢看别人玩嘻嘻喵!
        🍗喜欢大家在弹幕里发鸡腿喵!讨厌的话是mnk...mnk...寂しい... !! 🍗
      </div>
    </px-collapse-item>
    <px-collapse-item name="2" title="标题2"> 内容2 </px-collapse-item>
    <px-collapse-item name="3" title="标题3"> 内容3 </px-collapse-item>
  </px-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type CollapseItemName } from '@mmt817/pixel-ui'

const activeNames = ref(['1'])

const handleChange = (val: CollapseItemName[]) => {
  console.log(val)
}
</script>

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示

<template>
  <px-collapse v-model="activeNames" @change="handleChange" accordion>
    <px-collapse-item name="1" title="标题1">
      <div>
        大家好，初次见面! Monaka是一只普通的家猫, 危险等级为: C.A.T
        直接称呼Monaka, mnk都可以喵! 不知道为什么大家都觉得我的尾巴是撬棍,
        明明是柔软的尾巴喵! 🍗生日是8月17日,
        体重是6个苹果!喜欢吃的东西是肉和猫条喵, 讨厌的东西是黄爪,
        黄爪又吓人又难吃喵!
        平时喜欢画画和玩游戏喵!还喜欢美食鉴赏!唱歌是弱项不过会努力学习的喵!
        体能比较差, 害怕玩恐怖游戏, 但是又有点猎奇心态, 所以喜欢看别人玩嘻嘻喵!
        🍗喜欢大家在弹幕里发鸡腿喵!讨厌的话是mnk...mnk...寂しい... !! 🍗
      </div>
    </px-collapse-item>
    <px-collapse-item name="2" title="标题2"> 内容2 </px-collapse-item>
    <px-collapse-item name="3" title="标题3"> 内容3 </px-collapse-item>
  </px-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type CollapseItemName } from '@mmt817/pixel-ui'

const activeNames = ref(['1'])

const handleChange = (val: CollapseItemName[]) => {
  console.log(val)
}
</script>

自定义面板标题

除了可以通过 title 属性来设置标题内容，也可以通过具名 title 插槽来自定义标题内容

<template>
  <px-collapse v-model="activeNames" @change="handleChange">
    <px-collapse-item name="1">
      <template #title>
        title插槽
        <px-icon icon="cog"></px-icon>
      </template>
      <div>
        大家好，初次见面! Monaka是一只普通的家猫, 危险等级为: C.A.T
        直接称呼Monaka, mnk都可以喵! 不知道为什么大家都觉得我的尾巴是撬棍,
        明明是柔软的尾巴喵! 🍗生日是8月17日,
        体重是6个苹果!喜欢吃的东西是肉和猫条喵, 讨厌的东西是黄爪,
        黄爪又吓人又难吃喵!
        平时喜欢画画和玩游戏喵!还喜欢美食鉴赏!唱歌是弱项不过会努力学习的喵!
        体能比较差, 害怕玩恐怖游戏, 但是又有点猎奇心态, 所以喜欢看别人玩嘻嘻喵!
        🍗喜欢大家在弹幕里发鸡腿喵!讨厌的话是mnk...mnk...寂しい... !! 🍗
      </div>
    </px-collapse-item>
    <px-collapse-item name="2" title="标题2"> 内容2 </px-collapse-item>
    <px-collapse-item name="3" title="标题3"> 内容3 </px-collapse-item>
  </px-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type CollapseItemName } from '@mmt817/pixel-ui'

const activeNames = ref(['1'])

const handleChange = (val: CollapseItemName[]) => {
  console.log(val)
}
</script>

禁用面板

通过 disabled 属性来设置是否禁用面板

<template>
  <px-collapse v-model="activeNames" @change="handleChange">
    <px-collapse-item name="1" title="标题1">
      <div>
        大家好，初次见面! Monaka是一只普通的家猫, 危险等级为: C.A.T
        直接称呼Monaka, mnk都可以喵! 不知道为什么大家都觉得我的尾巴是撬棍,
        明明是柔软的尾巴喵! 🍗生日是8月17日,
        体重是6个苹果!喜欢吃的东西是肉和猫条喵, 讨厌的东西是黄爪,
        黄爪又吓人又难吃喵!
        平时喜欢画画和玩游戏喵!还喜欢美食鉴赏!唱歌是弱项不过会努力学习的喵!
        体能比较差, 害怕玩恐怖游戏, 但是又有点猎奇心态, 所以喜欢看别人玩嘻嘻喵!
        🍗喜欢大家在弹幕里发鸡腿喵!讨厌的话是mnk...mnk...寂しい... !! 🍗
      </div>
    </px-collapse-item>
    <px-collapse-item name="2" title="标题2" disabled> 内容2 </px-collapse-item>
    <px-collapse-item name="3" title="标题3"> 内容3 </px-collapse-item>
  </px-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type CollapseItemName } from '@mmt817/pixel-ui'

const activeNames = ref(['1'])

const handleChange = (val: CollapseItemName[]) => {
  console.log(val)
}
</script>

自定义展开图标

通过 icon 属性来设置自定义展开图标

<template>
  <px-collapse v-model="activeNames" @change="handleChange">
    <px-collapse-item title="Title a" name="a" icon="cog">
      <div>折叠面板内容1</div>
    </px-collapse-item>
    <px-collapse-item title="Title b" name="b" icon="plane">
      <div>折叠面板内容2</div>
    </px-collapse-item>
    <px-collapse-item
      title="Title c disabled"
      name="c"
      disabled
      icon="times-solid"
    >
      <div>折叠面板内容3</div>
    </px-collapse-item>
    <px-collapse-item title="Title d" name="d" icon="star-crescent-solid">
      <div>折叠面板内容4</div>
    </px-collapse-item> </px-collapse
  >`
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type CollapseItemName } from '@mmt817/pixel-ui'

const activeNames = ref(['a'])

const handleChange = (val: CollapseItemName[]) => {
  console.log(val)
}
</script>

Collapse API

Props

Name	Description	Type	Default
modelValue	当前激活面板	string[]/number[]	[]
accordion	是否启用手风琴莫模式	boolean	false

Events

Name	Description	Type
change	切换当前活动面板	(val: CollapseItemName[]) => void

Slots

Name	Description	Children
default	自定义默认内容	CollapseItem

CollapseItem API

Props

Name	Description	Type	Default
name	唯一标识符	string/number	-
title	标题	string	''
disabled	是否禁用	boolean	false
icon	自定义展开图标	string	''

Slots

Name	Description
default	CollapseItem 内容
title	CollapseItem 标题