VUE 自定义属性 给文本框增加拖拽放大缩小效果

HTML部分

        在要拖拽的角落添加一个小正方法 用来触发拖拽

        注：要在拖拽最外层加上样式-webkit-user-drag: none 防止整体被拽走

<template>
  <div class="map-box-video" style="-webkit-user-drag: none">
    <div class="drag" v-drag="(this, that)"></div>
  </div>
</template>

JS部分

        自定义指令监听鼠标按下事件 鼠标移动触发document.onmousemove

        具体计算为：(整体宽度+鼠标按下时距屏幕左侧距离-鼠标目前距屏幕左侧距离) //移动后的宽度（高度同理）

        计算成功后通过JQuery给要放大缩小的地方增加样式

        鼠标抬起，去除鼠标移动事件

<script>

export default {
  name: "mapToVideo",
  data() {
    return {
      that: this,
    };
  },
  directives: {
    drag: {
      bind: function (el, binding) {
        /* 拖动 */
        el.onmousedown = (e) => {
          let _mapDrag = $('#mapDrag' + binding.value.that.mapIndex);
          e.stopPropagation();
          const w = _mapDrag.outerWidth();
          document.onmousemove = (mousemoveEvent) => {
            let proportion = ((w + e.clientX - mousemoveEvent.clientX).toFixed(2);
            $('.map-box-video').css({'width': proportion + 'px', 'height': proportion + 'px'});
          }
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  },
}
</script>

CSS部分

<style lang="scss" scoped>
.map-box-video {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  width: 100px;
  height: 100px;
  background: #FFF;

  .drag{
    width: 10px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    pointer-events: auto;
    background: #000;
    &:hover{
      cursor: se-resize;
    }
  }
}
</style>