vue3 css实现文字输出带光标显示,文字输出完毕，光标消失的效果

Vue实现过程如下：

<template>
  <div >
    <p ref="dom_element" class="typing" :class="{over_fill: record_input_over}"></p>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
const wrap_time_out = ref()
const inner_time_out = ref()
const record_input_over = ref(false)
const dom_element = ref(null)

onMounted(()=>{
  // 也可以通过这种方式实现而不是通过ref
  // const typingElement = document.getElementsByClassName("typing")[0];
  const typingDelay = 50; // 每个字符打印的时间间隔
  const cursorDelay = 500; // 光标闪烁的时间间隔
  const text = "This is an example of typing animation.";
  function type_my() {
    // 计算出应该打印的文本
    const currentText  = text.slice(0, typingIndex);
    // 更新显示的文本和光标位置
    // typingElement.textContent = currentText;
    dom_element.value.textContent = currentText;

    // 如果还没打印完所有文本，则继续打印
    if (typingIndex < text.length) {
      typingIndex++;
      inner_time_out.value = setTimeout(type_my, typingDelay);
    }else {
      // 清除 定时器
      clearTimeout(wrap_time_out.value)
      clearTimeout(inner_time_out.value)
      // 当输入完成后通过控制样式将光标清除
      record_input_over.value = true
    }
  }
  let typingIndex = 0;

// 等待一段时间，让用户有时间看到光标
  wrap_time_out.value = setTimeout(type_my, cursorDelay);
})

</script>

<style >
html, body{
  height: 100%;
  width: 100%;
  //background-color: pink;
}

.typing {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  font-size: 24px;
  line-height: 1.5;
}
.typing::after{
  content: '|';
  animation: blink 0.8s infinite;
  padding-left: 5px;
}
.over_fill::after{
  content: "";
  animation: none;
  padding-left: 0;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
</style>

效果如下：

输入完成则光标消失，效果如下：