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

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 错误页面的图片

参考错误：文档未定义

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