Tour 组件聚焦效果的实现

Tour 组件 这个组件就是用来做引导流程的，首先他会聚焦到某个目标元素上，高亮这个元素，再出现气泡指导用户点击下一步，具体的效果可以参考 Antd 的 Tour。 就这么一个功能简单的组件，它却有着多种实现方法，每一种都让人觉得“脑洞大开”。 第一种方法 - 拼图 Antd 以及阿里云（好像用的也是 Antd）中这个组件都是通过 4 个遮罩实现的，参考下图： 先找到按钮的位置（通过 getBoundingClientRect 等），然后做 4 个遮罩，把按钮包围，遮罩之间无缝拼接，看起来就...