vue项目，自定义指令实现鼠标拖拽更改窗口大小

vue自定义指令

dom元素部分

<template>
	<div class="dragModalWrap" :style="{ width: width + 'px',height: height + 'px', }">
		<div class="tuolaBtn" v-drag="{ set: changeWH }" :style="{top:tuoTop +'px',left:tuoLeft + 'px'}"></div>
	</div>
</template>

在这里，通过v-drag="{ set: changeWH }"，给dom元素设置了一个自定义指令，期望通过这个dom元素的拖拉，更改了其top和left偏移距离，来改变其父元素盒子的大小。其中{ set: changeWH }内的 changeWH ，是在methods内定义的一个函数，用来实现改变父元素盒子的大小。

data部分

data() {
    return {
      width: 300,
      height: 300,
      toBig:true,
      tuoTop:300,
      tuoLeft:280
    };
  },

自定义指令部分

directives: {
    drag: {
      // 指令的定义
      inserted: function (el, bindings) {
        // el.drag();
        // console.log(el);
        //获取元素 
        // var dv = document.getElementById("dv");
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let isDown = false;
        //鼠标按下事件
        el.onmousedown = function (e) {
          //获取x坐标和y坐标
          x = e.clientX;
          y = e.clientY;
          // console.log("获取x坐标和y坐标", e);
          //获取左部和顶部的偏移量
          l = el.offsetLeft;
          t = el.offsetTop;
          //开关打开
          isDown = true;
          //设置样式
          el.style.cursor = "move";
          // console.log("this.width", this.width);
        };
        //鼠标移动
        window.onmousemove = function (e) {
          if (isDown == false) {
            return;
          }
          //获取x和y
          let nx = e.clientX;
          let ny = e.clientY;
          // console.log('获取x和y',nx,ny);
          //计算移动后的左偏移量和顶部的偏移量
          let nl = nx - (x - l);
          let nt = ny - (y - t);
          // console.log("左偏移nl", nl);
          // console.log("顶偏移nt", nt);
          let width = nl + 20;
          let height = nt;
          el.style.left =(nl) + "px";
          el.style.top = (nt) + "px";
          bindings.value.set(width, height);
        };
        //鼠标抬起事件
        el.onmouseup = function () {
          //开关关闭
          isDown = false;
        };
      },
    },
  },

methods部分

changeWH(w, h) {
      // console.log("w,h", w, h);
      this.width = w;
      this.height = h;
      // this.toBig = (w>=750 && h>=550) ? false :true
    },