<template> <div class="el-collapse-item" :class="{'is-active': isActive, 'is-disabled': disabled }"> <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="disabled ? undefined : 0" @keyup.space.enter.stop="handleEnterClick" :class="{ 'focusing': focusing, 'is-active': isActive }" @focus="handleFocus" @blur="focusing = false" > <slot name="title">{{title}}</slot> <i class="el-collapse-item__arrow el-icon-arrow-right" :class="{'is-active': isActive}"> </i> </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, isClick: false, id: generateId() }; }, inject: ['collapse'], props: { title: String, name: { type: [String, Number], default() { return this._uid; } }, disabled: Boolean }, computed: { isActive() { return this.collapse.activeNames.indexOf(this.name) > -1; } }, methods: { handleFocus() { setTimeout(() => { if (!this.isClick) { this.focusing = true; } else { this.isClick = false; } }, 50); }, handleHeaderClick() { if (this.disabled) return; this.dispatch('ElCollapse', 'item-click', this); this.focusing = false; this.isClick = true; }, handleEnterClick() { this.dispatch('ElCollapse', 'item-click', this); } } }; </script>