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

Question

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

这里是工作代码的代码笔链接： https://codepen.io/dropinks/pen/MrzPXB

我正在尝试在 vue.js 中做同样的事情。但我得到一个 ReferenceError '文档未定义'

这是我所做的一个实现：

完整代码：

        <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 时出现语法错误
• 您的data 中没有return 对象（这是一个非常重要的对象！）
• 粘贴的代码语法不正确

说了这么多，这里有一个来自 CodeSandbox 的有效解决方案： https://codesandbox.io/s/zen-panini-n6j8c?file=/pages/index.vue