V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
yamedie
V2EX  ›  分享创造

由于经常要向用户介绍本次更新了哪些特性,于是做了一个 guideline 前端组件

  •  
  •   yamedie · 2022-02-28 20:35:48 +08:00 · 2083 次点击
    这是一个创建于 1006 天前的主题,其中的信息可能已经有所发展或是发生改变。

    由于经常要向用户介绍本次更新了哪些特性,于是做了一个 guideline 前端组件

    发现一个挺好的名字没被占用,就叫它 web-assistant

    实现那种黑色遮罩层+聚光灯式的步骤演示,让用户自己一步一步点击将所有步骤看完

    demo

    除了 guideline 以外,还做了类似轮播图式的“intro 组件”,以及纯遮罩层和吐司,都集成在这同一个库,接下来还想做一个“意见反馈组件”也集成进去

    在 npm 开源了,地址是 https://www.npmjs.com/package/web-assistant

    demo 页面由于人比较懒,没有做得很花哨(简陋到可怕),但 show code 那里通过 function.toString()和 window.eval()的方式,做了个好玩的代码编辑器效果,算是个丐版的 codepen 吧

    其实开发到半途看到intro.js这个库了,但感觉它跟我想要的不太一样,还是坚持把轮子造完了,实现了自己想要的效果。onNext 如果传入 async function 可以做很多酷炫的操作,比如用户一路点击“下一步”,页面自动填写完表单并提交。由于用了 async/await ,虽然最终提交成功的 dom 对象在一开始并不存在,但最后仍能将它高亮给用户看,整个过程很像 puppeteer 那种感觉。

    组件用 svelte 开发的,我最近一年很迷 svelte (虽然自己用得并不很熟练),觉得它特别适合用来开发 web components

    依赖了 html2canvas 这个库,大部分场景应该没问题,如果高亮的内容里包含跨域图片也许会翻车吧

    6 条回复    2022-07-26 16:59:25 +08:00
    vsitebon
        1
    vsitebon  
       2022-02-28 20:45:25 +08:00
    正好可以参考看看 svelte 当组件的写法
    qq316107934
        2
    qq316107934  
       2022-02-28 20:49:59 +08:00
    rv54ntjwfm3ug8
        3
    rv54ntjwfm3ug8  
       2022-02-28 21:01:31 +08:00
    感觉不如文档读起来舒服
    rioshikelong121
        4
    rioshikelong121  
       2022-03-01 14:20:49 +08:00
    你这个库功能也太多了。toast 都提供了。
    yamedie
        5
    yamedie  
    OP
       2022-03-08 17:59:05 +08:00
    Feedback 功能终于也完成了~
    yamedie
        6
    yamedie  
    OP
       2022-07-26 16:59:25 +08:00
    append: 又增加了一个 cursor 功能(玩具向), 可以在界面中显示一个假的鼠标指针, 从指定的起点滑动到终点
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2619 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:34 · PVG 18:34 · LAX 02:34 · JFK 05:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.