自己搞了一个自动打字的vue背景组件,在这里记录一下,这里边主要运用到了setTimeout() 的递归循环,不多说直接上代码。
<template>
<div class="hello">
<div class="show" v-html="fContent"></div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
writeTime: {
type:Number,
default: 500
},
content:{
type:Object,
default: function () {
return {
str1:'public class HelloWorld {',
str2:' public static void main(String[] args){',
str3:' System.out.println("Hello World!");',
str4:' }',
str5:'}',
}
}
}
},
data(){
return{
fContent:"",
inContent:"",
mContent:"",
course:"_",
hasCourse:true
}
},
mounted(){
this.showContent();
this.courseTimeOut();
},
methods:{
showContent(){
var that = this;
var data = that.content;
var mData = "";
for (var i in data){
mData += data[i] + '`';
}
that.mContent = mData;
that.contentTimeOut(0);
},
handStr(j){
var that = this;
var count = j;
var str = that.mContent;
count++;
if(count >= str.length){
that.hasCourse = false;
that.fContent = that.inContent;
}else{
if(" " == str.charAt(j)){
that.inContent += ' ';
}else if("`" == str.charAt(j)){
that.inContent += "</br>";
}else{
that.inContent += str.charAt(j);
}
that.fContent = that.inContent + that.course;
that.contentTimeOut(count);
}
},
contentTimeOut(value){
var that = this;
setTimeout(function () {
that.handStr(value)
},that.writeTime)
},
courseTimeOut(){
var that = this
setTimeout(function () {
if(that.course.length > 0){
that.fContent = that.inContent + "";
that.course = "";
that.courseTimeOut();
}else{
if(that.hasCourse){
that.fContent = that.inContent + "_";
that.course = "_";
that.courseTimeOut();
}else{
that.fContent = that.inContent;
}
}
},200)
}
}
}
</script>
<style scoped lang="scss">
.hello{
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 20px;
.show{
font-size: 1.4em;
font-weight: bold;
color: #475161;
}
}
</style>
抱歉代码没有写注释,但是很好理解,可以直接拿去用,组件效果如下:
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}