内部系统需要加个新手指引的交互。平时看的这种交互就是对页面上的 dom 上 加 popover 弹框描述每个按钮或者操作的功能,然后下一步(或者我知道了)。如下图
现在的需求是要结合用户实际操作,比如「新建」按钮 用户必须点了该按钮 才会到下一步引导;这种有什么好点的技术实现方案呢?
1
Chism 2022-04-24 20:22:46 +08:00 via Android
录个视频完事
|
2
chnwillliu 2022-04-24 20:43:32 +08:00 via Android
事件冒泡,然后在这个引导组件里监听 body ,判断是否点击了要点击的元素,这样就不至于要塞 hook 到实际的业务代码里了。
至于遮罩,现代 CSS 对付这点儿事还是小菜一碟的,mask clip-path 兼容性都很好。 |
3
chnwillliu 2022-04-24 20:48:23 +08:00 via Android
还有记得 prevent 掉 tab 键的默认效果,把用户锁住。
|
4
lifesimple OP @Chism 是啊 我也觉得 做这个功能引导需求成本感觉要比功能本身还花时间 大领导的需求 哎
|
5
Chism 2022-04-25 10:50:23 +08:00
@lifesimple
看到这种引导都直接关掉,关不掉就快速点击下一步过完,看都不看,很多人都这样 |
6
lifesimple OP @Chism 害 内部系统面向领导编程
|