Skip to content

Collapse 折叠面板

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

基础用法

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

Consistency
YJJ
Big龙
嘿毛
嫖瓜
Feedback
我这条命可以说是我老婆给的,当年我们俩个去游泳,泳池里只有我们俩个人。 我溺水了,虽说水深只到我头发的位置,但我还是溺水了。 正当我无力蹦起来呼吸空气快要死掉的时候,她从泳池里爬了出去。 水位便降到我脖子处了。
我一直在你身边,也一再为你担心,今天你吃得饱吗?睡得好吗?深夜冷吗? 我知道你不会照顾自己,每当我一走开,你就从猪栏跳出去
Efficiency
小玲有个毛病,一上课就睡觉,下课时让我碰她一下。
一天母鸡飞上了屋顶,主人气气愤的说你下来,再不下来我把这里的公鸡全部宰了,叫你生不如死。母鸡大笑说好啊,哈哈,终于可以去找鸭子了。
怎么说也说不明白。闹到最后,两人火大了,就相互揪住对方,去衙门讨个说法。 县太爷升堂,听了双方指控,当即
Details
vue
<template>
  <ACollapse>
    <ACollapseItem title="Consistency" name="1">
      <ATag closeable type="success">YJJ</ATag>
      <ATag closeable type="warning">Big龙</ATag>
      <ATag closeable type="danger">嘿毛</ATag>
      <ATag closeable type="info">嫖瓜</ATag>
    </ACollapseItem>
    <ACollapseItem title="Feedback" name="2">
      <div>
        我这条命可以说是我老婆给的,当年我们俩个去游泳,泳池里只有我们俩个人。
        我溺水了,虽说水深只到我头发的位置,但我还是溺水了。
        正当我无力蹦起来呼吸空气快要死掉的时候,她从泳池里爬了出去。
        水位便降到我脖子处了。
      </div>
      <div>
        我一直在你身边,也一再为你担心,今天你吃得饱吗?睡得好吗?深夜冷吗?
        我知道你不会照顾自己,每当我一走开,你就从猪栏跳出去
      </div>
    </ACollapseItem>
    <ACollapseItem title="Efficiency" name="3">
      <div>
        小玲有个毛病,一上课就睡觉,下课时让我碰她一下。
      </div>
      <div>
       一天母鸡飞上了屋顶,主人气气愤的说你下来,再不下来我把这里的公鸡全部宰了,叫你生不如死。母鸡大笑说好啊,哈哈,终于可以去找鸭子了。
      </div>
      <div>
        怎么说也说不明白。闹到最后,两人火大了,就相互揪住对方,去衙门讨个说法。 县太爷升堂,听了双方指控,当即
      </div>
    </ACollapseItem>
  </ACollapse>
</template>

手风琴效果

每次只能展开一个面板

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

Consistency
YJJ
Big龙
嘿毛
嫖瓜
Feedback
我这条命可以说是我老婆给的,当年我们俩个去游泳,泳池里只有我们俩个人。 我溺水了,虽说水深只到我头发的位置,但我还是溺水了。 正当我无力蹦起来呼吸空气快要死掉的时候,她从泳池里爬了出去。 水位便降到我脖子处了。
我一直在你身边,也一再为你担心,今天你吃得饱吗?睡得好吗?深夜冷吗? 我知道你不会照顾自己,每当我一走开,你就从猪栏跳出去
Efficiency
小玲有个毛病,一上课就睡觉,下课时让我碰她一下。
一天母鸡飞上了屋顶,主人气气愤的说你下来,再不下来我把这里的公鸡全部宰了,叫你生不如死。母鸡大笑说好啊,哈哈,终于可以去找鸭子了。
怎么说也说不明白。闹到最后,两人火大了,就相互揪住对方,去衙门讨个说法。 县太爷升堂,听了双方指控,当即
Details
vue
<template>
  <ACollapse v-model="activatCollapes" accordion>
    <ACollapseItem title="Consistency" name="1">
      <ATag closeable type="success">YJJ</ATag>
      <ATag closeable type="warning">Big龙</ATag>
      <ATag closeable type="danger">嘿毛</ATag>
      <ATag closeable type="info">嫖瓜</ATag>
    </ACollapseItem>
    <ACollapseItem title="Feedback" name="2">
      <div>
        我这条命可以说是我老婆给的,当年我们俩个去游泳,泳池里只有我们俩个人。
        我溺水了,虽说水深只到我头发的位置,但我还是溺水了。
        正当我无力蹦起来呼吸空气快要死掉的时候,她从泳池里爬了出去。
        水位便降到我脖子处了。
      </div>
      <div>
        我一直在你身边,也一再为你担心,今天你吃得饱吗?睡得好吗?深夜冷吗?
        我知道你不会照顾自己,每当我一走开,你就从猪栏跳出去
      </div>
    </ACollapseItem>
    <ACollapseItem title="Efficiency" name="3">
      <div>
        小玲有个毛病,一上课就睡觉,下课时让我碰她一下。
      </div>
      <div>
       一天母鸡飞上了屋顶,主人气气愤的说你下来,再不下来我把这里的公鸡全部宰了,叫你生不如死。母鸡大笑说好啊,哈哈,终于可以去找鸭子了。
      </div>
      <div>
        怎么说也说不明白。闹到最后,两人火大了,就相互揪住对方,去衙门讨个说法。 县太爷升堂,听了双方指控,当即
      </div>
    </ACollapseItem>
  </ACollapse>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
const activatCollapes = ref("1");
</script>