mirror of https://github.com/ElemeFE/element
103 lines
2.3 KiB
Vue
103 lines
2.3 KiB
Vue
<template>
|
|
<div class="el-collapse-item" :class="{'is-active': isActive}">
|
|
<div
|
|
role="tab"
|
|
:aria-expanded="isActive"
|
|
:aria-controls="`el-collapse-content-${id}`"
|
|
:aria-describedby ="`el-collapse-content-${id}`"
|
|
>
|
|
<div
|
|
class="el-collapse-item__header"
|
|
@click="handleHeaderClick"
|
|
role="button"
|
|
:id="`el-collapse-head-${id}`"
|
|
tabindex="0"
|
|
@keyup.space.enter.stop="handleEnterClick"
|
|
:class="{'focusing': focusing}"
|
|
@focus="focusing = true"
|
|
@blur="focusing = false"
|
|
>
|
|
<i class="el-collapse-item__arrow el-icon-arrow-right"></i>
|
|
<slot name="title">{{title}}</slot>
|
|
</div>
|
|
</div>
|
|
<el-collapse-transition>
|
|
<div
|
|
class="el-collapse-item__wrap"
|
|
v-show="isActive"
|
|
role="tabpanel"
|
|
:aria-hidden="!isActive"
|
|
:aria-labelledby="`el-collapse-head-${id}`"
|
|
:id="`el-collapse-content-${id}`"
|
|
>
|
|
<div class="el-collapse-item__content">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
|
|
import Emitter from 'element-ui/src/mixins/emitter';
|
|
import { generateId } from 'element-ui/src/utils/util';
|
|
|
|
export default {
|
|
name: 'ElCollapseItem',
|
|
|
|
componentName: 'ElCollapseItem',
|
|
|
|
mixins: [Emitter],
|
|
|
|
components: { ElCollapseTransition },
|
|
|
|
data() {
|
|
return {
|
|
contentWrapStyle: {
|
|
height: 'auto',
|
|
display: 'block'
|
|
},
|
|
contentHeight: 0,
|
|
focusing: false
|
|
};
|
|
},
|
|
|
|
props: {
|
|
title: String,
|
|
name: {
|
|
type: [String, Number],
|
|
default() {
|
|
return this._uid;
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
isActive() {
|
|
return this.$parent.activeNames.indexOf(this.name) > -1;
|
|
},
|
|
id() {
|
|
return generateId();
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
'isActive'(value) {
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleHeaderClick() {
|
|
this.dispatch('ElCollapse', 'item-click', this);
|
|
this.focusing = false;
|
|
},
|
|
handleEnterClick() {
|
|
this.dispatch('ElCollapse', 'item-click', this);
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
}
|
|
};
|
|
</script>
|