Collapse 折叠面板

常用于收纳一组内容。

基础用法

默认面板各自独立，利用 defaultOpend 设置默认是否打开。

查看代码

<template>
	<demo-container>
		<gov-collapse>
			<gov-collapse-item title="枫桥夜泊" defaultOpend>
				月落乌啼霜满天，江枫渔火对愁眠。<br />
				姑苏城外寒山寺，夜半钟声到客船。
			</gov-collapse-item>
			<gov-collapse-item title="凉州词">
				黄河远上白云间，一片孤城万仞山。<br />
				羌笛何须怨杨柳，春风不度玉门关。
			</gov-collapse-item>
			<gov-collapse-item title="早发白帝城">
				朝辞白帝彩云间，千里江陵一日还。<br />
				两岸猿声啼不住，轻舟已过万重山。
			</gov-collapse-item>
		</gov-collapse>
	</demo-container>
</template>

手风琴

v-model 对应面板的 name，当设置 v-model 时，会自动开启手风琴效果。

控制台

value: 

查看代码

<template>
	<demo-container>
		<gov-collapse v-model="value" accordion>
			<gov-collapse-item title="枫桥夜泊" name="collapse1">
				月落乌啼霜满天，江枫渔火对愁眠。<br />
				姑苏城外寒山寺，夜半钟声到客船。
			</gov-collapse-item>
			<gov-collapse-item title="凉州词" name="collapse2">
				黄河远上白云间，一片孤城万仞山。<br />
				羌笛何须怨杨柳，春风不度玉门关。
			</gov-collapse-item>
			<gov-collapse-item title="早发白帝城" name="collapse3">
				朝辞白帝彩云间，千里江陵一日还。<br />
				两岸猿声啼不住，轻舟已过万重山。
			</gov-collapse-item>
		</gov-collapse>
		<template #console>value: {{ value }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(null);
</script>

禁用面板

设置禁用某个面板。

查看代码

<template>
	<demo-container>
		<gov-collapse>
			<gov-collapse-item title="枫桥夜泊">
				月落乌啼霜满天，江枫渔火对愁眠。<br />
				姑苏城外寒山寺，夜半钟声到客船。
			</gov-collapse-item>
			<gov-collapse-item title="凉州词" disabled>
				黄河远上白云间，一片孤城万仞山。<br />
				羌笛何须怨杨柳，春风不度玉门关。
			</gov-collapse-item>
			<gov-collapse-item title="早发白帝城">
				朝辞白帝彩云间，千里江陵一日还。<br />
				两岸猿声啼不住，轻舟已过万重山。
			</gov-collapse-item>
		</gov-collapse>
	</demo-container>
</template>

设置禁用全部。

查看代码

<template>
	<demo-container>
		<gov-collapse disabled>
			<gov-collapse-item title="枫桥夜泊">
				月落乌啼霜满天，江枫渔火对愁眠。<br />
				姑苏城外寒山寺，夜半钟声到客船。
			</gov-collapse-item>
			<gov-collapse-item title="凉州词">
				黄河远上白云间，一片孤城万仞山。<br />
				羌笛何须怨杨柳，春风不度玉门关。
			</gov-collapse-item>
			<gov-collapse-item title="早发白帝城">
				朝辞白帝彩云间，千里江陵一日还。<br />
				两岸猿声啼不住，轻舟已过万重山。
			</gov-collapse-item>
		</gov-collapse>
	</demo-container>
</template>

Collapse Attributes

属性名	说明	类型	可选值	默认值
modelValue	绑定的值，控制展开的面板，对应 collapseitem 的 name；当设置 v-model 时自动开启手风琴。	String/Number	—	null
disabled	是否禁用整个折叠面板	Boolean	true, false	false

Collapse Events

事件名	说明	回调参数
toggle	当面板展开或收起时触发	展开的面板值
update:modelValue	同步绑定值更新事件	展开的面板值

Collapse Slots

插槽名	说明
default	默认插槽，放置GovCollapseItem组件

CollapseItem Attributes

属性名	说明	类型	可选值	默认值
title	折叠项标题	String	—	—
name	折叠项标识，用于控制展开状态	String/Number	—	null
disabled	是否禁用折叠项	Boolean	true, false	false
defaultOpend	默认是否展开	Boolean	true, false	false

CollapseItem Events

事件名	说明	回调参数
toggle	折叠项展开或收起时触发	当前展开状态，true 为展开，false 为收起

CollapseItem Slots

插槽名	说明	作用域插槽	内容
title	自定义折叠项标题内容	否	可以放置自定义的标题内容，如文本或图标
icon	自定义折叠项图标	是	可以放置自定义的图标，提供了 opend 属性表示当前是否展开
default	折叠项内容	否	放置折叠项的主要内容