摘要:好了,让我们来实现一个简单的这样打字的效果,如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画,很简单,就是清除定时器,然后重新调用即可。如何让编辑的代码生效呢,这就需要用到自定义事件事件修饰符,自行查看官网。
在网上看到一个这样的网站,STRML它的效果看着十分有趣,如下图所示:
这个网站是用react.js来写的,于是,我就想着用vue.js也来写一版,开始撸代码。
首先要分析打字的原理实现,假设我们定义一个字符串str,它等于一长串注释加CSS代码,并且我们看到,当css代码写完一个分号的时候,它写的样式就会生效。我们知道要想让一段CSS代码在页面生效,只需要将其放在一对标签对中即可。比如:
JS Bin 红色字体
你可以狠狠点击此处具体示例查看效果。
当看到打字效果的时候,我们不难想到,这是要使用间歇调用(定时函数: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组件,代码如下:
{{result}}
新建一个底部导航菜单组件bottomNav.vue,代码如下:
接下来是核心APP.vue组件代码:
到此为止,一个可以快速跳过动画,可以暂停动画,还有音乐播放,还能自由编辑代码的会动的简历已经完成,还添加了用户来控制写字速度快慢的功能。代码已上传至git源码,欢迎fork,也望不吝啬star。
在线预览。
鄙人创建了一个QQ群,供大家学习交流,希望和大家合作愉快,互相帮助,交流学习,以下为群二维码:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103275.html
摘要:好了,让我们来实现一个简单的这样打字的效果,如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画,很简单,就是清除定时器,然后重新调用即可。如何让编辑的代码生效呢,这就需要用到自定义事件事件修饰符,自行查看官网。 在网上看到一个这样的网站,STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...
摘要:好了,让我们来实现一个简单的这样打字的效果,如下你可以狠狠点击此处具体示例查看效果。接下来分析如何暂停动画和继续动画,很简单,就是清除定时器,然后重新调用即可。如何让编辑的代码生效呢,这就需要用到自定义事件事件修饰符,自行查看官网。 在网上看到一个这样的网站,STRML它的效果看着十分有趣,如下图所示:showImg(https://segmentfault.com/img/bVbqX...
阅读 1082·2021-10-14 09:43
阅读 1107·2021-10-11 11:07
阅读 3099·2021-08-18 10:23
阅读 1461·2019-08-29 16:18
阅读 984·2019-08-28 18:21
阅读 1454·2019-08-26 12:12
阅读 3731·2019-08-26 10:11
阅读 2482·2019-08-23 18:04