关于前端:手写一个ChatGPT打字效果

明天来实现一个跟chatgpt无关的性能，但不是它的ai性能，而是它的打字成果。应用过chatgpt的都晓得，它的文字输入是实时的，就跟咱们打字的成果一样

chatgpt打字成果

这是应用前端实现的一个chatgpt打字成果，页面初始化的时候会主动打出一段文字

而后上面有个文本域，咱们能够输出一些文字，而后回车看看成果：

能够看到，回车后，在文本域输出的内容，会在这块彩色的内容区以打字的模式显示进去。

看完成果后咱们来看下代码的实现逻辑：

<template>  <div class="cmdbox">    ChatGPT打字成果    <div class="content"></div>    <div class="textarea">     <textarea v-model="message" placeholder="请输出文字后回车看看成果" @keydown.enter="handleEnter"></textarea>    </div>  </div></template><script>export default {  name: 'HelloWorld',  data () {    return {      msg:'你好，我是模拟ChatGPT的打字成果',      message:'',    }  },  mounted() {    this.writing(0)  },  methods:{    handleEnter() {      event.preventDefault();//阻止enter键回车换行      this.msg=this.message      const dom = document.querySelector('.content')      dom.innerHTML = ''      this.writing(0)      this.message=''    },    writing(index){        const dom = document.querySelector('.content')        const data = this.msg.split('')        if (index < data.length) {            dom.innerHTML += data[index]            setTimeout(this.writing, 200, ++index)        }    }  }}</script>

代码剖析：

1.外围的逻辑次要是writing办法，当页面初始化的时候先调用一遍writing办法

2.通过setTimeout设置200毫秒的工夫距离， 每隔200毫秒向dom中插入对应的数据

字前面的闪动光标：

.content::after{    content: '_';    animation: blink 1s infinite}@keyframes blink{    from{        opacity: 0;    }    to{        opacity: 1;    }}

通过一个伪类after将光标定在这个class的最初面， 并给一个显示暗藏的循环动画模仿光标的闪动

残缺我的项目下载：

公众号【GitWeb】内回复：typing