Как интегрировать этот код CodePen в Vue?
Я пытаюсь реализовать это (https://codepen.io/iprodev/pen/azpWBr) в Vue. Как я могу это сделать?
Я попытался реализовать это так
<template>
<div>
<canvas height = "100" id = "confetti" width = "100"></canvas>
</div>
</template>
<script>
export default {
created () {
// JS code from codepen
}
}
</script>
У меня уже есть веб-приложение, построенное на Vue. Я хочу реализовать это в этом приложении.
Что делает код CodePen и какие проблемы конкретно возникают при интеграции?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Конечно, это выполнимо. Вам нужно сделать несколько вещей. Весь код во фрагменте кода Codepen заключен в обработчик событий DOMContentLoaded, поскольку вам нужен доступ к фактическому дереву DOM. С Vue вы не можете использовать это событие, поскольку приложения Vue являются SPA, и загруженное событие будет запущено задолго до того, как ваше фактическое представление будет отрисовано.
В этом случае следует использовать событие mounted вместо события жизненного цикла компонента created. mounted гарантирует, что DOM компонента действительно прикреплена к основному документу.
Далее вам понадобится доступ к самому HTMLCanvasElement. Вместо того, чтобы искать его по идентификатору, ваша конструкция Vue.js $refs выглядит следующим образом:
<canvas ref = "confetti" height = "100" width = "100"></canvas>
Затем внутри вашего компонента вы можете получить доступ к элементу DOM как:
mounted() {
this.$refs.confetti // Reference to HTMLCanvasElement
}
Вот как вы избегаете использования глобальных атрибутов id с Vue.js. Теперь остальная часть кода - это то, как вы хотите организовать его внутри своего компонента. Вы можете выделить логику рендеринга холста в отдельный модуль и передать элемент Canvas, иначе методы могут стать частью экземпляра Vue.
Третий и последний. Есть несколько обработчиков событий, назначенных объекту window, например resize. Вы должны убедиться, что очищаете их, когда компонент разрушается. Если вы этого не сделаете, то даже если компонент будет уничтожен, эти события будут продолжать запускать обработчики. Для этого используйте событие жизненного цикла beforeDestroy, предоставленное Vue. Очистите все ваши глобально зарегистрированные обработчики событий.
Вот демонстрация, реализующая предложения @Harshal: кодовый ключ
Есть ли способ остановить анимацию? Может, изящно? Я хочу нажать кнопку, и конфетти перестанет падать и исчезнет с экрана.
здесь используется только холст, я не вижу необходимости в
vue