由于经常要向用户介绍本次更新了哪些特性，于是做了一个 guideline 前端组件
yamedie · 2022-02-28 20:35:48 +08:00 · 1871 次点击这是一个创建于 780 天前的主题，其中的信息可能已经有所发展或是发生改变。
由于经常要向用户介绍本次更新了哪些特性，于是做了一个 guideline 前端组件
发现一个挺好的名字没被占用，就叫它 web-assistant
实现那种黑色遮罩层+聚光灯式的步骤演示，让用户自己一步一步点击将所有步骤看完
除了 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 这个库，大部分场景应该没问题，如果高亮的内容里包含跨域图片也许会翻车吧
 |
1
vsitebon 2022-02-28 20:45:25 +08:00
正好可以参考看看 svelte 当组件的写法
|
 |
2
qq316107934 2022-02-28 20:49:59 +08:00
|
 |
3
rv54ntjwfm3ug8 2022-02-28 21:01:31 +08:00
感觉不如文档读起来舒服
|
 |
4
rioshikelong121 2022-03-01 14:20:49 +08:00
你这个库功能也太多了。toast 都提供了。
|
 |
5
yamedie OP Feedback 功能终于也完成了~
|
|
6
yamedie OP append: 又增加了一个 cursor 功能(玩具向), 可以在界面中显示一个假的鼠标指针, 从指定的起点滑动到终点
|
Select Language