vue中多组件调用js，实现上下分屏，上下拖动

在vue后台项目中需要实现上下分屏拖动功能，分别放置不同表格进行对比：
下面直接上代码
公共js文件splitScreen.js内容：

class DragController{
  constructor(splitDragObj){
    this.splitDragResize = splitDragObj.splitDragResize;   //  上下分屏拖动 中间的div的id
    this.splitDragTop = splitDragObj.splitDragTop;          //  上下分屏  上半屏的div的id
    this.splitDragDown = splitDragObj.splitDragDown;         //  上下分屏 下半屏的div的id
    this.splitDragBox = splitDragObj.splitDragBox;           //  上下分屏  最外层容器的div的id
  }
  dragControllerDiv(){
    var splitDragResize = document.getElementById(this.splitDragResize);
    var splitDragTop = document.getElementById(this.splitDragTop);
    var splitDragDown = document.getElementById(this.splitDragDown);
    var h  = window.innerHeight;
    var splitDragBox = document.getElementById(this.splitDragBox);
    splitDragBox.style.height = h + "px";
    splitDragResize.onmousedown = function(e){
      var startY = e.clientY;
      splitDragResize.top = splitDragResize.offsetTop;
      document.onmousemove = function(e){
        var endY = e.clientY;
        var moveLen;
        if(splitDragResize.top + (endY - startY)<=160){
          moveLen = 160;
        }else if(splitDragResize.top + (endY - startY) >= splitDragBox.clientHeight- 165){
          moveLen = splitDragBox.clientHeight-165;
        }else{
          moveLen = splitDragResize.top + (endY - startY);
        }
        var maxT = splitDragBox.clientHeight - splitDragResize.offsetHeight;
        if(moveLen<30) moveLen = 30;
        if(moveLen>maxT-30) moveLen = maxT-30;
        splitDragResize.style.top = moveLen;
        splitDragTop.style.height = moveLen + "px";
        splitDragDown.style.height = (splitDragBox.clientHeight - moveLen - 5) + "px";
      }
      document.onmouseup = function(){
        document.onmousemove = null;
        document.onmouseup = null;
        splitDragResize.releaseCapture && splitDragResize.releaseCapture();
      }
      splitDragResize.setCapture && splitDragResize.setCapture();
      return false;
    }
  }
}

export default  DragController;

vue组件使用时：

<template>
  <div id="splitDragBox1" class="splitDragBox">
    <div id="splitDragTop1" class="splitDragTop">
      <el-table
          :data="tableData"
          border
          style="width: 100%;height: auto">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </div>
    <div id="splitDragResize1" class="splitDragResize"></div>
    <div id="splitDragDown1" class="splitDragDown">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import splitScreen from '../../js/splitScreen.js'
  export default {
    name: "splitscreen",
    data(){
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted(){
      let splitScreenObj = new splitScreen({
        splitDragBox:'splitDragBox1',
        splitDragTop:'splitDragTop1',
        splitDragResize:'splitDragResize1',
        splitDragDown:'splitDragDown1'
      });
      splitScreenObj.dragControllerDiv();
    }
  }
</script>
<style>
.splitDragBox{
  width:100%;
  height:100%;
  overflow:hidden;
}
.splitDragTop{
  height:calc(50% - 5px);
  min-height: 150px;
  width:100%;
  float:left;
  overflow: auto;
  position: relative;
}
.splitDragResize{
  position: relative;
  height:5px;
  width:100%;
  cursor: row-resize;
  float:left;
  background: #ccc;
}
.splitDragDown{
  height:50%;
  min-height: 150px;
  width:100%;
  float:left;
  overflow: auto;
  position: relative;
}
</style>

效果图：

在写分屏拖动功能时，遇到了一些坑，在开始时，在splitScreen.js中，只是写了一个function，然后export出去，在一个vue组件中使用时，是可以正常拖动的，但是，当有多个vue组件同时使用时，切换tag标签切换组件时，其中一个组件就会拖动不了了，因为使用了相同的id操作Dom，所以出现bug；然后想到使用class类，每个组件都重新new一个对象，并且传入不同的id，避免id重复，最后完美实现分屏拖动功能