左右拖拽变大变小的盒子

　　使用：
 1 <resize-box :parameter="parameter" style=" 100%;height: 400px;">
      <template v-slot:resizeLeft>
        <h3>this is left content</h3>
      </template>
      <template v-slot:resizeRight>
        <h3>this is right content</h3>
      </template>
    </resize-box>


 
   组件：
<template>
  <div class="resizeBox" style="position: relative">
    <div
      ref="resizeLeft"
      style="position: absolute;left: 0;top: 0;" :style="parameter.leftBoxStyle">
      <slot name="resizeLeft"></slot>
      <div ref="resizeLine" @mousedown="mousedown"
           style="cursor: col-resize; height:100%; position: absolute;right: 0;top: 0;z-index: 10"
           :style="parameter.resizeLineStyle"></div>
    </div>
    <div ref="resizeRight"
         style="position: relative;left: 0;top: 0;margin-left: 200px" :style="parameter.rightBoxStyle">
      <slot name="resizeRight"></slot>
    </div>
  
  </div>
</template>

<script>
  export default {
    name: "resizeBox",
    props: {
      parameter: {
        type: Object,
        default: () => {
          return {
            leftBoxStyle: {
               "200px",
              height: "100%",
              background: "red",
            },
            resizeLineStyle: {
               "4px",
              background: "RGBA(0,0,0,0.5)"
            },
            rightBoxStyle: {
               "100%",
              height: "100%",
              background: "yellow",
            }
          }
        }
      }
    },
    methods: {
      mousedown(ev) {
        let _this = this;
        //给可视区域添加鼠标的移动事件
        document.onmousemove = function (ev) {
          //获取鼠标移动时的坐标
          let x1 = ev.clientX;
          _this.$refs.resizeLeft.style.width = x1 + 'px';
          _this.$refs.resizeRight.style.marginLeft = x1 + 'px';
        };
        //清除
        document.onmouseup = function (ev) {
          document.onmousemove = null;
        }
      },
    }
  }
</script>

<style scoped>

</style>