element-ui Collapse 折叠面板源码分析整理笔记（十）

Collapse 折叠面板源码：

collapse.vue

<template>
    <!--一组折叠面板最外层包裹div-->
  <div class="el-collapse" role="tablist" aria-multiselectable="true">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'ElCollapse',

    componentName: 'ElCollapse',

    props: {
      accordion: Boolean, //是否手风琴模式
      value: {  //当前激活的面板(如果是手风琴模式，绑定值类型需要为string，否则为array)
        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数组的副本
        activeNames = [].concat(activeNames);
        //如果是手风琴模式返回activeNames[0]，不是则返回整个数组
        let value = this.accordion ? activeNames[0] : activeNames;
        this.activeNames = activeNames;
        //触发父组件的input方法
        this.$emit('input', value);
        //触发父组件的change方法
        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数组中删除
            activeNames.splice(index, 1);
          } else {  //如果该面板还未是激活状态，就将其push进activeNames数组中
            activeNames.push(item.name);
          }
          this.setActiveNames(activeNames);
        }
      }
    },

    created() {
      this.$on('item-click', this.handleItemClick);
    }
  };
</script><template>