持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
在新用户第一次进入系统，或者系统中添加了新功能时，一个简单的新手引导功能对于可以让用户快速了解系统的功能。
有很多插件可以选择，比如Intro.js、vue-guide、vue-tour、driver.js等等...
其中Intro.js是轻量级的（10kB），并且官方文档比较完善，可以快速上手，风格如下：
1. 安装依赖并引入：
安装依赖：
npm install intro.js --save
引入：
import introJs from 'intro.js'
import 'intro.js/introjs.css'
2. 使用方法：
这里有两种方式，如果新手指引内容比较简单并且固定，可以直接将属性写在html标签中，属性如下：
- data-title:标题文字
- data-intro:提示信息内容
<div data-title="Welcome!" data-intro="Hello World! 👋" >
</div>
introJs().start();
3.自定义配置
当页面都有一些特殊化的设置的时候，另外一种方法会更好。需要在JSON自定义配置，属性如下:
- nextLabel: '下一步', // 下一个按钮文字
- prevLabel: '上一步', // 上一个按钮文字
- skipLabel: '跳过', // 跳过按钮文字
- doneLabel: '我知道了', // 完成按钮文字
- hidePrev: true, // 在第一步中是否隐藏上一个按钮
- hideNext: false, // 在最后一步中是否隐藏下一个按钮
- exitOnOverlayClick: false, // 点击叠加层时是否退出介绍
- showStepNumbers: false, // 是否显示红色圆圈的步骤编号
- disableInteraction: true, // 是否禁用点击框住的元素
- showBullets: true, // 是否显示面板的指示点
- tooltipClass: 'tool-tip',//自定义样式class
- steps: [{ }], // 引导框内的相关参数配置,具体如下
introJs()
.setOptions({
steps: [{
title: '欢迎',
intro: '欢迎使用'
},
{
element: document.querySelector('#step2'),
intro: '步骤2...'
}]
}).start()
4. 注意事项
-
element属性中设置的是目标的id或者class，也就是定位到相应的元素位置，如果不设置element，默认显示在屏幕中央。 -
如果涉及到一些其它事件的交互，需要在start()之前执行：
introJs() .onchange(() => { // 点击按钮后执行的事件 }) .oncomplete(() => { // 点击结束按钮后执行的事件 }) .onexit(() => { // 结束后执行的事件 }) -
当需要区分具体点击的是哪一个按钮的时候，参数需要接收两个。第二个参数type表示点击的类型，跳过：'skip'，完成：'done'等等
.oncomplete((targetElement, type) => { if (type === 'done') { ... } -
样式
如果在vue中使用，需要单独写一个
<style>标签放置样式，而不是放在<style scoped lang="scss">，这样不会生效可以直接覆盖原有的样式，也可以设置tooltipClass属性自定义样式类
5. 遇到的问题
在实现的过程中有一个步骤是用户点击【下一步】后，弹出一个窗口并定位到窗口的的元素，查阅文档后发现没有单独的上一步/下一步这些事件，可以使用：
onchange() 、 onbeforechange() 或 onafterchange() 在完成每个步骤后进行回调
但是要注意渲染的顺序问题（会导致定位不到下一步的位置），并且回调函数中不支持vue的写法，要使用原生写法才可以生效
6. 扩展：
- 可以以点击圆点的形式，将提示添加到页面：
html添加属性：
data-hint="Hello! 👋 Click on this link"
data-hint-position="bottom-middle"
然后调用方法：
introJs().addHints();
- API可以满足大部分自定义的需求：
官方指路： introjs.com/docs/intro
