element plus 跳转

转载

mob64ca14048514 2024-10-31 19:28:34

文章标签 element plus 跳转拖拽监听事件鼠标移动 文章分类 机器学习人工智能

思路：

（1）首先通过拖拽物体，找到拖拽过程中进行变更的 dom 的属性值。

（2）获取到当前界面的总高度和总宽度。

（3）获取到需要进行拖拽的物体的高度和宽度，注意，拖拽物体的高度和宽度最好是具体数值而不是百分比，否则在处理四个角的时候会出现错误。

（4）获取物体拖拽是的运动坐标，上下（offsetTop）、左右（offsetLeft）。注意，是拖拽物体的属性，不要找错对象

（5）通过测试得知计算时以拖拽物体的左边界和上边界为准。

（6）判断物体移动到最右边：offsetLeft > （当前界面的总宽度 - 物体的宽度）。

（7）判断物体移动到最左边：offsetLeft 为 0 。

（8）判断物体移动到最下边：offsetTop > （当前界面的总高度 - 物体的高度）。

（9）判断物体移动到最上边：offsetTop 为 0 。

（10）拖拽过程中各种属性的获取方法是通过监听鼠标移动事件实现的。

具体操作如下：

1、新建文件

<el-dialog
    :visible.sync="dialogVisible"
    :closeOnClickModal="false"
    class="NewDialog"
    v-dialog-drag
    title="弹窗拖拽"
  >
  </el-dialog>

2、绑定鼠标（按下，松开）监听事件

//   进入界面时添加鼠标点击和松开的监听事件
  mounted() {
    window.addEventListener("mousedown", this.mouseDown);
    window.addEventListener("mouseup", this.mouseUp);
  },

3、编辑鼠标事件

// 鼠标监听事件
    // 鼠标长按的时候添加 鼠标移动监听事件
    mouseDown() {
      window.addEventListener("mousemove", this.mouseMove);
    },
    //鼠标松开的时候删除鼠标移动监听事件
    mouseUp() {
      window.removeEventListener("mousemove", this.mouseMove);
    },
    // 鼠标移动判断当前弹窗位置，限制住弹窗移动区域
    mouseMove() {
      // RelaHeight : 界面总高度 - 物体高度（以上边界为准）
      // RelaWidth : 界面总宽度 - 物体宽度（以左边界为准）
      // MoveTop : 物体上下移动的坐标变化
      // MoveLeft : 物体左右移动的坐标变化
      // DomSty : 需要修改的dom
      let RelaHeight =
          document.getElementById("app").offsetHeight -
          document.getElementsByClassName("el-dialog")[0].offsetHeight,
        RelaWidth =
          document.getElementById("app").offsetWidth -
          document.getElementsByClassName("el-dialog")[0].offsetWidth,
        MoveTop = document.getElementsByClassName("el-dialog")[0].offsetTop,
        MoveLeft = document.getElementsByClassName("el-dialog")[0].offsetLeft,
        DomSty = document.getElementsByClassName("el-dialog")[0].style;

      this.$VerdictDrag(RelaHeight, RelaWidth, MoveLeft, MoveTop, DomSty);
    },

4、新建 verdictDrag.js

src - > utils -> verdictDrag.js

if (ChangeSty.left) {
      if (Left > relaWidth) {
        ChangeSty.left = relaWidth + "px";
      }
      // 最左边
      if (Left < 0) {
        ChangeSty.left = 0;
      }
      // 最上边
      if (Top < 0) {
        ChangeSty.top = 0;
      }
      // 最下边
      if (Top > relaHeight) {
        ChangeSty.top = relaHeight + "px";
      }
      return ChangeSty;
    }

5、导入到 utils -> index.js

在 src -> utils 中新建 index.js文件，将 verdictDrag.js

element plus 跳转_监听事件

然后在main.js 中将 utils注册一下，这里可以看这篇文章定义全局方法，然后就全局可以使用 VerdictDrag()。

6、移除鼠标监听事件

// 离开界面的时候删除鼠标监听事件
  destroyed() {
    window.removeEventListener("mousedown", this.mouseDown);
    window.removeEventListener("mouseup", this.mouseUp);
  },