手写一个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