资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

luffyZh / 3589人阅读

摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。

在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:

这个网站是用react.js来写的，于是，我就想着用vue.js也来写一版，开始撸代码。

首先要分析打字的原理实现，假设我们定义一个字符串str,它等于一长串注释加CSS代码，并且我们看到，当css代码写完一个分号的时候，它写的样式就会生效。我们知道要想让一段CSS代码在页面生效，只需要将其放在一对

你可以狠狠点击此处具体示例查看效果。

当看到打字效果的时候，我们不难想到，这是要使用间歇调用(定时函数:setInterval())或超时调用(延迟函数:setTimeout())加递归去模拟实现间歇调用。一个包含一长串代码的字符串，它是一个个截取出来，然后分别写入页面中，在这里，我们需要用到字符串的截取方法，如slice(),substr(),substring()等，选择用哪个截取看个人，不过需要注意它们之间的区别。好了，让我们来实现一个简单的这样打字的效果，如下:




  
  
  JS Bin

你可以狠狠点击此处具体示例查看效果。好的，让我们来分析一下以上代码的原理,首先放一个用于包含代码显示的标签，然后定义一个包含代码的字符串，接着定义一个初始值为0的变量，为什么要定义这样一个变量呢？我们从实际效果中看到，它是一个字一个字的写入到页面中的。初始值是没有一个字符的，所以，我们就从第0个开始写入，c一个字一个字的加，然后不停的截取字符串，最后渲染到标签的内容当中去，当c的值大于等于了字符串的长度之后，我们需要清除定时器。定时函数看着有些不太好，让我们用超时调用结合递归来实现。




  
  
  JS Bin

你可以狠狠点击此处具体示例查看效果。

好了，到此为止，算是实现了第一步，让我们继续，接下来，我们要让代码保持空白和缩进，这可以使用

标签来实现，但其实我们还可以使用css代码的white-space属性来让一个普通的div标签保持这样的效果，为什么要这样做呢，因为我们还要实现一个功能，就是编辑它里面的代码，可以让它生效。更改一下代码,如下:





  
  
  JS Bin
  


  

  





你可以狠狠点击此处具体示例查看效果。


接下来，我们还要让样式生效，这很简单，将代码在style标签中写一次即可，请看:





  
  
  JS Bin
  


   

   
   
  

 



你可以狠狠点击此处具体示例查看效果。


我们看到代码还会有高亮效果，这可以用正则表达式来实现，比如以下一个demo:






    
    
    
    代码编辑器
    



    
        

            
{{ greeting }} world!

        

    
    
        //定义一个javascript对象
        var obj = { 
            greeting: "Hello," 
        }; 
        //创建一个实例
        var vm = new Vue({ 
            data: obj 
        });
        /*将实例挂载到根元素上*/
        vm.$mount(document.getElementById("app"));
    
    






你可以狠狠点击此处具体示例查看效果。


不过这里为了方便，我还是使用插件Prism.js,另外在这里，我们还要用到将一个普通文本打造成HTML网页的插件marked.js。


接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件.sync事件修饰符，自行查看官网vue.js。


虽然这里用原生js也可以实现，但我们用vue-cli结合组件的方式来实现，这样更简单一些。好了，让我们开始吧:


新建一个vue-cli工程(步骤自行百度):


新建一个styleEditor.vue组件,代码如下:








新建一个resumeEditor.vue组件,代码如下:




 



新建一个底部导航菜单组件bottomNav.vue,代码如下:








接下来是核心APP.vue组件代码:









到此为止，一个可以快速跳过动画，可以暂停动画，还有音乐播放，还能自由编辑代码的会动的简历已经完成，还添加了用户来控制写字速度快慢的功能。代码已上传至git源码,欢迎fork,也望不吝啬star。


在线预览。 


鄙人创建了一个QQ群，供大家学习交流，希望和大家合作愉快，互相帮助，交流学习，以下为群二维码：
GPU云服务器 云服务器 深度学习包含的功能 编辑功能 多云管理平台功能架构包含 功能导航html模板

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54840.html

相关文章

  • vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

    摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。 在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

    daydream 评论0 收藏0

  • vue.js实现一个会动的简历(包含底部导航功能，编辑功能,添加了用户自定义写字速度功能)

    摘要：好了，让我们来实现一个简单的这样打字的效果，如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件事件修饰符，自行查看官网。 在网上看到一个这样的网站，STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...

    FleyX 评论0 收藏0

  • 前端学习资源

    摘要：掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容，技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接，供大家参考与学习。 【掘金日报】第四期 使用Sublime？怎么能不知道这些 Sublime 插件合集！ 掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 前端...

    xzavier 评论0 收藏0

  • 前端学习资源

    摘要：掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容，技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接，供大家参考与学习。 【掘金日报】第四期 使用Sublime？怎么能不知道这些 Sublime 插件合集！ 掘金日报主打分享优质深度技术内容，技术内容分：前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 前端...

    weij 评论0 收藏0

发表评论

登陆后可评论

0条评论

luffyZh

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<