Iefans,靠谱的软件下载站

首页 最新文章 最新安卓 最新苹果 浏览器 IE教程 在线图片编辑 最新软件 最新游戏

当前位置: IEfans / IE专区 / IE相关/ vue.js实现会动的简历(包含底部导航功能,编辑功能)

vue.js实现会动的简历(包含底部导航功能,编辑功能)

编辑:秩名2020-08-05 09:32:55

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

vue.js实现会动的简历(包含底部导航功能,编辑功能)

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

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

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

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

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

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

vue.js实现会动的简历(包含底部导航功能,编辑功能)

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

vue.js实现会动的简历(包含底部导航功能,编辑功能)

vue.js实现会动的简历(包含底部导航功能,编辑功能)

vue.js实现会动的简历(包含底部导航功能,编辑功能)

到此为止,一个可以快速跳过动画,可以暂停动画,还有音乐播放,还能自由编辑代码的会动的简历已经完成,代码已上传至 git源码 ,欢迎 fork ,也望不吝啬 star 。

总结

以上所述是小编给大家介绍的vue.js实现会动的简历(包含底部导航功能,编辑功能),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对iefans网的支持!


返回旧版Copyright © 1998-2023 www.iefans.net All Rights Reserved 沪ICP备17019769号-18 意见反馈