vue 模拟自动打字背景效果组件

       自己搞了一个自动打字的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 += '&ensp;';

                }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>

抱歉代码没有写注释，但是很好理解，可以直接拿去用，组件效果如下：