折叠面板组件,通过折叠面板收纳内容区域。
# 基础用法
组件接收 value
参数用以控制组件渲染时打开着的面板,支持 String 和 Array 两种格式。打开组件面板时,组件通过 change
事件返回打开面板名称的集合。
<template>
<EBlock class="e-collapse-showcase">
<EBlock>
<p>value:{{JSON.stringify(value1)}}</p>
</EBlock>
<ECollapse v-model="value1" @change="handleChange">
<ECollapsePane name="h1" label="hello1">
<p>
hello world!
</p>
</ECollapsePane>
<ECollapsePane name="h2" label="hello2">
<p>
This is ECollapse!
</p>
</ECollapsePane>
<ECollapsePane name="h3" label="hello3">
<p>
Third Pane!
</p>
</ECollapsePane>
</ECollapse>
<hr>
<br>
<EBlock>
<p>value:{{JSON.stringify(value2)}}</p>
</EBlock>
<ECollapse v-model="value2" @change="handleChange2">
<ECollapsePane name="p1">
<template slot="label">
<EIcon name="caret-down" class="collapse-icon" />
pane1
</template>
<p>
hello world!
</p>
</ECollapsePane>
<ECollapsePane name="p2">
<template slot="label">
<EIcon name="caret-down" class="collapse-icon" />
pane2
</template>
<p>
This is ECollapse!
</p>
</ECollapsePane>
<ECollapsePane name="p3">
<template slot="label">
<EIcon name="caret-down" class="collapse-icon" />
pane3
</template>
<p>
Third Pane!
</p>
</ECollapsePane>
</ECollapse>
</EBlock>
</template>
<script>
export default {
data() {
return {
value1: ['h1', 'h2', 'h3'],
value2: 'p1',
};
},
methods: {
handleChange(val) {
console.log('change', val);
},
handleChange2(val) {
this.value2 = val;
},
},
};
</script>
<style>
.e-collapse-showcase {
width: 400px;
margin: 10px auto;
}
.e-collapse-showcase .collapse-icon {
transition: transform 0.2s ease-in-out;
}
.e-collapse-showcase .e-collapse > .e-collapse-item-active > .e-collapse-header > .collapse-icon {
transform: rotate(-90deg);
}
</style>
# 手风琴属性
组件默认是允许多个面板同时开打的,通过设置 accordion
属性为 true,允许设置手风琴属性(同时只允许打开单个面板)。
<template>
<EBlock class="e-collapse-showcase">
<EBlock>
<h3>accordion</h3>
</EBlock>
<ECollapse v-model="value1" accordion @click="handleChange">
<ECollapsePane name="p1">
<template slot="label">
<EIcon name="caret-down" class="collapse-icon" />
pane1
</template>
<p>
hello world!
</p>
</ECollapsePane>
<ECollapsePane name="p2">
<template slot="label">
<EIcon name="caret-down" class="collapse-icon" />
pane2
</template>
<p>
This is ECollapse!
</p>
</ECollapsePane>
<ECollapsePane name="p3">
<template slot="label">
<EIcon name="caret-down" class="collapse-icon" />
pane3
</template>
<p>
Third Pane!
</p>
</ECollapsePane>
</ECollapse>
</EBlock>
</template>
<script>
export default {
data() {
return {
value1: ['p1', 'p2', 'p3'],
};
},
methods: {
handleChange(val) {
console.log('change', val);
},
},
};
</script>
<style>
.e-collapse-showcase {
width: 400px;
margin: 20px auto;
}
.e-collapse-showcase .collapse-icon {
transition: transform 0.2s ease-in-out;
}
.e-collapse-showcase .e-collapse > .e-collapse-item-active > .e-collapse-header > .collapse-icon {
transform: rotate(-90deg);
}
</style>
# ECollapse
# Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
accordion | 设置手风琴属性 默认false | Boolean | false | - |
value | 打开的面板 name,支持String、Array | Array / String | false | - |
# Events
Event Name | Description | Parameters |
---|---|---|
change | - | - |
# Slots
Name | Description | Default Slot Content |
---|---|---|
default | - | - |