Question

我在我的家庭组件上使用typed.js库进行文本动画。我无法弄清楚如何在我的主页模板中调用类型化函数。

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

谢谢！

Answer 1

我通过删除事件监听器来实现这一点，因为挂载只在元素加载后运行，并通过将模板传递给组件。

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

以下是一个工作示例：https://jsfiddle.net/z11fe07p/2016/

Answer 2

执行以下操作：

Job

然后将这些行添加到您将设置Vue组件的文件中：

yarn add typed.js

}

你应该设置

Answer 3

您必须确保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

Answer 4

步骤1：通过键入命令从npm安装类型化js

npm install typed.js --save

在main.js文件中

import Typed from 'typed.js'

步骤2：要将Typed方法全局修复为所有组件

global.Typed = Typed;

所以结果看起来像这样，

main.js：

import Typed from 'typed.js'
global.Typed = Typed

对我有用。谢谢！

在Vue组件内调用typed.js函数

4 个答案: