Вызовите функцию typed.js внутри компонента Vue

Question

Вызовите функцию typed.js внутри компонента Vue

1

Я использую библиотеку typed.js для текстовой анимации на своем домашнем компоненте. Я не могу понять, как вызвать типизированную функцию внутри моего домашнего шаблона.

export default {
 name: 'home',
 mounted: function () {
  document.addEventListener('DOMContentLoaded', function () {
  Typed.new('.element', {
      strings: ['Lorem ipsum'],
      typeSpeed: 10
     });
   });
  }
}

Благодарю!

mmiloshev 31 май 2017, в 17:19

Источник

Теги:

javascript

vue.js

3 ответа

Ещё вопросы

Orlandster · Answer 1 · 2018-05-17T05-11-00.000Z

Вы должны убедиться, что пакет typed.js был установлен с yarn или npm. Обязательно установите его непосредственно из GitHub, так как пакет npm устарел.

npm install https://github.com/mattboldt/typed.js.git --save

OR

yarn add https://github.com/mattboldt/typed.js.git

Теперь вы можете импортировать пакет typed.js следующим образом:

import Typed from 'typed.js'

Наконец, вы можете создать свой typed экземпляр:

const options = {
  strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
  typeSpeed: 40
}
new Typed('#typed-element', options)

Или вы можете просто использовать мой vue-typed-js плагин: https://github.com/Orlandster1998/vue-typed-js

DaniG2k · Answer 2 · 2018-03-29T13-56-00.000Z

Выполните следующие действия:

yarn add typed.js

затем добавьте эти строки в файл, в который будет настроен компонент Vue:

import Typed from 'typed.js';

if(document.getElementById('typed-element') !== null) {
const typed = new Vue({
  el: '#typed-element',
  mounted() {
    var options = {
      strings: ["<i>First</i> sentence.", "&amp; a second sentence."],
      typeSpeed: 40
    }
    new Typed('#typed-element', options)
  }
})

}

И вы должны быть установлены

MauroPerez · Answer 3 · 2017-05-31T14-00-00.000Z

Я получил эту работу, удалив прослушиватель событий, поскольку монтируется только после того, как элемент загружен в любом случае, и передав шаблон компоненту.

new Vue({
  el: '#app',
  template: '
    <p class="element">test</p>
  ',
  mounted() {
    Typed.new('.element', {
      strings: ['Lorem ipsum'],
      typeSpeed: 10
    });
  }
})

Вот рабочий пример: https://jsfiddle.net/z11fe07p/2016/

Спасибо Мауро, это выглядит великолепно! Но у меня есть одна проблема с импортом Typed.js в компоненте. Я использую шаблон vue-webpack, поэтому, если я включу typed.js в свой index.html, я получаю сообщение об ошибке, так как typed не определен. Я пытаюсь импортировать typed.js в шаблоне.
Я понимаю проблему, с которой вы столкнулись. Похоже, что есть открытый билет по этому поводу на typed.js github. Проверьте это, это может иметь обходной путь. github.com/mattboldt/typed.js/issues/121