vue实现多栏布局拖拽实例

外层大盒子处理分发的拖拽事件，里层的盒子负责展示各个Item的内容；

实现方式；1. 在component里面新建dragBox.vue 来存放外层的盒子，通过插槽实现子元素的嵌套； 2. 在component里面新建dragItem.vue   通过插槽实现drag-item内部元素的嵌套; 3.新建list.vue 来引入在component中新建的组件，进行调用，同时处理需要拖动的一些逻辑；

list.vue中的内容代码；

<template>
  <div style="width: 100%; height:100%; border:1px solid #ccc;">
    <drag-box ref="dragBox" style="width: 100%; height: 100%;">
      <drag-item :style="{'width': !dragHide ? '100%' : '20%'}"> <!------用来设置一开始是100%的宽度，详情出现时第一个drag-item 的内容呈现20%------->
        <div @click="dragChange">列表内容呈现</div>  <!-----可以将需要的内容直接写在这里，也可以设置引用组件进行使用------->
      </drag-item>
      <drag-item v-if="dragHide" :resize-show="false">详情内容呈现</drag-item> 
    </drag-box>
  </div>
</template>
<script>
import dragBox from './component/dragBox'
import dragItem from './component/dragItem'
export default {
  components: { dragBox, dragItem },
  data() {
    return {
      defaultFlex: true,
      resizeBox: null,
      currentBox: null,
      rightBox: null,
      curLen: 0,
      otherBoxWidth: 0,
      startX: 0,
      dragHide: false
    }
  },
  mounted() {
    this.setDragItemFlex()
    this.dragControllerDiv()
  },
  methods: {
    dragChange() {
      this.dragHide = true
    },
    onMouseDown(e) {
      this.resizeBox = e.target
      this.currentBox = this.resizeBox.parentNode// 当前盒子
      this.rightBox = this.getNextElement(this.currentBox)// 当前盒子的下个兄弟节点
      if (!this.rightBox) return
      this.curLen = this.currentBox.clientWidth
      this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 其他盒子的宽度
      // 颜色改变提醒
      this.resizeBox.style.background = '#818181'
      this.startX = e.clientX
      document.addEventListener('mousemove', this.onMousemove)
      document.addEventListener('mouseup', this.onMouseup)
    },
    onMouseup() {
      // 颜色恢复
      this.resizeBox.style.background = '#d6d6d6'
      document.removeEventListener('mousedown', this.onMouseDown)
      document.removeEventListener('mousemove', this.onMousemove)
    },
    onMousemove(e) {
      const endX = e.clientX
      const moveLen = endX - this.startX // （endx-startx）= 移动的距离
      const CurBoxLen = this.curLen + moveLen // resize[i].left+移动的距离=左边区域最后的宽度
      const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右侧宽度=总宽度-左侧宽度-其它盒子宽度
      // 当最小宽度时，无法继续拖动
      if (CurBoxLen <= 200 || rightBoxLen <= 200) return
      this.currentBox.style.width = CurBoxLen + 'px'// 当前盒子的宽度
      this.resizeBox.style.left = CurBoxLen // 设置左侧区域的宽度
      this.rightBox.style.width = rightBoxLen + 'px'
    },

    // 获取下一个兄弟元素的兼容函数
    getNextElement(element) {
      if (element.nextElementSibling) {
        return element.nextElementSibling
      } else {
        var next = element.nextSibling// 下一个兄弟节点
        while (next && next.nodeType !== 1) { // 有 并且 不是我想要的
          next = next.nextSibling
        }
        return next
      }
    },
    dragControllerDiv() {
      const resize = document.getElementsByClassName('resize') // 拖拽条
      // 循环为每个拖拽条添加事件
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].addEventListener('mousedown', this.onMouseDown)
      }
    },
    // 如果dragItem 没有定义宽度，则flex=1
    setDragItemFlex() {
      const dragBox = this.$refs.dragBox
      const childsLen = dragBox.$children.length
      for (let i = 0; i < childsLen; i++) {
        const node = dragBox.$children[i]
        if (!node.$el.style.width) {
          // 如果没有定义宽度，则flex=1
          node.$el.style.flex = 1
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

　dragBox.vue

<template>
  <div style="display: flex; width: 100%; height: 100%;">
    <slot />
  </div>
</template>
<script>
export default {
  name: 'DragBox',
  data() {
    return {}
  },
  methods: {}
}
</script>
<style lang="scss" scoped>

</style>

　dragItem.vue 　

　

<template>
  <!-- <div ref="container" class="d-flex" style="min-width: 200px; position: relative;"> -->
  <div ref="container" class="d-flex" style="position: relative;">
    <div style="width: 100%; height: 100%;">
      <slot />
    </div>
    <!-- 拖拽条 -->
    <div v-if="resizeShow" class="resize" />
  </div>
</template>
<script>
export default {
  name: 'DragItem',
  props: {
  // 控制拖拽条的是否显示，默认显示
    resizeShow: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style>
.resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    cursor: col-resize;
    background-color: #f2f2f2;
}
</style>