Vue implements multi-column layout drag

<drag-box style="width: 100%; height: 100%;">
   <drag-item>item1</drag-item>
   <drag-item>item2</drag-item>
   <drag-item>item3</drag-item>
   <drag-item>item4</drag-item>
</drag-box>

<template>
    <div ref='dragBox' style='display: flex; width: 100%; height: 100%;'>
        <slot></slot>
    </div>
</template>

<template>
    <div ref="container" class="d-flex" style="min-width: 200px; position: relative;">
        <div style="width: 100%; height: 100%;">
            <slot>Default information</slot>
        </div>
  <!-- Drag bar -->
        <div v-if="resizeShow" class="resize" />
    </div>
</template>
<script>
export default {
  props: {
  // Controls whether the drag bar is displayed, the default is to display resizeShow: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style>
.resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background-color: #d6d6d6;
}
</style>

 // If dragItem does not define width, flex=1
    setDragItemFlex () {
      const dragBox = this.$refs.dragBox
      const childrenLen = dragBox.children.length

      for (let i = 0; i < childrensLen; i++) {
        const node = dragBox.children[i]
        if (!node.style.width) {
          // If width is not defined, flex=1
          node.style.flex = 1
        }
      }
    },

dragControllerDiv () {
  const resize = document.getElementsByClassName('resize') // Drag bar // Loop to add events for each drag bar for (let i = 0; i < resize.length; i++) {
    // Mouse press event resize[i].addEventListener('mousedown', this.onMouseDown)
  }
},

onMouseDown (e) {
  this.resizeBox = e.target
  this.currentBox = this.resizeBox.parentNode // Current box this.rightBox = this.getNextElement(this.currentBox) // Next sibling node of the current box if (!this.rightBox) return
  this.curLen = this.currentBox.clientWidth
  this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // Width of other boxes // Color change reminder this.resizeBox.style.background = '#818181'
  this.startX = e.clientX
  document.addEventListener('mousemove', this.onMousemove)
  document.addEventListener('mouseup', this.onMouseup)
},

// Get the next sibling element compatible function getNextElement (element) {
  if (element.nextElementSibling) {
    return element.nextElementSibling
  } else {
    var next = element.nextSibling // Next sibling node while (next && next.nodeType !== 1) { // It exists and it's not what I want next = next.nextSibling
    }
    return next
  }
}

onMousemove (e) {
  const endX = e.clientX
  const moveLen = endX - this.startX // (endx-startx) = moving distance const CurBoxLen = this.curLen + moveLen // resize[i].left + moving distance = final width of the left area const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // Right width = total width - left width - other box width // When the minimum width is reached, dragging is unavailable if (CurBoxLen <= 200 || rightBoxLen <= 200) return
  this.currentBox.style.width = CurBoxLen + 'px' // Current box width this.resizeBox.style.left = CurBoxLen // Set the width of the left area this.rightBox.style.width = rightBoxLen + 'px'
},

onMouseup () {
 // Color restoration this.resizeBox.style.background = '#d6d6d6'
 document.removeEventListener('mousedown', this.onMouseDown)
 document.removeEventListener('mousemove', this.onMousemove)
},

mounted () {
  this.setDragItemFlex()
  this.dragControllerDiv()
},

<template>
  <div id="app" style="width: 100%; height: 100vh; border:1px solid #ccc;">
    <drag-box style="width: 100%; height: 100%;">
      <drag-item style="width: 20%;">item1</drag-item>
      <drag-item>item2</drag-item>
      <drag-item style="width: 20%;" :resizeShow='false'>item3</drag-item>
    </drag-box>
  </div>
</template>

<script>
import {DragBox, DragItem} from './components/dragLayouter'

export default {
  name: 'App',
  components:
    DragBox,
    DragItem
  }
}
</script>