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>