当前位置：首页 > news >正文

vue3实现打字机的效果,可以换行

news 来源：原创 2024/9/29 18:44:05

之前看了很多文章,效果是实现了,就是没有自动换行的效果,参考了文章写了一个,先上个效果图,卡顿是因为模仿了卡顿的效果,还是很丝滑的

效果图:

在这里插入图片描述

![请添加图片描述](https://i-blog.csdnimg.cn/direct/d8ef33d83dd3441a87d6d033d9e7cafa.gif

代码如下

原理:
1.在你需要显示换行的地方插入换行符:\n
2.div上用innerHTML展示数据

  <div class="msg-text cursor-ani" :innerHTML="formattedText"></div>let answer = ref(''); // 打字机内容let timer = ref<any>(); // 定时器let interTime = ref(10); // 初始化间隔时间let interArr = ref([20, 30, 10, 20, 80, 30, 15, 400, 50, 20]);let dialogueAnswer = ref('');//当前文本const formattedText = computed(() => {return dialogueAnswer.value.replace(/\n/g, '<br>');});let e = `我们并不是为了活着而活着，但是我们也是为了\n 活着而活着，生命本身就是一种巨大的力量，我们应当敬畏生命，把活着、活好，当成生命追求的极致的目标，让生命散发最大限度的光和热。苦难无处不在，生活处处艰险，我们只有在经历苦难后依然选择绽放笑容，那才是真正懂得了人生的意义----余华<<活着>>`;/**调用打字机,模拟获取到数据调用打字机*/function onTypewriterFun() {console.log('🚀 ~ onTypewriterFun ~ onTypewriterFun:');if (e) {answer.value = e; // 打字机文本内容clearInterval(timer.value); // 清除定时器timer.value = setInterval(setContent, interTime.value);}}function setContent() {if (dialogueAnswer.value.length >= answer.value.length) {// 说明文本已全部输出，清除定时器，结束执行clearInterval(timer.value);return;} else {dialogueAnswer.value += answer.value.charAt(dialogueAnswer.value.length);interTime.value = interArr.value[Math.floor(Math.random() * 10)];clearInterval(timer.value);timer.value = setInterval(setContent, interTime.value);}}.cursor-ani {position: absolute;top: 220px;left: 40%;width: 500px;height: 500px;z-index: 999;background-color: #333;color: #ffffff;}.cursor-ani::after {content: '';position: absolute;width: 1px;height: 16px;background: #333;transform: translateX(3px) translateY(3px);animation: cursor-blinks 0.8s infinite forwards;}@keyframes cursor-blinks {from {opacity: 0;}to {opacity: 1;}}