如何做新人引导功能()

功能点 【如何做新人引导功能()】节前碰到一个需求:「新人引导效果」针对第一次使用平台的用户进行主要功能引导。
具体引导路径为:点击“新增按钮”,对弹出的内容进行解释,并引导用户填充表单,最后提交表单。
下面为效果截图(感兴趣的兄弟们可以自己实现一下,我用的 vue + ElementUI):

  1. 如何做新人引导功能()
    文章图片
  2. 如何做新人引导功能()
    文章图片
  3. 如何做新人引导功能()
    文章图片
  4. 如何做新人引导功能()
    文章图片
我们打工人要的就是效率,我们不生产轮子,我们都是轮子的搬运工。
是否有现成的轮子? 通过搜索引擎来查找解决办法。
  • 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 来实现,但是两个库都有不如意的点。
  1. introjs
    1. http://jsrun.net/ERQKp/edit 新增按钮是好使的,但是弹窗中的 input 无法单击。(也有可能是 elementUI 有毒)
      我最后使用 pointer-events: none; user-select: none; + 引导中状态来自行实现的功能。
    2. 不支持 next 回调,不支持 delay 控制。
      我最后把引导分为了两步来实现,手动实现 delay 逻辑
  2. driver.js
    1. http://jsrun.net/PmQKp/edit 看上去弹窗的时候,层级关系就不对了。我直接就麻了。
当然了,即使这么难,但还是有办法的。introjs 实现案例:http://jsrun.net/KAQKp/edit,虽然兼容性有可能堪忧
拆解功能点 虽然有插件,但是我们也可以了解一下如何实现。我们来拆解一下
  1. 高亮功能&遮罩功能
    1. fixed + z-index 层级
    2. box-shadow
    3. border + 位移
  2. 获取元素位置方便定位
  3. 上一步、下一步等回调方便处理逻辑。
高亮功能&遮罩功能
如何做新人引导功能()
文章图片

https://jsrun.net/cRQKp/edit
可以看到基本能满足,但是底部还是可单击的。而且并没有分层。

通过增加遮罩层来实现分层功能,这样就可以阻止事件了。https://jsrun.net/duQKp/edit
但是这里还是有一个问题的。z-index 不能超过父级。所以我们需要增加多个层,来规避这个问题。
获取元素位置 popper 定位
popper 的功能我们可以使用一些三方库来实现
  1. popper.js
    https://jsrun.net/duQKp/edit 很快我们就实现了想要的功能。
  2. 自己通过 offsetParent 和 递归 parentNode 来实现。
    1. absolute + event (pageY)
      tooltip.style.position = 'absolute'; tooltip.style.top = `${e.pageY}px`; tooltip.style.left = `${e.pageX}px`;

    2. fixed + event (clientY)
      tooltip.style.position = 'fixed'; tooltip.style.top = `${e.clientY}px`; tooltip.style.left = `${e.clientX}px`;

    3. 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`;

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

    推荐阅读