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>

效果如下：

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