<template>
? ? <div class="typer">
? ? ? <div class="typer-content">
? ? ? ? <p class="typer-static">I'm&nbsp;</p>
? ? ? ? <!-- 動態(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>
? ? ? ? ? <!-- 模擬光標-->
? ? ? ? ? <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, ? ? ? ? ? ? ? ?//表示當前是第幾句話
? ? }
? },
? watch:{ ? ? ? ? ? ? ? ? ? ? //監(jiān)聽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(){ ? ? ? ? ? ?//頁面初次加載后調(diào)用begin()開始動畫
? ? this.begin()
? },
? methods:{
? //開始輸入的效果動畫
? ? begin(){ ? ? ? ? ? ?
? ? ? this.letters=this.str.split("")
? ? ? for(var i=0;i<this.letters.length;i++){
? ? ? ? setTimeout(this.write(i),i*100);
? ? ? }
? ? },
? //開始刪除的效果動畫
? ? 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后開始刪除*/
? ? ? ? ? if(i==L-1){?
? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? that.back();
? ? ? ? ? ? },2000);
? ? ? ? ? }
? ? ? }
? ? },
? //擦掉(刪除)字母
? ? wipe(i){
? ? ? return ()=>{
? ? ? ? ? this.words.pop(this.letters[i]);
? ? ? ? ? /*如果刪除完畢，在300ms后開始輸入*/
? ? ? ? ? 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>