我正在尝试为 Vue.js 中的碰撞检测重新制作 javascript 代码

Question

简介我是 Vue.js 的新手，我目前正在研究我的大学项目，该项目需要在 Vue.js 中进行碰撞检测。

下面是工作代码的码笔link： https://codepen.io/dropinks/pen/MrzPXB

我正在尝试在 vue.js 中做同样的事情。但是我收到了 ReferenceError 'document is not defined'

这是我所做的一个实现：

模板代码：

        <div class="container">
            <div class="rectangle-1" id="rect">Hover Me </div>
            <div class="rectangle-2" id="dragMe">Drag Me</div>
          </div>

脚本：

<script>
export default {
data:{
  dragMe: '',
  rect:''
},

created:function(){
  this.myFunction()
},
methods:{
myFunction:function(){
  rect = document.getElementById("rect");
  dragMe = document.getElementById("dragMe");
  
  initDrag({
    element: dragMe,
    drag: function(){isCollapsed(dragMe, rect);},
  });
},

isCollapsed: function(dragMe, rect){
  var object_1 = dragMe.getBoundingClientRect();
  var object_2 = rect.getBoundingClientRect();
  
  if (object_1.left < object_2.left + object_2.width  && object_1.left + object_1.width  > object_2.left &&
        object_1.top < object_2.top + object_2.height && object_1.top + object_1.height > object_2.top) {
    rect.classList.add("collide");
  }
  else{
    rect.classList.remove("collide");
  }
},



initDrag: function(options){
  var element = options.element;
  var mousedown, mouseup, mousemove,
      dragStart, initX, initY,
      offsetLeft, offsetTop;
  
  function mouseMove(ev){
    if(dragStart){
      var newX = offsetLeft + (ev.pageX - initX);
      var newY = offsetTop + (ev.pageY - initY);

      element.style.top = newY+"px";
      element.style.left = newX+"px";
      
      options.drag.call();
    }
  }
  
  function mouseUp(ev){
    dragStart = false;
    document.removeEventListener("mousemove", mouseMove, false);
    document.removeEventListener("mouseup", mouseUp, false);
    
    options.stop.call();
  }
  
  function mouseDown(ev){
    initX = ev.pageX;
    initY = ev.pageY;
    dragStart = true;
    offsetLeft = element.offsetLeft;
    offsetTop = element.offsetTop;
    document.addEventListener("mousemove", function(ev){mouseMove(ev)}, false);
    document.addEventListener("mouseup", function(ev){mouseUp(ev)}, false);
    
    options.start.call();
  }
  
  element.addEventListener("mousedown", function(ev){mouseDown(ev)}, false);
}
}
}
</script>

这是来自 nuxt.js

的错误页面图片

Reference error: document not defined

Answer 1

你得到的错误是因为 Nuxt 有一个服务器端上下文，它试图为你预取数据并预渲染它。

https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

您需要做的是确保您运行该代码仅在客户端。我知道这听起来令人困惑，但请记住 Nuxt 是一个 通用框架 ，它会尝试在后端呈现您的网站以改进您的 SEO 并产生初始标记。这就是您收到错误的原因。

您可以做的是将使用文档的代码包装在 if 中，以确保您只是运行客户端

created:function(){
  if (process.client) {
      this.myFunction()
  }
},

您面临的额外复杂性来自 Nuxt，而不是 Vue.JS :)

编辑我注意到您的问题代码中有很多错误，所以如果您能更正它们，那就太好了！我已经继续创建了一个示例 CodeSanbox，其中包含一个可以解决您的问题的有效解决方案，您可以查看。我注意到的问题是：

您忘记访问 this.dragMe 和 this.rect
你没有 return 你的 data 对象（这是一个非常重要的对象！）
粘贴的代码语法不正确

综上所述，这是 CodeSandbox 的一个有效解决方案： https://codesandbox.io/s/zen-panini-n6j8c?file=/pages/index.vue

我正在尝试为 Vue.js 中的碰撞检测重新制作 javascript 代码

I'm trying remake a javascript code for collision detection in Vue.js

javascript

collision-detection

vue.js

nuxt.js