vue 打字机动画效果

//html部分
<div v-html="pages(item)" class="right_vip" :id="index_list(index)" v-for="(item,index) in list" :key="index">
 </div>
<div flex="dir:top main-cross:center" style="-moz-user-select: none; " onselectstart = "return false;"    class="right" >
    <div class="contentss" id="niu" ref="right"></div>
</div>

<div v-show="jiantou_S"> //这是翻页的加减
      <div v-show="activeIndex_1" class="jiantou" @click="add"></div>
      <div  v-show="jiantou_1" class="jiantou jiantou_1" @click="reduce"></div>
</div>
html讲解：首先 用v-html是为了让内容里的div span 能够使用起来，id是为了展示多页的时候去展示的，因为我这个动画是多页的，多以每次点击的时候 获取id下的内筒，喜欢呢是因为 有几个数组 就是几页
//props部分
props:{
    list:{
       type:Array,
       default: () => []
    }, 
}
html讲解：我把这个功能封装成了一个公共的 当做一个模板 所以需要接受一下list
//data部分 
 data() {
        return {
        activeIndex: 0,
        mss:"",
        }
 }
 data讲解：如果打字效果需要有多页的需求就用这个参数
//js部分
add(){
            clearInterval(this.mss)
            let box_s = document.getElementById(`niu`);
            box_s.innerText = '';
            this.activeIndex++
            this.$nextTick( ()=> {
               this.dingshi()
            }); 
            let lengs = this.list.length-1
            if(this.activeIndex==lengs){
                this.activeIndex_1=false
                this.jiantou_1=true
            }
        },
        reduce(){
             clearInterval(this.mss)
            let box_s = document.getElementById(`niu`);
            box_s.innerText = '';
            this.activeIndex--
             this.$nextTick( ()=> {
               this.dingshi()
            });
            if(this.activeIndex==0){
                this.activeIndex_1=true
                this.jiantou_1=false
            }
        },
pages(item){
  return     item.title.replace(/#/g,'<br/>').replace(/\$/g,'<div>').replace(/%/g,'</div>').replace(/@/g,'<span style="opacity:0">你</span>')
 },
pages 讲解：就是为了把div span 什么的不会把咱定义的当成字符串去展示，因为在数组里用#$@代表了不同的作用打印的时候需要把这个标识替换掉
  index_list(index){
      return "num_"+index
  },
 index_list讲解： 既然是动态的id需要在方法里动态生成一下
 dingshi(){
            
           clearInterval(typing)
           let box = document.getElementById(`num_${this.activeIndex}`);
           let niu_s = document.getElementById(`niu`);
           niu_s.style.height = box.offsetHeight+"px"
           console.log(this.$refs.right.style)
           let str = this.list[this.activeIndex].title;
            let box_s = document.getElementById(`niu`);
            box_s.innerText = '';
            console.log(str)
            let i = 0;
            let typing = setInterval(()=> {
                let aa=str[i++]
                if(aa=="#"){
                    box_s.innerHTML += '<br/>';
                } else if(aa=="$"){
                    box_s.innerHTML += '<div>';
                }else if(aa=="%"){
                    box_s.innerHTML += '</div>';
                }else if(aa=="@"){
                    box_s.innerHTML += '<span style="opacity:0">你</span>';
                }
                else {
                    box_s.innerHTML += aa;
                }
              i >= str.length && clearInterval(typing);
            },50);
            this.mss = typing
            console.log(box_s.innerText)
       },
       dingshi这一段js就不用了说了
mounted() {
   setTimeout( ()=> {
       this.dingshi()
    },4000); 
   
    },