打字机效果显示

<template>
  <div>
    <p>{{ typedText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello, World44444444444444444444444444444444444444444444444444444!',
      typedText: ''
    }
  },
  mounted() {
    this.startTyping()
  },
  methods: {
    startTyping() {
      let i = 0
      const typingInterval = setInterval(() => {
        if (i < this.text.length) {
          this.typedText += this.text.charAt(i)
          i++
        } else {
          clearInterval(typingInterval)
        }
      }, 100) // 控制打字速度的延迟时间（以毫秒为单位）
    }
  }
}
</script>

---

将方法封装起来，随时调用

1.创建js文件

export default {
  data() {
    return {
      typedText: ''
    }
  },
  methods: {
    startTyping(text, delay) {
      let i = 0
      const typingInterval = setInterval(() => {
        if (i < text.length) {
          this.typedText += text.charAt(i)
          i++
        } else {
          clearInterval(typingInterval)
        }
      }, delay)
    }
  }
}

2.vue文件引入使用

<template>
     <div style="white-space: pre-wrap; margin-top: -10px">
        {{ typedText }}
      </div>
</template>

<script>
import typingMixin from '@/utils/typingMixin'
export default {
  mixins: [typingMixin],
  create(){
     this.test()
   },
  methods:{
      test(){
         this.startTyping("dddddd", 100)
       }

    }
}
</script>