<template>
	<text>
		{{ loadText }}
	</text>
</template>

<script>
	export default {
		name:"LoadMessage",
		props: {
			text: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				loadText: ''
			}
		},
		watch: {
			text: {
				immediate: true,
				handler(newVal) {
					let strList = this.text.split('');
					let newList = [];
					let index = 0;
					let timer = setInterval(()=> {
						if(index < strList.length) {
							newList.push(strList[index]);
							index++;
							this.loadText = newList.join('');
						} else {
							clearInterval(timer);
						}
					}, 50)

				}
			}
		}
	}
</script>

<style>

</style>