layui/example/docs/zh-CN/components/collapse.md

::: anchor :::

::: title 基本介绍 :::

::: describe 折叠面板则能有效地节省页面的可视面积。 :::

::: title 基础使用 :::

::: demo

内容 内容 内容 <script> import { ref } from 'vue' export default { setup() { const openKeys = ref(["1","2","3"]) return { openKeys } } } </script>

:::

::: title 手风琴效果 :::

::: demo

内容1 内容2 内容3 <script> import { ref } from 'vue' export default { setup() { const openKeys2 = ref("2") return { openKeys2 } } } </script>

:::

::: title 禁用属性 :::

::: demo

内容 内容 内容 <script> import { ref } from 'vue' export default { setup() { const openKeys3 = ref(["1","2"]) return { openKeys3 } } } </script>

:::

::: title 标题插槽 :::

::: demo

自定义标题 内容 自定义标题{{props}} 内容 内容 <script> import { ref } from 'vue' export default { setup() { const openKeys4 = ref(["1","2"]) return { openKeys4 } } } </script>

:::

::: title 事件使用 :::

::: demo

内容1 内容2 内容3

F12 打开调试工具 -> console 控制面板进行查看事件输出

<script> import { ref } from 'vue' export default { setup() { const emit1 = ref([1, 2, "haha"]) const change = function(id, isShow, activeValues){ console.log("change", id, isShow, activeValues); } return { emit1 } } } </script>

:::

::: title Collapse 属性 :::

::: table

Name	Description	Accepted Values	Default Value
openKeys	默认打开的折叠面板子项key	string/array	--
accordion	是否开启手风琴效果	boolean	false

:::

::: title Collapse 事件 :::

::: table

Name	Description	Callback Params
change	折叠面板变化触发事件	(id, isShow, activeValues) id: (number / string)对应当前操作面板的值 isShow: (boolean)true -> 展开, false -> 折叠 activeValues: (Array)当前状态为展开的面板值集合

:::

::: title Collapse Item 属性 :::

::: table

Name	Description	Accepted Values	Default Value
id	编号	string	--
title	标题	string	--
disabled	是否禁用	boolean	false

:::

::: title Collapse Item 插槽 :::

::: table

Name	Description	Params
--	默认插槽 --> 内容	{props}
title	标题插槽	{props}

:::

::: comment :::

::: previousNext collapse :::