Vue3实现打字机效果

<template>
  <div class="container">
    <!-- 光标 -->
    <div class="cursor" :class="{ 'cursor-active': classComputed }" :style="styleComputed"></div>
    <div class="text">
      {{ newText }}
      <!-- 光标跟随span元素 -->
      <span ref="getSpanElementNode"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, reactive, computed } from 'vue'
  //文本数据
  const text = `不必说碧绿的菜畦，光滑的石井栏，高大的皂荚树，紫红的桑椹;
  也不必说鸣蝉在树叶里长吟，肥胖的黄蜂伏在菜花上，轻捷的叫天子(云雀)忽然从草间直窜向云霄里去了。
  单是周围的短短的泥墙根一带，就有无限趣味。油蛉在这里低唱，蟋蟀们在这里弹琴。
  翻开断砖来，有时会遇见蜈蚣;
  还有斑蝥，倘若用手指按住它的脊梁，便会拍的一声，从后窍喷出一阵烟雾。
  何首乌藤和木莲藤缠络着，木莲有莲房一般的果实，何首乌有拥肿的根。
  有人说，何首乌根是有象人形的，吃了便可以成仙，我于是常常拔它起来，
  牵连不断地拔起来，也曾因此弄坏了泥墙，却从来没有见过有一块根象人样。
  如果不怕刺，还可以摘到覆盆子，象小珊瑚珠攒成的小球，又酸又甜，色味都比桑椹要好得远。`
  //展示数据
  const newText = ref<string>('')
  //获取span元素
  const getSpanElementNode = ref<any>(null)
  //光标位置数据类型
  type cursorPositionDataType = {
    x: number
    y: number
  }
  //光标位置
  const cursorPosition = reactive<cursorPositionDataType>({
    x: 0,
    y: 0,
  })
  //class样式是否添加计算
  const classComputed = computed((): boolean => {
    return newText.value.length === text.length
  })
  //光标位置样式计算
  const styleComputed = computed((): any => {
    return { transform: `translate(${cursorPosition.x}px,${cursorPosition.y}px)` }
  })
  onMounted(() => {
    fn(140)
  })
  //打字机
  const fn = (time: number) => {
    //计数器
    let counter: number = 0
    //定时器
    let timer: any
    //打字机效果函数
    const typeWriter = () => {
      //计数器大于字符串长度视为结束
      if (counter > text.length - 1) {
        //清除定时器
        clearInterval(timer)
        return
      }
      //拼接字符串
      newText.value += text[counter]
      //计数器+1
      counter++
      //调用获取元素位置函数
      getElementLocation()
    }
    //定时执行函数
    timer = setInterval(typeWriter, time)
  }
  //获取元素位置作为光标移动的位置
  const getElementLocation = () => {
    if (getSpanElementNode.value !== null) {
      cursorPosition.x = getSpanElementNode.value.offsetLeft + 20
      cursorPosition.y = getSpanElementNode.value.offsetTop + 1
    }
  }
</script>

<style scoped lang="scss">
  //光标闪烁动画
  @keyframes flicker {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .container {
    position: relative;
    overflow: hidden;
    width: 1000px;
    height: 500px;
    margin: 20px auto;
    background-color: #fff;

    // 光标
    .cursor {
      position: absolute;
      width: 2px;
      height: 20px;
      background-color: #000;
    }

    // 光标闪烁样式
    .cursor-active {
      animation: flicker 1s infinite;
    }

    .text {
      margin: 40px;
    }
  }
</style>