手寫一個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

手寫一個ChatGPT打字效果

相關文章