在Vue中怎么實(shí)現(xiàn)打字機(jī)的效果

本篇內(nèi)容介紹了“在Vue中怎么實(shí)現(xiàn)打字機(jī)的效果”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

最終效果

I‘m ByPunk!I‘m looking for a job.I‘m a front-end programmer.I‘m coding the web…

以上四句話循環(huán)重復(fù)，以打字機(jī)的效果顯示輸入和刪除，因?yàn)榍懊娴腎‘m是相同的，所以只對(duì)后面的內(nèi)容加以修改。

1.事先定義好字符串str：str='By Punk!'，使用數(shù)組的splite方法將str分解成由字母組成的數(shù)組。

2.利用for循環(huán)，每100毫秒向數(shù)組里push一個(gè)新的字母，利用vue的雙向綁定，數(shù)據(jù)更新帶動(dòng)視圖更新。

3.在容納字母的div后寫一個(gè)豎杠“|”并加上不斷閃爍的動(dòng)畫，模擬打字機(jī)光標(biāo)。

4.在每次push的時(shí)候，判斷當(dāng)前的索引i是否是數(shù)組的最后一個(gè)元素，如果是，則在2秒后開(kāi)始清除。

5.“刪除”具體實(shí)現(xiàn)跟“輸入”剛好相反，每200毫秒從數(shù)組從pop出最后一項(xiàng)。

6.使用watch鉤子函數(shù)實(shí)現(xiàn)四句話的循環(huán)重復(fù)。

具體代碼如下

<template>
    <div class="typer">
      <div class="typer-content">
        <p class="typer-static">I'm&nbsp;</p>
        <!-- 動(dòng)態(tài)變化的內(nèi)容-->
        <p class="typer-dynamic">
          <span class="cut">
            <span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
          </span>
          <!-- 模擬光標(biāo)-->
          <span class="typer-cursor"></span>
        </p>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      words:[],               //字母數(shù)組push，pop的載體
      str:"By Punk",          //str初始化
      letters:[],             //str分解后的字母數(shù)組
      order:1,                //表示當(dāng)前是第幾句話
    }
  },
  watch:{                     //監(jiān)聽(tīng)order值的變化，改變str的內(nèi)容
    order(old,newV){
      if(this.order%4==1){
        this.str="By Punk!"
      }
      else if(this.order%4==2){
        this.str="looking for a job. "
      }
      else if(this.order%4==3){
        this.str="a front-end programmer."
      }
      else{
        this.str="coding the web..."
      }
    }
  },
  mounted(){            //頁(yè)面初次加載后調(diào)用begin()開(kāi)始動(dòng)畫
    this.begin()
  },
  methods:{
  //開(kāi)始輸入的效果動(dòng)畫
    begin(){            
      this.letters=this.str.split("")
      for(var i=0;i<this.letters.length;i++){
        setTimeout(this.write(i),i*100);
      }
    },
  //開(kāi)始刪除的效果動(dòng)畫
    back(){
      let L=this.letters.length;
      for(var i=0;i<L;i++){
        setTimeout(this.wipe(i),i*50);
      }
    },
  //輸入字母
    write(i){
      return ()=>{
          let L=this.letters.length;
          this.words.push(this.letters[i]);
          let that=this;
           /*如果輸入完畢，在2s后開(kāi)始刪除*/
          if(i==L-1){ 
            setTimeout(function(){
              that.back();
            },2000);
          }
      }
    },
  //擦掉(刪除)字母
    wipe(i){
      return ()=>{
          this.words.pop(this.letters[i]);
          /*如果刪除完畢，在300ms后開(kāi)始輸入*/
          if(this.words.length==0){
             this.order++;
             let that=this;
             setTimeout(function(){
               that.begin();
             },300);
          }
      }
    },
  },
}
</script>

<style scoped lang="less">
@thePink:#e84d49;
.typer{
  margin-top: 2%;
  box-sizing: border-box;
}
.typer .typer-content{
  font-weight: bold;
  font-size: 50px;
  display: flex;
  flex-direction: row;
  letter-spacing: 2px }
.typer-dynamic{
  position: relative;
}
.cut{
  color: @thePink;
}
.typer-cursor{
  position: absolute;
  height: 100%;
  width: 3px;
  top: 0;
  right: -10px;
  background-color: @thePink;
  animation: flash 1.5s linear infinite;
}
</style>

“在Vue中怎么實(shí)現(xiàn)打字機(jī)的效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！