关于前端:手写一个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