vue实现打字机

Vue实现打字机效果

在Vue中实现打字机效果可以通过动态更新文本内容并添加延迟来实现。以下是几种常见的实现方法：

使用setInterval实现

<template>
  <div>{{ displayedText }}</div>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这里是需要逐字显示的文字内容',
      displayedText: '',
      currentIndex: 0,
      typingSpeed: 100 // 每个字符的显示间隔(毫秒)
    }
  },
  mounted() {
    this.typeWriter()
  },
  methods: {
    typeWriter() {
      if (this.currentIndex < this.fullText.length) {
        this.displayedText += this.fullText.charAt(this.currentIndex)
        this.currentIndex++
        setTimeout(this.typeWriter, this.typingSpeed)
      }
    }
  }
}
</script>

使用Vue过渡效果增强

<template>
  <transition name="fade">
    <div>{{ displayedText }}</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      fullText: '带过渡效果的打字机',
      displayedText: '',
      typingSpeed: 150
    }
  },
  mounted() {
    this.startTyping()
  },
  methods: {
    startTyping() {
      let i = 0
      const timer = setInterval(() => {
        if (i < this.fullText.length) {
          this.displayedText += this.fullText[i++]
        } else {
          clearInterval(timer)
        }
      }, this.typingSpeed)
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

使用CSS动画配合Vue

<template>
  <div class="typing-text">{{ displayedText }}<span class="cursor">|</span></div>
</template>

<script>
export default {
  data() {
    return {
      textArray: ['第一段文字', '第二段文字', '第三段文字'],
      currentTextIndex: 0,
      displayedText: '',
      typingSpeed: 100,
      deletingSpeed: 50,
      pauseBetweenTexts: 2000
    }
  },
  mounted() {
    this.type()
  },
  methods: {
    type() {
      const currentText = this.textArray[this.currentTextIndex]
      let i = 0

      const typingInterval = setInterval(() => {
        if (i < currentText.length) {
          this.displayedText += currentText.charAt(i)
          i++
        } else {
          clearInterval(typingInterval)
          setTimeout(this.erase, this.pauseBetweenTexts)
        }
      }, this.typingSpeed)
    },
    erase() {
      const eraseInterval = setInterval(() => {
        if (this.displayedText.length > 0) {
          this.displayedText = this.displayedText.substring(0, this.displayedText.length - 1)
        } else {
          clearInterval(eraseInterval)
          this.currentTextIndex = (this.currentTextIndex + 1) % this.textArray.length
          setTimeout(this.type, this.typingSpeed)
        }
      }, this.deletingSpeed)
    }
  }
}
</script>

<style>
.cursor {
  animation: blink 1s infinite;
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

使用Vue自定义指令

<template>
  <div v-typewriter="text" :speed="speed"></div>
</template>

<script>
export default {
  data() {
    return {
      text: '使用自定义指令实现的打字机效果',
      speed: 120
    }
  },
  directives: {
    typewriter: {
      inserted(el, binding) {
        const text = binding.value
        const speed = binding.arg || binding.modifiers.slow ? 200 : 100
        let i = 0

        const type = () => {
          if (i < text.length) {
            el.innerHTML += text.charAt(i)
            i++
            setTimeout(type, speed)
          }
        }

        type()
      }
    }
  }
}
</script>

这些方法提供了不同复杂度的实现方式，可以根据具体需求选择适合的方案。第一种方法最简单，最后一种方法最灵活但实现复杂度较高。