Vue3使用TypeIt实现文字打字机效果的代码示例

npm install typeit

yarn add typeit

<template>
  <div>
    <!-- 绑定一个 ref 用于 TypeIt 初始化 -->
    <h1 ref="typeitElement"></h1>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TypeIt from 'typeit';

// 获取 DOM 元素的引用
const typeitElement = ref(null);

// 在组件挂载后初始化 TypeIt
onMounted(() => {
  new TypeIt(typeitElement.value, {
    strings: ['欢迎来到我的博客！', '这里是 Vue 3 和 TypeIt 的示例。'], // 要显示的文字
    speed: 100, // 打字速度（单位：毫秒）
    loop: true, // 是否循环
    breakLines: false, // 是否允许换行
  }).go(); // 启动动画
});
</script>

<style scoped>
h1 {
  font-size: 2.5rem;
  color: #333;
}
</style>

<template>
  <div>
    <h1 ref="typeitElement"></h1>
    <button @click="updateText">更新文字</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TypeIt from 'typeit';

const typeitElement = ref(null);
let typeitInstance = null;

onMounted(() => {
  typeitInstance = new TypeIt(typeitElement.value, {
    strings: ['江城开朗的豌豆'],
    speed: 100,
    loop: true,
  }).go();
});

function updateText() {
  typeitInstance.reset(); // 重置动画
  typeitInstance.type('新的文字内容').go(); // 更新文字
}
</script>

new TypeIt(typeitElement.value, {
  strings: ['江城开朗的豌豆', '江城开朗的豌豆', '江城开朗的豌豆'],
  speed: 100,
  breakLines: true,
  loop: true,
}).go();

.ti-cursor {
  color: #ff6347; /* 光标颜色 */
  font-weight: bold; /* 光标粗细 */
}