Я использую библиотеку typed.js для текстовой анимации на своем домашнем компоненте. Я не могу понять, как вызвать типизированную функцию внутри моего домашнего шаблона.
export default {
name: 'home',
mounted: function () {
document.addEventListener('DOMContentLoaded', function () {
Typed.new('.element', {
strings: ['Lorem ipsum'],
typeSpeed: 10
});
});
}
}
Благодарю!
Вы должны убедиться, что пакет 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.", "& a second sentence."],
typeSpeed: 40
}
new Typed('#typed-element', options)
Или вы можете просто использовать мой vue-typed-js
плагин: https://github.com/Orlandster1998/vue-typed-js
Выполните следующие действия:
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.", "& a second sentence."],
typeSpeed: 40
}
new Typed('#typed-element', options)
}
})
}
И вы должны быть установлены
Я получил эту работу, удалив прослушиватель событий, поскольку монтируется только после того, как элемент загружен в любом случае, и передав шаблон компоненту.
new Vue({
el: '#app',
template: '
<p class="element">test</p>
',
mounted() {
Typed.new('.element', {
strings: ['Lorem ipsum'],
typeSpeed: 10
});
}
})
Вот рабочий пример: https://jsfiddle.net/z11fe07p/2016/