什么是引导页,就是引导用户对一些新功能使用说明UI展示。
遇到这种需求,一般的想法是:
- 有没有办法可以快速实现
- 有时间对其背后原理研究一番
快速接入
按照常用框架Vue
React
原生js
进行分类,罗列一些开源比较好的框架使用。
Vue
vue-tour
vue-tour 适用于Vue2,
Vue Tour是一个轻量级、简单且可定制的导游插件,可与Vue.js一起使用。它提供了一种快速而简单的方法来指导用户完成您的应用程序。
使用方法:
1 |
|
React
React的生态比较丰富,插件也比较多,google React Tour就可以找到很多,下面罗列一下github上star较多的几个
- react-joyride:使用方便快捷的引导页插件
- reactour: 功能更加丰富的React引导组件,分成好几种组件:
@reactour/tour
@reactour/mask
@reactour/popover
@reactour/utils
等
原生js
原生js实现的引导页插件,比较有名有driver.js、intro.js和shepherd.js
driver.js
driver.js
是一个强大而轻量级的普通 JavaScript 引擎,可在整个页面上驱动用户的注意力,只有 4kb 左右的体积,并且没有外部依赖,不仅高度可定制,还可以支持所有主流浏览器。
github地址: driver.js
使用demo教程:
1 | import Driver from 'driver.js'; |
intro.js
intro.js
是是一个开源的 vanilla Javascript/CSS 库,用于添加分步介绍或提示,大小在 10kB左右,属于轻量级的且无外部依赖。
github地址: intro.js
使用demo教程:
1 | import introJs from 'intro.js' |
shepherd.js
shepherd.js
包含的 API 众多,大多场景都可以通过其对应的配置得到,缺点就是整体的包体积较大,并且配置也比较复杂,配置复杂的内容一般都需要进行二次封装,将可变和不可变的配置项进行抽离
github地址: shepherd.js
使用demo教程:
1 | import Shepherd from 'shepherd.js'; |
实现原理
引导页从它展示方式说起,要实现可以分为以下几个步骤:
- 高亮部分,通过
el.cloneNode(true)
复制元素节点,将节点复制到蒙层 - 引导部分,展示引导框,并将引导框与高亮部分进行定位
- 过度动画,通过设置
transition
实现 - 页面监听,当页面发生变化的时候,引导页需要重新渲染计算
具体实现可以点击查看源码tour.js。
参考资料
- 本文作者: Qborfy
- 本文链接: https://www.qborfy.com/today/20230103.html
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!