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, // 是否循環(huán)
    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('新的文字內(nèi)容').go(); // 更新文字
}
</script>

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

.ti-cursor {
  color: #ff6347; /* 光標顏色 */
  font-weight: bold; /* 光標粗細 */
}