V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
lifesimple
V2EX  ›  问与答

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

  •  
  •   lifesimple · 2022-04-24 17:46:01 +08:00 · 870 次点击
    这是一个创建于 705 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    6 条回复    2022-04-25 11:07:37 +08:00
    Chism
        1
    Chism  
       2022-04-24 20:22:46 +08:00 via Android
    录个视频完事
    chnwillliu
        2
    chnwillliu  
       2022-04-24 20:43:32 +08:00 via Android
    事件冒泡,然后在这个引导组件里监听 body ,判断是否点击了要点击的元素,这样就不至于要塞 hook 到实际的业务代码里了。

    至于遮罩,现代 CSS 对付这点儿事还是小菜一碟的,mask clip-path 兼容性都很好。
    chnwillliu
        3
    chnwillliu  
       2022-04-24 20:48:23 +08:00 via Android
    还有记得 prevent 掉 tab 键的默认效果,把用户锁住。
    lifesimple
        4
    lifesimple  
    OP
       2022-04-25 10:18:51 +08:00
    @Chism 是啊 我也觉得 做这个功能引导需求成本感觉要比功能本身还花时间 大领导的需求 哎
    Chism
        5
    Chism  
       2022-04-25 10:50:23 +08:00
    @lifesimple
    看到这种引导都直接关掉,关不掉就快速点击下一步过完,看都不看,很多人都这样
    lifesimple
        6
    lifesimple  
    OP
       2022-04-25 11:07:37 +08:00
    @Chism 害 内部系统面向领导编程
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2786 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:04 · PVG 23:04 · LAX 08:04 · JFK 11:04
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.