用户引导Driver.js

Driver.js简介

Driver.js 是一个轻量级的、无依赖的JavaScript库，用于引导用户的注意力到页面上的特定元素，可以用来实现页面导览、功能介绍等场景。
GigHub
官方文档

Driver.js特点

• 简单易用：无需任何外部依赖，使用简便。
• 轻量级：压缩后仅5kb，相比其他同类库的12kb+更加小巧。
• 高度自定义：提供强大API，可根据需要灵活使用。
• 任意元素高亮：可以高亮页面上任何一个元素。
• 功能介绍：为你的web应用创建强大的功能引导。
• 焦点引导：为用户提供焦点转移功能。
• 用户友好：全程可通过键盘控制。
• TypeScript编写：采用TypeScript语言开发。
• 跨浏览器一致体验：在所有浏览器中行为一致。
• MIT许可：可用于个人和商业项目。

基本使用

// CDN
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
// npm
npm install driver.js

官方Demo

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '#tour-example', popover: { title: 'Animated Tour Example', description: 'Here is the code example showing animated tour. Let\'s walk you through it.', side: "left", align: 'start' }},
    { element: 'code .line:nth-child(1)', popover: { title: 'Import the Library', description: 'It works the same in vanilla JavaScript as well as frameworks.', side: "bottom", align: 'start' }},
    { element: 'code .line:nth-child(2)', popover: { title: 'Importing CSS', description: 'Import the CSS which gives you the default styling for popover and overlay.', side: "bottom", align: 'start' }},
    { element: 'code .line:nth-child(4) span:nth-child(7)', popover: { title: 'Create Driver', description: 'Simply call the driver function to create a driver.js instance', side: "left", align: 'start' }},
    { element: 'code .line:nth-child(18)', popover: { title: 'Start Tour', description: 'Call the drive method to start the tour and your tour will be started.', side: "top", align: 'start' }},
    { element: 'a[href="/docs/configuration"]', popover: { title: 'More Configuration', description: 'Look at this page for all the configuration options you can pass.', side: "right", align: 'start' }},
    { popover: { title: 'Happy Coding', description: 'And that is all, go ahead and start adding tours to your applications.' } }
  ]
});

driverObj.drive();

覆盖颜色

const driverObj = driver({
  overlayColor: 'red'
});

弹出位置

您可以使用控制弹出框的位置side和align选项。这side选项控制元素的哪一侧将显示弹出窗口，而align选项控制弹出窗口与元素的对齐方式。

/*
side: 'left' | 'top' | 'right' | 'bottom',
align: 'start' | 'center' | 'end'
*/
const driverObj = driver();
driverObj.highlight({
  element: '#left-start',
  popover: {
    title: 'Animated Tour Example',
    description: 'Here is the code example showing animated tour. Let\'s walk you through it.',
    side: "left",
    align: 'start'
  }
});

更改按钮文字

可以使用更改按钮的文本nextBtnText, prevBtnText和doneBtnText选项。

const driverObj = driver({
  nextBtnText: '—›',
  prevBtnText: '‹—',
  doneBtnText: '✕',
  showProgress: true,
  steps: [
    // ...
  ]
});