如何做新人引导功能()
功能点
【如何做新人引导功能()】节前碰到一个需求:「新人引导效果」针对第一次使用平台的用户进行主要功能引导。
具体引导路径为:点击“新增按钮”,对弹出的内容进行解释,并引导用户填充表单,最后提交表单。
下面为效果截图(感兴趣的兄弟们可以自己实现一下,我用的 vue
+ ElementUI
):
-
文章图片
-
文章图片
-
文章图片
-
文章图片
是否有现成的轮子? 通过搜索引擎来查找解决办法。
- github 搜索结果
- 思否搜索结果
- 百度搜索结果
- introjs
- vue-introjs
- driver.js
- http://bootstraptour.com/api/
- https://github.com/pulsardev/...
- https://github.com/shipshapec...
- https://github.com/zurb/joyride
我试用了一下 introjs 和 driver.js,最后使用了 introjs 来实现,但是两个库都有不如意的点。
- introjs
- http://jsrun.net/ERQKp/edit 新增按钮是好使的,但是弹窗中的 input 无法单击。(也有可能是 elementUI 有毒)
我最后使用pointer-events: none; user-select: none;
+ 引导中状态来自行实现的功能。 - 不支持 next 回调,不支持 delay 控制。
我最后把引导分为了两步来实现,手动实现 delay 逻辑
- http://jsrun.net/ERQKp/edit 新增按钮是好使的,但是弹窗中的 input 无法单击。(也有可能是 elementUI 有毒)
- driver.js
- http://jsrun.net/PmQKp/edit 看上去弹窗的时候,层级关系就不对了。我直接就麻了。
拆解功能点 虽然有插件,但是我们也可以了解一下如何实现。我们来拆解一下
- 高亮功能&遮罩功能
fixed
+z-index
层级box-shadow
border
+ 位移
- 获取元素位置方便定位
- 上一步、下一步等回调方便处理逻辑。
文章图片
https://jsrun.net/cRQKp/edit
可以看到基本能满足,但是底部还是可单击的。而且并没有分层。
通过增加遮罩层来实现分层功能,这样就可以阻止事件了。https://jsrun.net/duQKp/edit
但是这里还是有一个问题的。
z-index
不能超过父级。所以我们需要增加多个层,来规避这个问题。获取元素位置 popper 定位
popper 的功能我们可以使用一些三方库来实现
- popper.js
https://jsrun.net/duQKp/edit 很快我们就实现了想要的功能。 - 自己通过 offsetParent 和 递归 parentNode 来实现。
- absolute + event (pageY)
tooltip.style.position = 'absolute'; tooltip.style.top = `${e.pageY}px`; tooltip.style.left = `${e.pageX}px`;
- fixed + event (clientY)
tooltip.style.position = 'fixed'; tooltip.style.top = `${e.clientY}px`; tooltip.style.left = `${e.clientX}px`;
- absolute + 递归 offset
const getOffestValue = https://www.it610.com/article/function getOffestValue(el, offsetLeft="offsetLeft"){ if(!el) return 0; return el[offsetLeft] + (getOffestValue(el.offsetParent, offsetLeft) || 0) } tooltip.style.position = 'absolute'; tooltip.style.top = `${getOffestValue(el, 'offsetTop') - 30}px`; tooltip.style.left = `${getOffestValue(el) - 20}px`;
- fixed + getBoundingClientRect
const {x,y} = el.getBoundingClientRect() tooltip.style.position = 'fixed'; tooltip.style.top = `${y - 30}px`; tooltip.style.left = `${x - 30}px`;
- absolute + event (pageY)
可以通过 bus 或者 $emit 抛出。
推荐阅读
- centOS7如何安装MariaDB
- [开源]如何使用goapp写你的后台管理系统_golang
- 员工考勤打卡时,如何避免非本人代替打卡()
- python静态web服务器如何实现
- 跨境电商|跨境电商 2 大技术难题,到底该如何解决()
- 如何做好APP功能测试()
- 如何利用主题分析获得更好的用户体验
- 可穿戴技术(它如何运作以及为什么起作用)
- NFT|“NFT+”模式还在更新 NFT如何影响教育()
- 快讯|雷军称要做业余汽车博主;iPhone关机后仍在运行,或成恶意软件温床;奈飞宣布裁员150人|极客头条