遇到需求前的功能节点：“新人引导效果”为初次使用平台的用户引导主要功能。具体引导路径为：点击“添加按钮”，解释弹窗内容，引导用户填写表单，最后提交表单。下面是效果截图（有兴趣的兄弟可以自己实现，我用的是vue+ElementUI）：我们工人要的是效率，我们不生产轮子，我们都是推轮子的。有现成的轮子吗？使用搜索引擎寻找解决方案。github搜索结果认为没有搜索结果百度搜索结果常用插件introjsvue-introjsdriver.jshttp://bootstraptour.com/api/https://github.com/pulsardev/...https://github.com/shipshapec...https://github.com/zurb/joyride实现我试过introjs和driver.js，最后用introjs实现，但是这两个库都有不满意的地方。introjshttp://jsrun.net/ERQKp/edit新的按钮很好用，但是在弹窗输入无法点击。（也有可能是elementUI有毒）我最后使用pointer-events:none;user-select:none;+引导状态来自己实现功能。不支持下次回调，不支持延时控制。最后我把引导分成两步来实现，手动实现了延迟逻辑driver.jshttp://jsrun.net/PmQKp/edit弹出窗口的时候好像层级关系不对。我顿时麻木了。当然，就算这么难，还是有办法的。Introjs实现案例：http://jsrun.net/KAQKp/edit，虽然兼容性可能会令人担忧。反汇编功能点虽然有插件，但是我们也可以学习如何实现。我们把高亮函数&遮罩函数fixed+z-indexlevelbox-shadowborder+displacement拆解得到元素的位置方便定位上一步、下一步等回调方便处理逻辑。高亮功能&遮罩功能https://jsrun.net/cRQKp/edit可以看到基本满足了，但是底部还是可以点击的。而且不分层。分层功能是通过添加遮罩层来实现的，这样就可以遮挡事件。https://jsrun.net/duQKp/edit但是这里还是有问题。z-index不能超过父级。所以我们需要添加多层来规避这个问题。获取元素位置popper定位popper的功能我们可以使用一些第三方库来实现popper.jshttps://jsrun.net/duQKp/edit很快我们就实现了想要的功能。通过offsetParent和递归parentNode自己实现。绝对+事件(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+递归offsetconstgetOffestValue=functiongetOffestValue(el,offsetLeft="offsetLeft"){if(!el)return0;返回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+getBoundingClientRectconst{x,y}=el.getBoundingClientRect()tooltip.style.position='fixed';tooltip.style.top=`${y-30}px`;tooltip.style.left=`${x-30}px`;回调发送可以通过bus或者$emit抛出。
