vue 动态loading点 ... 小组件

<template>
    <div class="mainPointBox">
        <template v-for="(item,index) in points">
            <div class="points" v-if="item.isShow"  :key="index">.</div>
        </template>
    </div>
</template>

<script>
export default {
    props:['isComplete'],
    data(){
        return {
           points:[
            {
              isShow:false,
            },
            {
              isShow:false,
            },{
              isShow:false,
            },{
              isShow:false,
            },{
              isShow:false,
            },{
              isShow:false,
            },
           ],
           showIndex:0,
           timer:null,
        }
    },
    watch:{
      isComplete(newVal,oldVal){
         if (newVal) {
            clearInterval(this.timer);
            this.points.forEach(e => {
               e.isShow = true;
            })
         } else {
             this.points.forEach(e => {
               e.isShow = false;
            })
            this.timer = setInterval(()=>{
               this.showPoint();
            },400)
         }
      }
    },
    methods:{
       showPoint(){
          this.points[this.showIndex].isShow=true;
          if (this.showIndex == this.points.length-1) {
             this.showIndex = 0;
             this.points.forEach(e => {
                e.isShow = false;
             })
          } else {
             this.showIndex++;
          }
       },
    },
    mounted(){
     this.timer = setInterval(()=>{
          this.showPoint();
       },400)
    },
    beforeDestroy(){
     clearInterval(this.timer);
    }
}
</script>
<style scoped>
 .mainPointBox{
    display: flex;
    align-items: center;
    margin-left:3px;
 }
 .points{
    margin-right: 3px;
    font-size: 16px;
    font-weight: 600;
 }
</style>