vue实现文字手工动态打出效果

vue实现文字手工动态打出效果

问题背景

本文实现vue中，动态生成文字手动打出效果。

问题分析

话不多说，直接上代码：

  
    
      
点击生成内容
    
    
{{ stringA }}
  

 

export default {
  data() {
    return {
      stringB : '卜算子·咏梅\n毛泽东\n风雨送春归，\n飞雪迎春到。\n已是悬崖百丈冰，\n犹有花枝俏。\n俏也不争春，\n只把春来报。\n待到山花烂漫时，\n她在丛中笑。',
      stringA : '',
    }
  },
  components: {
  },
  methods: {
    makeText() {
      console.log(this.stringA.length, this.stringB.length);
      if (this.stringA.length >= this.stringB.length) {
        // 退出递归
        return;
      } else {
        // stringA仍然比stringB短，进入下一次等待和递归
        setTimeout(() => {
          this.stringA += this.stringB.charAt(this.stringA.length);
          this.makeText(this.stringA, this.stringB);
        }, 50);
      }
    }
  }
}


.text {
  font-size: 30px;
  max-width: 800px;
}
.outer-border {
  border: 2px solid black;
  border-radius: 5px;
  padding: 3px;
  white-space: pre-wrap;
}

运行结果如下：

问题总结

本文实现了文字手工动态打出效果，有兴趣的同学可以进一步深入研究。