包含底部导航功能，编辑功能 vue.js实现会动的简历 _生活百科

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

文章插图

文章插图
【包含底部导航功能，编辑功能 vue.js实现会动的简历】你可以狠狠点击此处具体示例查看效果。
当看到打字效果的时候，我们不难想到，这是要使用间歇调用(定时函数:setInterval()) 或超时调用(延迟函数:setTimeout()) 加递归去模拟实现间歇调用。一个包含一长串代码的字符串，它是一个个截取出来，然后分别写入页面中，在这里，我们需要用到字符串的截取方法，如 slice(),substr(),substring() 等，选择用哪个截取看个人，不过需要注意它们之间的区别。好了，让我们来实现一个简单的这样打字的效果，如下:

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

文章插图
你可以狠狠点击此处具体示例查看效果。
接下来，我们还要让样式生效，这很简单，将代码在 style 标签中写一次即可，请看:

文章插图
你可以狠狠点击此处具体示例查看效果。
我们看到代码还会有高亮效果，这可以用正则表达式来实现，比如以下一个 demo :

文章插图

文章插图
你可以狠狠点击此处具体示例查看效果。
不过这里为了方便，我还是使用插件 Prism.js ,另外在这里，我们还要用到将一个普通文本打造成 HTML 网页的插件 marked.js。
接下来分析如何暂停动画和继续动画，很简单，就是清除定时器，然后重新调用即可。如何让编辑的代码生效呢，这就需要用到自定义事件 .sync 事件修饰符，自行查看官网 vue.js。
虽然这里用原生 js 也可以实现，但我们用 vue-cli 结合组件的方式来实现，这样更简单一些。好了，让我们开始吧:
新建一个 vue-cli 工程(步骤自行百度):
新建一个 styleEditor.vue 组件,代码如下: