2021-12-30 00:44:43 +08:00
|
|
|
::: anchor
|
|
|
|
:::
|
|
|
|
|
2022-02-06 05:20:07 +08:00
|
|
|
::: title 基本介绍
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: describe 折叠面板则能有效地节省页面的可视面积。
|
|
|
|
:::
|
|
|
|
|
2021-10-26 01:13:23 +08:00
|
|
|
::: title 基础使用
|
2021-10-19 22:28:44 +08:00
|
|
|
:::
|
|
|
|
|
2021-10-01 18:20:41 +08:00
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
2021-12-08 23:46:42 +08:00
|
|
|
<lay-collapse v-model="openKeys">
|
2021-10-12 12:58:17 +08:00
|
|
|
<lay-collapse-item title="标题" id="1"> 内容 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
|
2021-10-01 18:20:41 +08:00
|
|
|
</lay-collapse>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
2021-10-12 23:52:46 +08:00
|
|
|
const openKeys = ref(["1","2","3"])
|
2021-10-12 12:58:17 +08:00
|
|
|
|
2021-10-01 18:20:41 +08:00
|
|
|
return {
|
2021-10-12 12:58:17 +08:00
|
|
|
openKeys
|
2021-10-01 18:20:41 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2021-10-12 11:30:07 +08:00
|
|
|
:::
|
2021-10-12 14:27:33 +08:00
|
|
|
|
2021-12-08 23:46:42 +08:00
|
|
|
::: title 手风琴效果
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-collapse v-model="openKeys2" accordion>
|
|
|
|
<lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
|
|
|
|
</lay-collapse>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const openKeys2 = ref("2")
|
|
|
|
|
|
|
|
return {
|
|
|
|
openKeys2
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 禁用属性
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-collapse v-model="openKeys3">
|
|
|
|
<lay-collapse-item title="标题" id="1" disabled> 内容 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题" id="2"> 内容 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题" id="3" disabled> 内容 </lay-collapse-item>
|
|
|
|
</lay-collapse>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const openKeys3 = ref(["1","2"])
|
|
|
|
|
|
|
|
return {
|
|
|
|
openKeys3
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title 标题插槽
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-collapse v-model="openKeys4">
|
|
|
|
<lay-collapse-item title="标题" id="1">
|
|
|
|
<template #title>自定义标题<i class="layui-icon layui-icon-heart-fill" style="color:red;"></i></template>
|
|
|
|
内容
|
|
|
|
</lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题" id="2">
|
|
|
|
<template v-slot:title="props">自定义标题{{props}}</template>
|
|
|
|
内容
|
|
|
|
</lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题" id="3"> 内容 </lay-collapse-item>
|
|
|
|
</lay-collapse>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const openKeys4 = ref(["1","2"])
|
|
|
|
|
|
|
|
return {
|
|
|
|
openKeys4
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2022-03-24 17:51:41 +08:00
|
|
|
|
|
|
|
::: title 关闭动画
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-collapse v-model="openKeys5" :isAmin="isAmin">
|
|
|
|
<lay-collapse-item title="标题1" id="1"> 内容1 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题2" id="2"> 内容2 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题3" id="3"> 内容3 </lay-collapse-item>
|
|
|
|
</lay-collapse>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
const isAmin = ref(false)
|
|
|
|
const openKeys5 = ref("2")
|
|
|
|
|
|
|
|
return {
|
|
|
|
openKeys5,
|
|
|
|
isAmin
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-12-08 23:46:42 +08:00
|
|
|
::: title 事件使用
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: demo
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<lay-collapse v-model="emit1" @change="change">
|
|
|
|
<lay-collapse-item title="标题1" :id="1"> 内容1 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题2" :id="2"> 内容2 </lay-collapse-item>
|
|
|
|
<lay-collapse-item title="标题3" id="haha"> 内容3 </lay-collapse-item>
|
|
|
|
</lay-collapse>
|
|
|
|
<div style="color:#ff5722;">F12 打开调试工具 -> console 控制面板进行查看事件输出</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-11-05 00:07:45 +08:00
|
|
|
::: title Collapse 属性
|
2021-10-13 02:32:29 +08:00
|
|
|
:::
|
2021-10-12 18:00:09 +08:00
|
|
|
|
2021-11-07 15:55:08 +08:00
|
|
|
::: table
|
|
|
|
|
2021-12-08 23:46:42 +08:00
|
|
|
| Name | Description | Accepted Values | Default Value |
|
|
|
|
| --------- | ----------------------- | --------------- | --------------- |
|
|
|
|
| openKeys | 默认打开的折叠面板子项key | `string`/`array`| -- |
|
|
|
|
| accordion | 是否开启手风琴效果 | `boolean` | `false` |
|
2021-10-13 10:19:38 +08:00
|
|
|
|
2021-11-07 15:55:08 +08:00
|
|
|
:::
|
2021-10-13 10:19:38 +08:00
|
|
|
|
2022-01-10 01:17:03 +08:00
|
|
|
::: title Collapse 事件
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: table
|
|
|
|
|
|
|
|
| Name | Description | Callback Params |
|
|
|
|
| -------- | -------------------- | ---------------- |
|
|
|
|
| change | 折叠面板变化触发事件 | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
|
|
|
::: title Collapse Item 属性
|
2021-10-13 10:19:38 +08:00
|
|
|
:::
|
|
|
|
|
2021-11-07 15:55:08 +08:00
|
|
|
::: table
|
|
|
|
|
2021-12-08 23:46:42 +08:00
|
|
|
| Name | Description | Accepted Values | Default Value |
|
|
|
|
| --------- | ----------------------- | --------------- | --------------- |
|
|
|
|
| id | 编号 | `string` | -- |
|
|
|
|
| title | 标题 | `string` | -- |
|
|
|
|
| disabled | 是否禁用 | `boolean` | `false` |
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2022-01-10 01:17:03 +08:00
|
|
|
::: title Collapse Item 插槽
|
2021-12-08 23:46:42 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
::: table
|
|
|
|
|
|
|
|
| Name | Description | Params |
|
|
|
|
| --------- | ----------------------- | --------------- |
|
|
|
|
| -- | 默认插槽 --> 内容 | `{props}` |
|
|
|
|
| title | 标题插槽 | `{props}` |
|
|
|
|
|
|
|
|
:::
|
|
|
|
|
2021-12-16 17:57:59 +08:00
|
|
|
::: comment
|
2022-01-12 14:19:06 +08:00
|
|
|
:::
|
|
|
|
|
|
|
|
::: previousNext collapse
|
2021-12-16 17:57:59 +08:00
|
|
|
:::
|