之前看了很多文章,效果是實(shí)現(xiàn)了,就是沒有自動(dòng)換行的效果,參考了文章寫了一個(gè),先上個(gè)效果圖,卡頓是因?yàn)槟７铝丝D的效果,還是很絲滑的

效果圖:

![請(qǐng)?zhí)砑訄D片描述](https://i-blog.csdnimg.cn/direct/d8ef33d83dd3441a87d6d033d9e7cafa.gif

代碼如下

原理:
1.在你需要顯示換行的地方插入換行符:\n
2.div上用innerHTML展示數(shù)據(jù)

  <div class="msg-text cursor-ani" :innerHTML="formattedText"></div>let answer = ref(''); // 打字機(jī)內(nèi)容let timer = ref<any>(); // 定時(shí)器let interTime = ref(10); // 初始化間隔時(shí)間let interArr = ref([20, 30, 10, 20, 80, 30, 15, 400, 50, 20]);let dialogueAnswer = ref('');//當(dāng)前文本const formattedText = computed(() => {return dialogueAnswer.value.replace(/\n/g, '<br>');});let e = `我們并不是為了活著而活著，但是我們也是為了\n 活著而活著，生命本身就是一種巨大的力量，我們應(yīng)當(dāng)敬畏生命，把活著、活好，當(dāng)成生命追求的極致的目標(biāo)，讓生命散發(fā)最大限度的光和熱?？嚯y無處不在，生活處處艱險(xiǎn)，我們只有在經(jīng)歷苦難后依然選擇綻放笑容，那才是真正懂得了人生的意義----余華<<活著>>`;/**調(diào)用打字機(jī),模擬獲取到數(shù)據(jù)調(diào)用打字機(jī)*/function onTypewriterFun() {console.log('🚀 ~ onTypewriterFun ~ onTypewriterFun:');if (e) {answer.value = e; // 打字機(jī)文本內(nèi)容clearInterval(timer.value); // 清除定時(shí)器timer.value = setInterval(setContent, interTime.value);}}function setContent() {if (dialogueAnswer.value.length >= answer.value.length) {// 說明文本已全部輸出，清除定時(shí)器，結(jié)束執(zhí)行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;}}