实现侧边栏可拖拽

效果如下：

<template>
<!-- 数据分析 -->
  <div class="analycis">
   数据分析
   <div class="left"></div>
   <div class="split"></div>
   <div class="right"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    let left = document.getElementsByClassName('left')[0]
    let split = document.getElementsByClassName('split')[0]
    let right = document.getElementsByClassName('right')[0]
    this.initWidth(left, split, right)
  },
  methods: {
    initWidth (left, split, right) {
      let blleft = true
      split.onmousedown = function (evt) {
        let e = evt || event
        let dx = e.clientX
        let dw = left.offsetWidth
        // 左边navbar的宽度
        let navWidth = dx - dw
        let disright = left.offsetLeft + left.offsetWidth
        if (e.clientX < left.offsetLeft + 3) {
          blleft = false
        }
        document.onmousemove = function (evt) {
          let e = evt || event
          if (!blleft) {
            left.style.width = dw - (e.clientX - dx) + 'px'
            left.style.left = disright - left.offsetWidth + 'px' // disright表示盒子右边框距离左边的距离，disright-当前的盒子宽度，就是当前盒子距离左边的距离
            split.style.left = dw - (e.clientX - dx) + 'px' // disright表示盒子右边框距离左边的距
            right.style.marginLeft =
          disright - left.offsetWidth - 157 + 'px'
            if (left.offsetWidth <= 10) {
              left.style.width = '10px'
              left.style.left = disright - left.offsetWidth + 'px' // 防止抖动
              right.style.marginLeft =
            disright - left.offsetWidth + 'px'
            }
          } else {
            left.style.width = e.clientX - navWidth - 3 + 'px'
            right.style.marginLeft = e.clientX - navWidth + 'px'
            split.style.left = e.clientX - navWidth - 3 + 'px'
            if (left.offsetWidth <= 10) {
              left.style.width = '10px'
            }
          }
        }
        document.onmouseup = function () {
          document.onmousedown = null
          document.onmousemove = null
        }
        return false
      }
    }
  }
}
</script>
<style lang="less">
.analycis{
  width: 100%;
  height: 100%;
  .left{
    width: 200px;
    height: calc(~"100% - 74px");
    background: burlywood;
    position: absolute;
    left: 0;
    top: 74px;
    bottom: 0;
  }
  .split{
    width: 3px;
    height: calc(~"100% - 74px");
    background: #ccc;
    position: absolute;
    left: 200px;
    top: 74px;
    bottom: 0;
    cursor: e-resize;
  }
  .right{
    width: calc(~"100% - 203px");
    height: calc(~"100% - 74px");
    background: cadetblue;
    position: absolute;
    top: 74px;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 203px;
  }
}
</style>