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

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

目录

效果图:

![请添加图片描述](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;
    }
  }
相关推荐
蜚鸣3 天前
Vue的快速入门
vue
吃饭最爱4 天前
⽹络请求Axios的概念和作用
vue
魂尾ac4 天前
Django + Vue3 前后端分离技术实现自动化测试平台从零到有系列 <第一章> 之 注册登录实现
后端·python·django·vue
是罐装可乐4 天前
深入理解 Vue3 Router:三种路由模式的工作原理与实战应用
架构·vue·路由·history·hash·ssr·router
老华带你飞4 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
zhz52145 天前
Spring Boot + Redis 缓存性能优化实战:从5秒到毫秒级的性能提升
java·spring boot·redis·缓存·vue
小胖墩有点瘦6 天前
【基于协同过滤的校园二手交易平台】
java·vue·毕业设计·springboot·计算机毕业设计·协同过滤·校园二手交易平台
小圣贤君6 天前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
知识分享小能手6 天前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
@AfeiyuO6 天前
分类别柱状图(Vue3)
typescript·vue·echarts