前端需要一个新手指引交互 但是要结合真实的操作 有没有啥好的技术方案？

[lifesimple]

内部系统需要加个新手指引的交互。平时看的这种交互就是对页面上的 dom 上 加 popover 弹框描述每个按钮或者操作的功能，然后下一步(或者我知道了)。如下图

现在的需求是要结合用户实际操作，比如「新建」按钮 用户必须点了该按钮 才会到下一步引导；这种有什么好点的技术实现方案呢？

[Chism]

录个视频完事

[chnwillliu]

事件冒泡，然后在这个引导组件里监听 body ，判断是否点击了要点击的元素，这样就不至于要塞 hook 到实际的业务代码里了。

至于遮罩，现代 CSS 对付这点儿事还是小菜一碟的，mask clip-path 兼容性都很好。

[chnwillliu]

还有记得 prevent 掉 tab 键的默认效果，把用户锁住。

[lifesimple]

@Chism 是啊 我也觉得 做这个功能引导需求成本感觉要比功能本身还花时间 大领导的需求 哎

[Chism]

@lifesimple
看到这种引导都直接关掉，关不掉就快速点击下一步过完，看都不看，很多人都这样

[lifesimple]

@Chism 害 内部系统面向领导编程