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

不掰手腕2024-09-29 19:01

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

效果图:

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

代码如下

原理:

1.在你需要显示换行的地方插入换行符:\n

2.div上用innerHTML展示数据

js 复制代码

  <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;
    }
  }

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

目录

效果图:

代码如下