vue 实现打字机效果

** 父组件 HTML**

<!-- 父组件 -->
<template>
	<!-- 我这里是循环向打字组件传值 -->
	<div class="title" v-for="(v,k) in content">
		<typewriter class="str" :str="v"></typewriter>
	</div>
</template>

** 父组件 JS**

<!-- 父组件 -->
	//设置时间，将words中的文字，逐条追加到content
	import typewriter from '../components/nav/typewriter.vue'
	export default {
		data() {
			return {
				content: [],
				str:"我是文字",
				words:[
					"我承认世界对我有点诱惑，",
					"不该像叛逆期的孩子拼命耍。	",
					"你能不能再编一个理由等我回家。",
				]
			}
		},
		mounted() {
			this.setTime();
		},
		components: {
			typewriter: typewriter,
		},
		methods:{
			setTime(){
				var arr = this.words;
				var that = this;
				arr.forEach(function (v,k){
					setTimeout(function (){
						that.content.push(v)
					},k*2500)
					
				})
			}
		}
	}

子组件 HTML

<!-- 子组件 -->
<template>
	<div>
		<span class="font" v-for="(v,k) in words">{{v}}</span>
	</div>
</template>

子组件 JS

export default{
		data(){
			return {
				words: [],
				strArr:[],
			}
		},
		mounted() {
			this.start();
		},
		methods:{
			start(){
				//将获取到的字符串切割成数组
				this.strArr = this.str.split("");
				//循环将单个的文字 延时追加到words数组中
				for(var i = 0;i<this.strArr.length;i++){
					var res = setTimeout(this.write(i),i * 150);
				}
			},
			write(i){
				return()=>{
					this.words.push(this.strArr[i]);
				}
			}
		},
		//接收父组件传递过来的 str
		props:['str']
	}