Как запустить анимацию игрока лотти при нажатии кнопки в vue.js

#vue.js #lottie

Вопрос:

У меня есть файл json анимации Лотти под названием поздравления.json. Я включил путь к файлу внутри src в тег lottie player следующим образом:

 lt;lottie-player  class="justify-content-center"  src="../../../congratulations.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px"  loop  controls  autoplay gt;lt;/lottie-playergt;

Я хочу запустить эту анимацию игрока лотти, нажав на кнопку в vue.js.

Я закодировал так:

 lt;div class="justify-content-center"gt;  lt;button v-on:click="cong" class="btn"gt;  animation  lt;/buttongt; lt;/divgt;  methods: {  cong() {  lt;lottie-player  class="justify-content-center"  src="../../../congratulations.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px"  loop  controls  autoplay  gt;lt;/lottie-playergt;;  }, }

Но это не работает. Нужно ли мне устанавливать какие-либо дополнения/расширения или мой код неверен ?

1. попробуйте добавить telda ~ перед путем, чтобы webpack понял, что это путь

2. Пожалуйста, будьте добры, покажите мне, куда включить телду. Мне это не совсем ясно.

3. nvm, посмотрел его, и, похоже, он работает только с CSS, это было бы src="~../../../congratulations.json"

Ответ №1:

Это не похоже на правильный способ делать то, что вы хотите в Vue. Я предполагаю, что вы хотите показать игрока лотти при нажатии кнопки. Если это так, то вот один из способов сделать это:

У вас может быть логическая переменная в data компоненте, например showPlayer , которая изначально будет установлена в false значение . Затем вы можете удалить cong метод и получить что-то вроде этого:

 lt;div class="justify-content-center"gt;  lt;button v-on:click="showPlayer = true" class="btn"gt;  animation  lt;/buttongt;  lt;lottie-player  v-if="showPlayer"  class="justify-content-center"  src="**../../../congratulations.json**"  background="transparent"  speed="1"  style="width: 300px; height: 300px"  loop  controls  autoplay  gt;lt;/lottie-playergt; lt;/divgt;

Конечно, это всего лишь код шаблона. Вам нужно иметь логическую переменную в компоненте data . Атрибуты тега lottie-игрока также должны быть правильными, чтобы это работало.

1. Здесь showPlayer-это переменная. Я не являюсь функцией. Итак, почему вы включили его в v-on:нажмите=» »

2. Это действительно переменная величина. Тем не менее, вы можете написать однострочные выражения JS внутри v-on (и другие директивы Vue, такие как v-bind и v-if), как мы, поэтому я пишу выражение, чтобы установить showPlayer в значение true внутри v-on (это простая вещь, но вы можете заключить его в метод, если действительно хотите).

3. Сработало…….. наконец-то