Question

我正在尝试在Vue中实现此（https://codepen.io/iprodev/pen/azpWBr）。我该怎么办？

我试图像这样实现工具

<template>
    <div>
        <canvas height="100" id="confetti" width="100"></canvas>
     </div>
</template>

<script>
    export default {
        created () {
            // JS code from codepen
        }
    }
</script>

Answer 1

当然，这是可行的。您需要做一些事情。 Codepen代码段中的所有代码都包装在DOMContentLoaded事件处理程序中，因为您需要访问实际的DOM树。使用Vue，您无法使用此事件，因为Vue应用程序是SPA，并且已加载的事件将在渲染实际视图之前被触发很多。

在这种情况下，您应该使用mounted事件而不是组件的created生命周期事件。 mounted确保组件的DOM实际上已附加到主文档。

此外，您将需要访问实际的HTMLCanvasElement。您的Vue.js $refs构造不是通过ID定位，而是这样的：

<canvas ref="confetti" height="100" width="100"></canvas>

在组件内部，您可以通过以下方式访问DOM元素：

mounted() {
    this.$refs.confetti // Reference to HTMLCanvasElement
}

这是避免在Vue.js中使用全局id属性的方法。现在，剩下的代码就是您想要在组件内部进行组织的方式。您可以将canvas渲染逻辑抽象到一个单独的模块中并传递Canvas元素，否则这些方法可以成为Vue实例的一部分。

第三也是最后。在window对象上分配了几个事件处理程序，例如resize。您必须确保在销毁组件时清理它们。如果您不这样做，那么即使该组件被销毁，这些事件也将继续触发处理程序。为此，beforeDestroy提供了Vue个生命周期事件。清理所有在全球注册的事件处理程序。

如何将此CodePen代码集成到Vue中？

1 个答案: