如何做新人引导功能？

转载自 SegmentFault

功能点

节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。 具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。

下面为效果截图（感兴趣的兄弟们可以自己实现一下，我用的 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 逻辑

driver.js http://jsrun.net/PmQKp/edit 看上去弹窗的时候，层级关系就不对了。我直接就麻了。

当然了，即使这么难，但还是有办法的。introjs 实现案例：http://jsrun.net/KAQKp/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 = 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`;

回调逻辑

可以通过 bus 或者 $emit 抛出。

原文：SegmentFault