### 一、driverjs 插件网址
[https://driverjs.cn/](https://driverjs.cn/)
### 二、安装
运行以下任意一个命令来安装driver.js：
# Using npm
npm install driver.js
# Using pnpm
pnpm install driver.js
# Using yarn
yarn add driver.js或者，您可以使用CDN并在HTML文件中包含脚本：
```html<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"/>```### 三、简单使用
安装完成后，您可以在项目中导入该包。以下示例展示了如何高亮一个元素：
```javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
const driverObj = driver();
driverObj.highlight({
element: "#some-element",
popover: {
title: "Title",
description: "Description"
}
});
```
### 四、配置
#### Driver配置
```javascript
type Config = {
// 要突出显示的步骤数组。你应该通过
// 当您想要设置产品导览时。
steps?: DriveStep[];
// 是否动画化产品导览。(default: true)
animate?: boolean;
// 覆盖的颜色. (default: black)
// 这是有用的，当你有一个黑暗的背景
// 并且想要用灯光突出元素
// 背景颜色。
overlayColor?: string;
// 是否平滑滚动到突出显示的元素. (default: false)
smoothScroll?: boolean;
// 是否允许通过点击背景来关闭弹出窗口. (default: true)
allowClose?: boolean;
// 背景的不透明度. (default: 0.5)
overlayOpacity?: number;
// 突出显示的元素与切口之间的距离. (default: 10)
stagePadding?: number;
// 突出显示的元素周围的切口半径. (default: 5)
stageRadius?: number;
// 是否允许键盘导航. (default: true)
allowKeyboardControl?: boolean;
// 是否禁用与突出显示的元素的交互. (default: false)
disableActiveInteraction?: boolean;
// 如果你想添加自定义类的弹出窗口
popoverClass?: string;
// 弹出窗口和突出显示的元素之间的距离. (default: 10)
popoverOffset?: number;
// 要在弹出窗口中显示的按钮数组。默认为 ["next", "previous", "close"]
// 用于产品导览，[] 用于单个元素的突出显示。.
showButtons?: AllowedButtons[];
// 要禁用的按钮数组。当您想要显示一些按钮，但禁用其中一些。
disableButtons?: AllowedButtons[];
// 是否在弹出窗口中显示进度文本. (default: false)
showProgress?: boolean;
// 进度文本模板。您可以在模板中使用以下占位符:
// - {{current}}: 当前步数
// - {{total}}: 总步数
progressText?: string;
// 要显示在按钮中的文本. doneBtnText
// 用于游览的最后一步
nextBtnText?: string;
prevBtnText?: string;
doneBtnText?: string;
// 在弹出窗口渲染后调用。
// PopoverDOM是一个对象，它引用了弹出窗口的DOM元素，如按钮标题、描述、主体、容器等。
onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
// 在突出显示每个步骤之前和之后运行的钩子。每个钩子接收以下内容
// 参数:
// - element: 步骤的目标DOM元素
// - step: 为该步骤配置的步骤对象
// - options.config: 当前配置选项
// - options.state: driver 的当前状态
onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
// 在驱动程序被销毁前后运行的钩子。每个钩子接收以下参数:
// - element: 当前有效元素
// - step: 为当前活动配置的步骤对象
// - options.config: 当前配置选项
// - options.state: driver 的当前状态
onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
// 在按钮点击时运行的钩子。每个钩子接收以下参数:
// - element: 步骤的当前DOM元素
// - step: 为该步骤配置的步骤对象
// - options.config: 当前配置选项
// - options.state: driver 的当前状态
onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
};
```
#### 弹出框配置
弹出框是Driver.js的主要UI元素。它是突出显示目标元素并显示步骤内容的元素。您可以全局配置弹出框，也可以按步骤配置。以下是一些可用的配置选项。
```javascript
type Popover = {
// 标题和描述显示在弹出窗口.
// 您可以在其中使用HTML。另外，您可以省略其中一个而只显示另一个。
title?: string;
description?: string;
// The position and alignment of the popover
// relative to the target element.
side?: "top" | "right" | "bottom" | "left";
align?: "start" | "center" | "end";
// 要在弹出窗口中显示的按钮数组。
// 当突出显示单个元素时，默认情况下没有按钮。当显示游览时，默认按钮是 "next",
// "previous" 和 "close".
showButtons?: ("next" | "previous" | "close")[];
// 要禁用的按钮数组。当您想要显示某些按钮，但要禁用其中一些按钮时，这很有用。
disableButtons?: ("next" | "previous" | "close")[];
// 要显示在按钮中的文本。‘ doneBtnText ’用于游览的最后一步。
nextBtnText?: string;
prevBtnText?: string;
doneBtnText?: string;
// 是否在弹出窗口中显示进度文本。
showProgress?: boolean;
// 进度文本模板。您可以在模板中使用以下占位符:
// - {{current}}: 当前步数
// - {{total}}: 总步数
// 如果‘ showProgress ’为true，默认如下：:
// - "{{current}} of {{total}}"
progressText?: string;
// 要添加到弹出窗口元素的自定义类。
// 这可以用来设置弹出窗口的样式。
popoverClass?: string;
// 钩子在弹出窗口渲染后运行。
// 你可以在这里修改popover元素。
// 参数是一个对象，它引用了弹出窗口的DOM元素，如按钮标题、描述、主体等。.
onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
// 按钮点击的回调。您可以使用它们向按钮添加自定义行为.
// 每个回调接收以下参数:
// - element: 步骤的当前DOM元素
// - step: 为该步骤配置的步骤对象
// - options.config: 当前配置选项
// - options.state: driver 的当前状态
onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
}
```
#### 步骤配置
步骤配置是传递highlight方法drive方法steps数组的配置对象。您可以为每个步骤配置弹出框和目标元素。以下是一些可用的配置选项。
```javascript
type DriveStep = {
// 要突出显示的目标元素。
// 它可以是一个DOM元素，也可以是一个CSS选择器。
// 如果这是一个选择器，第一个匹配的元素将被突出显示。
element: Element | string;
// 此步骤的弹出窗口配置。
// 查看弹出窗口配置部分
popover?: Popover;
// 当前步骤被取消选中，即将突出显示或突出显示时回调。
// 每个回调接收以下参数:
// - element: 步骤的当前DOM元素
// - step: 为该步骤配置的步骤对象
// - options.config: 当前配置选项
// - options.state: driver 的当前状态
onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
}
```
#### 状态
您可以通过调getState方法来访问driver的当前状态。它也会传递给钩子和回调函数。
```javascript
type State = {
// 驱动程序当前是否活动
isInitialized?: boolean;
// 如果将当前活动步骤用作产品游览并且已配置步骤数组，则该步骤的索引。
activeIndex?: number;
// 当前活动步骤的DOM元素
activeElement?: Element;
// 当前活动步骤的步骤对象
activeStep?: DriveStep;
// 先前活动的DOM元素
previousElement?: Element;
// 先前活动步骤的步骤对象
previousStep?: DriveStep;
// 弹出窗口的DOM元素，包括容器、标题、描述、按钮等。
popover?: PopoverDOM;
}
```