<template> <div class="el-collapse" role="tablist" aria-multiselectable="true"> <slot></slot> </div> </template> <script> export default { name: 'ElCollapse', componentName: 'ElCollapse', props: { accordion: Boolean, value: { type: [Array, String, Number], default() { return []; } } }, data() { return { activeNames: [].concat(this.value) }; }, provide() { return { collapse: this }; }, watch: { value(value) { this.activeNames = [].concat(value); } }, methods: { setActiveNames(activeNames) { activeNames = [].concat(activeNames); let value = this.accordion ? activeNames[0] : activeNames; this.activeNames = activeNames; this.$emit('input', value); this.$emit('change', value); }, handleItemClick(item) { if (this.accordion) { this.setActiveNames( (this.activeNames[0] || this.activeNames[0] === 0) && this.activeNames[0] === item.name ? '' : item.name ); } else { let activeNames = this.activeNames.slice(0); let index = activeNames.indexOf(item.name); if (index > -1) { activeNames.splice(index, 1); } else { activeNames.push(item.name); } this.setActiveNames(activeNames); } } }, created() { this.$on('item-click', this.handleItemClick); } }; </script>