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

问题背景

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

问题分析

话不多说，直接上代码：

<template><main><button @click="makeText"><p class="text">点击生成内容</p></button><p class="text" :class="{'outer-border' : stringA.length > 0}">{{ stringA }}</p></main>
</template><script>
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);}}}
}
</script><style scoped>
.text {font-size: 30px;max-width: 800px;
}.outer-border {border: 2px solid black;border-radius: 5px;padding: 3px;white-space: pre-wrap;
}
</style>

运行结果如下：

问题总结

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