intro.js、driver.js 进行系统引导

intro.js 和 driver.js 组件都可以进行系统引导，但是个人比较推荐使用 intro.js 组件。

一、使用 intro.js 系统引导组件

1.安装依赖包

npm install intro.js --save // 使用npm安装
yarn add intro.js // 使用yarn安装

2.在文件中引入组件

import introJs from 'intro.js' // introjs库
import 'intro.js/introjs.css' // introjs默认css样式
import 'intro.js/themes/introjs-modern.css' // introjs主题

3.基本使用 - 用法一

（1）基本属性：

• data-step：显示步骤（可选，不设置则默认从第一个开始）
• data-intro：提示信息
• data-title：标题（可选）
• data-position：引导内容显示位置【left,right,top,bottom】（可选）
• data-tooltipClass: 自定义提示层样式（可选）

（2）示例代码：

<div class="v" data-step="1" data-intro="第1步，你好！" style="width: 100px;">我是内容1</div>
<div class="v" data-step="2" data-intro="第2步，你好！" style="width: 100px;">我是内容2</div>
<script type="text/javascript">
    introJs().start();
</script>

（3）指定使用范围：

<div class="v1">
    <div class="v" data-step="1" data-intro="第1步，你好！" style="width: 100px;">我是内容1</div>
    <div class="v" data-step="2" data-intro="第2步，你好！" style="width: 100px;">我是内容2</div>
</div>
<div class="v" data-step="3" data-intro="第3步，你好！" style="width: 100px;">我是内容3</div>
<script type="text/javascript">
    introJs('.v1').start();
</script>

4.基本使用 - 用法二

<div class="v1" style="width: 100px;">我是内容1</div>
<div id="v2" style="width: 100px;">我是内容2</div>
<script type="text/javascript">
  // 引入intro.js
  const intro = new introJs();
  setTimeout(function(){
    intro.setOptions({
      prevLabel: '上一步',
      nextLabel: '下一步',
      skipLabel: '跳过',
      doneLabel: '完成',
      steps: steps
    })
    intro.start()
  })
  // 通过id或者class绑定步骤，也可以直接定死在div上面
  let steps = [{
    title: 'Welcome', // 标题
    intro: 'Hello World!' // 提示信息
  },
  {
    element: '.v1', // 元素
    title: 'Welcome2',
    intro: '步骤1：对应class为.v1的元素进行选择提示!',
    position: 'right' // 位置
  },
  {
    element: '#v2',
    intro: '步骤2：对应Id为#v2的元素进行选择提示!',
    position: 'left'
  }
]
</script>

5.更多 API 参数

（1）这里是更换成中文,默认英文

• prevLabel: ‘上一步’,
• nextLabel: ‘下一步’,
• skipLabel: ‘跳过’,
• doneLabel: ‘完成’,

（2）引导说明框相对高亮说明区域的位置

• tooltipPosition: ‘bottom’,

（3）引导说明文本框的样式

• tooltipClass: ‘intro-tooltip’,

（4）说明高亮区域的样式

• highlightClass: ‘intro-highlight’,

（5）引导说明框相对高亮说明区域的位置

• tooltipPosition: ‘bottom’,

（6）是否使用键盘 Esc 退出

• exitOnEsc: true,

（7）是否允许点击空白处退出

• exitOnOverlayClick: false,

（8）提示边框的 padding

• helperElementPadding: 2,

（9）是否显示说明的数据步骤

• showStepNumbers: false,

（10）是否允许键盘来操作

• keyboardNavigation: true,

（11）是否按键来操作

• showButtons: true,

（12）是否使用点显示进度

• showBullets: false,

（13）是否显示进度条

• showProgress: false,

（14）是否滑动到高亮的区域

• scrollToElement: true,

（15）遮罩层的透明度

• overlayOpacity: 0.9,

（16）当位置选择自动的时候，位置排列的优先级

• positionPrecedence: [‘bottom’, ‘top’, ‘right’, ‘left’],

（17）是否禁止与元素的相互关联

• disableInteraction: false,

（18）是否在第一步隐藏上一步

• hidePrev: true,

（19）是否在最后一步隐藏下一步

• hideNext: true,

（20）steps 步骤，可以写个工具类保存起来

• steps: [],

6.更多事件

（1）点击结束按钮后执行的事件

intro().oncomplete(() => {
  console.log('点击结束按钮后执行的事件')
})

（2）点击跳过按钮后执行的事件

intro().onexit(() => {
  console.log('点击跳过按钮后执行的事件')
})

（3）确认完毕之后执行的事件

intro().onbeforeexit(() => {
  console.log('确认完毕之后执行的事件')
})

7.其他
intro 官网 API：https://introjs.com/docs

二、使用 Driver.js 系统引导组件

1.安装依赖包

yarn add driver.js
npm install driver.js

2.在文件中引入组件

import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

3.基本使用 - 用法一

（1）显示单个元素

const driver = new Driver();
driver.highlight('#create-post');

（2）更多信息

const driver = new Driver();
driver.highlight({
  element: '#element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'left',
    offset: 20,
  }
});

4.基本使用 - 用法二

const driver = new Driver();
// 定义引导步骤
driver.defineSteps([
  {
    element: '#first-element',
    popover: {
      className: 'first-step-popover-class',
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'left'
    }
  },
  {
    element: '#second-element',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'top'
    }
  },
  {
    element: '#third-element',
    popover: {
      title: 'Title on Popover',
      description: 'Body of the popover',
      position: 'right'
    }
  },
]);
// 开始引导步骤
driver.start();

步骤的一些定义：

const stepDefinition = {
  element: '#some-item',       
  stageBackground: '#ffffff',   
  popover: {                    
    className: 'popover-class', 
    title: 'Title',             
    description: 'Description', 
    showButtons: false,         
    doneBtnText: 'Done',        
    closeBtnText: 'Close',      
    nextBtnText: 'Next',        
    prevBtnText: 'Previous',   
  },
  onNext: () => {},             
  onPrevious: () => {},         
};
const driver = new Driver(driverOptions);
driver.defineSteps([
    stepDefinition1,
    stepDefinition2,
    stepDefinition3,
    stepDefinition4,
]);

5.更多 API 参数

const driver = new Driver({
  className: 'scoped-class',        
  animate: true,                    
  opacity: 0.75,                   
  padding: 10,                     
  allowClose: true,                
  overlayClickNext: false,          
  doneBtnText: 'Done',              
  closeBtnText: 'Close',           
  stageBackground: '#ffffff',     
  nextBtnText: 'Next',             
  prevBtnText: 'Previous',          
  showButtons: false,              
  keyboardControl: true,            
  scrollIntoViewOptions: {},        
  onHighlightStarted: (Element) => {}, 
  onHighlighted: (Element) => {},      
  onDeselected: (Element) => {},       
  onReset: (Element) => {},            
  onNext: (Element) => {},                    
  onPrevious: (Element) => {},               
});