乐趣区

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

jiezi

明天来实现一个跟 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

退出移动版