8月21日打卡day23 - 申小兮 - 沸点 - 掘金

1年前

8月21日打卡day23
今日学习：不使用第三方库怎么实现【前端引导页】功能
1、第三方库的选择
①vue-tour：轻量级、简单且可自定义的 Tour 插件，只适用于 Vue2 的项目
②driver.js：强大而轻量级的普通 JavaScript 引擎，没有外部依赖，不仅高度可定制，还可以支持所有主流浏览器
③shepherd.js：包含的 API 众多，大多场景都可以通过其对应的配置得到
缺点整体的包体积较大，并且配置也比较复杂，配置复杂的内容一般都需要进行二次封装，将可变和不可变的配置项进行抽离
④intro.js：开源的 vanilla Javascript/CSS 库，用于添加分步介绍或提示，属于轻量级的且无外部依赖
2、蒙层引导
①cloneNode + position + transition：高亮【margin、tranlate、position】、引导【position: fixed】、过渡【transition 位置的平滑移动】
页面的位置/内容发生变化时（如：resize、scroll 事件），需要重新计算位置信息

②z-index + position + transition：高亮【z-index】、引导【position: fixed】、过渡【transition位置的平滑移动】
页面位置/内容发生变化时（如：resize、scroll 事件），需要重新计算位置信息
以上两种方式的代码思路：
通过computed计算属性，获取当前message
↓
监听页面位置/内容变化吗，变化则执行genGuide
↓
函数内删除上一个子元素，确定指引，获取目标节点信息，克隆节点，计算新的位置
↓
监听上一步/下一步按钮事件
3、总结
两种方式各自的缺点
①cloneNode + position + transition：目标节点需要深度复制，不能实现边引导边操作
②z-index + position + transition：存在z-index无法超过蒙层，可以通过shepherd.js的svg解决

展开

青训营-快乐出发