【vue】仿chatGPT逐个打字效果

Hemri_

已于 2023-05-03 17:41:06 修改

阅读量2.5k

点赞数 2

文章标签： vue.js javascript 前端

于 2023-05-03 17:29:00 首次发布

本文链接：https://blog.youkuaiyun.com/Hemri2580/article/details/130475072

版权

该代码示例展示了一个使用Vue.js编写的聊天组件，动态模拟用户打字过程。通过数据绑定显示消息列表，当显示最后一条消息时，会展现打字状态。方法`addMessage`用于添加新消息，并随机生成打字延迟，创建逼真的打字动画效果。当全部内容输入完成后，会随机延迟一段时间后添加省略号，模拟用户可能的下一条消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="chat">
    <div class="chat-bubble" v-for="(message, index) in messages" :key="index">
      <div>{
  { message.content }}</div>
      <span v-if="showTyping && index === messages.length - 1">{
  { typing }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Chat',
  data() {
    return {
      messages: [],
      typing: '',
      showTyping: false,
      intervalId: null
    }
  },
  created() {
    this.addMessage({
      content: 
      `
      为什么如此？因为在青春时代，生活充满了奇特而辛酸的不可思议的事。
      Why is this so? Because in youth, life is filled with strange and poignant incredible things.
      `
    })
  },
  methods: {
    addMessage(message) {
      this.messages.push({ ...message, content: '' })

      let i = 0
      const msgLen

最低0.47元/天解锁文章