关于javascript:如何做新人引导功能

节前碰到一个需要：「新人疏导成果」针对第一次应用平台的用户进行次要性能疏导 。
具体疏导门路为：点击“新增按钮”，对弹出的内容进行解释，并疏导用户填充表单，最初提交表单。

上面为成果截图（感兴趣的兄弟们能够本人实现一下，我用的 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
1. http://jsrun.net/ERQKp/edit 新增按钮是好使的，然而弹窗中的 input 无奈单击。(也有可能是 elementUI 有毒)
  我最初应用 pointer-events: none;user-select: none; + 疏导中状态来自行实现的性能。
2. 不反对 next 回调，不反对 delay 管制。
  我最初把疏导分为了两步来实现，手动实现 delay 逻辑
driver.js
1. http://jsrun.net/PmQKp/edit 看上去弹窗的时候，层级关系就不对了。我间接就麻了。

当然了，即便这么难，但还是有方法的。introjs 实现案例：http://jsrun.net/KAQKp/edit，尽管兼容性有可能堪忧。

尽管有插件，然而咱们也能够理解一下如何实现。咱们来拆解一下

高亮性能 & 遮罩性能
1. fixed + z-index 层级
2. box-shadow
3. border + 位移
获取元素地位不便定位
上一步、下一步等回调不便解决逻辑。

https://jsrun.net/cRQKp/edit
能够看到根本能满足，然而底部还是可单击的。而且并没有分层。

通过减少遮罩层来实现分层性能，这样就能够阻止事件了。https://jsrun.net/duQKp/edit

然而这里还是有一个问题的。z-index 不能超过父级。所以咱们须要减少多个层，来躲避这个问题。

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 抛出。

关于javascript:如何做新人引导功能

性能点

是否有现成的轮子？

通过搜索引擎来查找解决办法。

常见插件

实现

拆解性能点

高亮性能 & 遮罩性能

获取元素地位 popper 定位

回调逻辑