.guide-modal{position:fixed;z-index:999;left:0;right:0;顶部：0；底部：0；背景色：rgba(0,0,0,0.3);}.guide-box{宽度：150px;最小高度：10px；边界半径：5px；背景色：#fff；位置：绝对；过渡：0.5s；填充：10px；text-align:center;}.btn{margin:20px5px5px5px;}前言随着应用功能越来越多，繁多详尽的功能使用和文档已经不能满足时代追求速度的需求，而引导页面（或分步指南）的精髓在于simplify简化核心功能，以更简单、更短、更清晰的文字引导用户使用相应的功能，尤其是对于ToB项目。各种新的功能需求迭代非常快，难免需要引导页的功能来快速帮助用户引导。接下来，我们将从两个方面着重介绍一下【前端引导页】：有哪些第三方库可以直接使用快捷实现功能？如何自己实现前端引导页的功能？第三方库的选型如果你不知道如何进行技术选型，可以看看山岳老师的这篇文章。在前端，如何做出更好的技术选型？，下面简单列举几个相关库进行简单介绍，具体需求具体分析选择，其他和API使用，具体实现效果可以通过官方文档或者对应的README.md查看。vue-tourvue-tour是一款轻量级、简单且可定制的Tour插件。配置比较简单明了，但是只适用于Vue2项目。具体效果请参考上一链接中的相应内容。driver.jsdriver.js是一个强大的轻量级通用JavaScript引擎，可以在整个页面上驱动用户的注意力，大小只有4kb左右，并且没有外部依赖，不仅高度可定制，而且支持所有主流浏览器设备。shepherd.jsshepherd.js包含了很多API，大部分场景都可以通过其对应的配置获取。缺点是整体封装体积比较大，配置也比较复杂。一般复杂的配置内容需要打包两次，将可用的可变和不可变配置项提取出来，具体效果可以查看其官方文档。intro.jsintro.js是一个开源的vanillaJavascript/CSS库，用于添加分步介绍或提示。大小约为10kB。它是轻量级的，没有外部依赖。详情参见官方文档。实现引导页功能引导页的核心功能其实就是两点：一是高亮部分，二是引导部分。这两点其实并不难做到。引导部分无非是随着高亮部分一起移动，加上一些简单的动画或者过渡效果就可以了，也分为遮罩层引导和非遮罩层引导。这里有一个比较复杂的蒙版层指导。下面简单介绍两种简单的实现方案。cloneNode+position+transition的核心实现：高亮部分通过el.cloneNode(true)复制对应的目标元素节点，并将clone节点加入mask层并通过margin()实现clone节点与目标节点的位置ortranslate,position等）重合引导部分通过position:fixed实现定位效果，通过动态修改left和top属性实现引导弹窗跟随目标移动。转场动画通过转场实现位置的平滑移动。当页面位置/内容发生变化时（如：resize、scroll事件），需要重新计算位置信息缺点：需要对目标节点进行深度复制，无法边引导边实现运行效果。演示：核心代码：//核心配置参数constselectors=[{selector:"#btn1",message:"点击这里【新增】数据！",},{selector:"#btn2",message:"注意[删除]数据！”，}，{选择器：“#btn3”，消息：“您可以通过此按钮[修改]数据！”,},{selector:"#btn4",message:"一键【完成】所有操作！",},];//Guide.vue{{消息}}
上一步下一步
