12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <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>
|