Collapcollap-item: collap-item: collap-item: collap-item: collap-item: collap-item: collap-item: collap-item: collap-item: collap-item: collap-item (The element-UI used in this article is version 1.4.2.)

The first edition

Drag and drop together with the open source vueDraggable component to see the use of the VueDraggable component in detail.

<el-collapse>
  <draggable v-model="arr">
    <el-collapse-item v-for="(item, index) in arr" :key="'key-' + index">
      <template slot="title">
        <span>{{'collapse-item-' + item}}</span>
      </template>
    </el-collapse-item>
  </draggable>
</el-collapse>
Copy the code

Collapse -item: collapse-item: collapse-item

Read the element-ui, collapsion-item source path at [email protected]@element-ui\packages\collapse\ SRC \ collapsion-item.vue

computed: {
  isActive() {
    return this.$parent.activeNames.indexOf(this.name) > -1; }},Copy the code

You can see that the compute property isActive is defined by the parent activeNames, whereas now the component’s hierarchy is like this.

The second edition

If the third library is used in the development of VUE, what should we do if we find a bug? Of course, this is not a bug component, but the extension, the idea is the same.

Create the wecollapSeiten. vue component

<script>
import {
  CollapseItem
} from 'element-ui'
exportDefault {// Inherit CollapseItem extends: CollapseItem, computed: {isActive() {// rewrite herereturn this.$parent.$parent.activeNames.indexOf(this.name) > -1
    }
  }
}
</script>
Copy the code

Through this.Collapse, parent, collapse, collapse

<el-collapse>
  <draggable v-model="arr"> // Use the new component <we-collapse-item v-for="(item, index) in arr" :key="'key-' + index">
      <template slot="title">
        <span>{{'collapse-item-' + item}}</span>
      </template>
    </we-collapse-item>
  </draggable>
</el-collapse>
Copy the code

The work is done. The function is implemented. Wait, is that not generic enough, and nesting a new component between the element-UI components would be confusing to the reader. Not general enough and not readable enough.

The third edition

Create the weCollapse. Vue component

<template> <draggable class="el-collapse"
    :list="list""> 
         Copy the code

This is how it works. Instead of div, use draggable. Reference weCollapse component to embed draggable component with drag-and-drop functionality without affecting the functionality of the original Element-UI collapse component.

<template>
  <div class="el-collapse">
    <slot></slot>
  </div>
</template>
Copy the code

In the end, the code uses the following components, which are the same as those of the original element-UI component, but have very different functions. The benefits are many, of course, this component is not perfect. Does wecollapse support drag and drop? If you don’t support drag and drop, you don’t need to use draggable to create a package. If you don’t support draggable, wecollapse should support it.

<we-collapse :list="arr">
  <we-collapse-item v-for="(item, index) in arr" :key="'key-' + index">
    <template slot="title">
      <span>{{'collapse-item-' + item}}</span>
    </template>
  </we-collapse-item>
</we-collapse>
Copy the code