一个有关前端页面/用户向导的技术问题,绞尽脑汁想了半天,头晕脑胀,特来请教一下大家 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
yazoox

一个有关前端页面/用户向导的技术问题,绞尽脑汁想了半天,头晕脑胀,特来请教一下大家

  •  
  •   yazoox 2023 年 9 月 8 日 1749 次点击
    这是一个创建于 951 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我们的产品使用的是 react + typescript 开发的 web app/前端页面。

    产品中,经常会需要在页面中间弹出一个 dialog (当然,这个都是 div 等元素合成的),已经实现了。PM 想针对这个 dialog ,制作产品向导(product tour)。于是我 google 了一把,还好,现在有一些成熟的工具。

    但是 PM 的要求很不一般,不是开屏杀。而是需要用户操作到某一个页面后,比如,打开了某个 dialog ,针对这个 dialog 上面几个组件,比如,input text, list ,ok button ,等等,做三个页面向导(还是很花里胡哨的向导,我找到的工具,基本上向导里的都是纯 text ,还不能使用 react 定制页面,要么就是要收费的,比如 intro.js )。然后,等用户点击了 ok button ,切换到另外一个页面/dialog ,再制作几个向导。

    所以,研究了几个工具,貌似都不太好实现。所以特意来请教一下大家。看看没有什么思路。

    • 自己写?针对某个页面上的元素,在它的旁边弹一个 float 在最上面的窗口,有没有比较好用的库。(或者搜索关键字是有没有推荐)
    • 或者有没有 包/库 能够实现这个需求,我没有找到的?
    • 或者现在的包就够用,我的思路有问题?

    等等...

    谢谢大家

    p.s.
    https://www.chameleon.io/blog/Javascript-product-tours
    https://userguiding.com/blog/react-onboarding-tour/
    https://blog.bitsrc.io/7-awesome-Javascript-web-app-tour-libraries-6b5d220fb862

    xomix
        1
    xomix  
       2023 年 9 月 8 日
    你们 pm 是不是想要国产哪种点着点着一个视频看完不再出现的哪种提示?
    SimonTart
        2
    SimonTart  
       2023 年 9 月 8 日   2
    https://driverjs.com/ 你需要这个
    790002517zzy
        3
    790002517zzy  
       2023 年 9 月 8 日 via Android   1
    这个比 2 楼那个更好用,二楼那个层级老是有问题,回调也少
    https://github.com/josias-r/boarding.js
    yazoox
        4
    yazoox  
    OP
       2023 年 9 月 8 日
    @SimonTart 这个好像比前面我自己找到的几个强大一些。但是,所以这些 tour ,都只能渲染一段 text ,我需要的渲染的一个页面到 tour 里面去。
    driver.js ,好像可以定制 dom ,不知道能否搞定。我试试吧......
    万分感谢
    gkinxin
        5
    gkinxin  
       2023 年 9 月 8 日
    @yazoox #4 antd5 也有 tour ,是可以渲染页面
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     3408 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 39ms UTC 10:49 PVG 18:49 LAX 03:49 JFK 06:49
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86