在Vue中如何实现打字机的效果

 更新时间:2022年07月02日 15:00:33   作者:但心情怎会无恙  
这篇文章主要介绍了在Vue中如何实现打字机的效果,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

前一段时间找工作做网页简历,想实现打字机的效果。

按理说像打字机这种动画效果的实现首选是jquery,毕竟jquery还是以操作dom为主,而vue是数据驱动,但是jquery并没有能狗满足我设想的功能的插件,又偷懒不想自己实现双向绑定,只好自己用vue实现。

代码写的不是很漂亮,希望大家不喜勿喷,这里只是提供一个思路。

最终效果

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

以上四句话循环重复

以打字机的效果显示输入和删除,因为前面的I‘m是相同的,所以只对后面的内容加以修改。

1.事先定义好字符串str:str='By Punk!',使用数组的splite方法将str分解成由字母组成的数组。

2.利用for循环,每100毫秒向数组里push一个新的字母,利用vue的双向绑定,数据更新带动视图更新。

3.在容纳字母的div后写一个竖杠“|”并加上不断闪烁的动画,模拟打字机光标。

4.在每次push的时候,判断当前的索引i是否是数组的最后一个元素,如果是,则在2秒后开始清除。

5.“删除”具体实现跟“输入”刚好相反,每200毫秒从数组从pop出最后一项。

6.使用watch钩子函数实现四句话的循环重复。

具体代码如下

<template>
    <div class="typer">
      <div class="typer-content">
        <p class="typer-static">I'm&nbsp;</p>
        <!-- 动态变化的内容-->
        <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:[],               //字母数组push,pop的载体
      str:"By Punk",          //str初始化
      letters:[],             //str分解后的字母数组
      order:1,                //表示当前是第几句话
    }
  },
  watch:{                     //监听order值的变化,改变str的内容
    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(){            //页面初次加载后调用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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解Vue 事件修饰符capture 的使用

    详解Vue 事件修饰符capture 的使用

    capture事件修饰符的作用是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。这篇文章给大家介绍了Vue 事件修饰符capture 的使用,需要的朋友参考下吧
    2017-12-12
  • 详解实现vue的数据响应式原理

    详解实现vue的数据响应式原理

    这篇文章主要介绍了详解实现vue的数据响应式原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 详解VUE中的插值( Interpolation)语法

    详解VUE中的插值( Interpolation)语法

    这篇文章主要介绍了详解VUE中的插值( Interpolation)语法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • VUE脚手架的下载和配置步骤详解

    VUE脚手架的下载和配置步骤详解

    这篇文章主要介绍了VUE脚手架下载和配置,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 前端低代码form-generator实现及新增自定义组件详解

    前端低代码form-generator实现及新增自定义组件详解

    这篇文章主要给大家介绍了关于前端低代码form-generator实现及新增自定义组件的相关资料,form-generator是一个开源的表单生成器,可以帮助我们快速构建各种表单页面,需要的朋友可以参考下
    2023-11-11
  • vue下拉刷新组件的开发及slot的使用详解

    vue下拉刷新组件的开发及slot的使用详解

    这篇文章主要介绍了vue下拉刷新组件的开发及slot的使用详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Vue2项目中对百度地图的封装使用详解

    Vue2项目中对百度地图的封装使用详解

    近期项目需求相关地图限定使用百度地图,功能比较简单,下面这篇文章主要给大家介绍了关于Vue2项目中对百度地图的封装使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • 解决vue项目nginx部署到非根目录下刷新空白的问题

    解决vue项目nginx部署到非根目录下刷新空白的问题

    今天小编就为大家分享一篇解决vue项目nginx部署到非根目录下刷新空白的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • elementUI同一页面展示多个Dialog的实现

    elementUI同一页面展示多个Dialog的实现

    这篇文章主要介绍了elementUI同一页面展示多个Dialog的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • vue开发公共组件之返回顶部

    vue开发公共组件之返回顶部

    这篇文章主要为大家详细介绍了vue开发公共组件之返回顶部,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01

最新评论