页面分步引导组件Driver.js

最新推荐文章于 2025-07-01 16:02:32 发布

30年后世界会是怎样

最新推荐文章于 2025-07-01 16:02:32 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：大前端

原文链接：https://www.leixuesong.com/3507

大前端专栏收录该内容

16 篇文章

订阅专栏

Driver.js是一款轻量级且功能丰富的JavaScript引擎，用于创建页面元素的分步引导介绍和高亮显示，支持所有主流浏览器。通过简单的API，即可实现元素高亮、弹出框和分步引导介绍等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Driver.js是一个轻量级（约4kb gzip），并且无任何依赖，但功能强大的JavaScript引擎。Driver.js可以提高用户对页面的关注度，，也可以创建强大的分步引导介绍功能，号召性用语组件，焦点移位器等。更重要的是Driver.js支持所有的主流浏览器。

1、Driver.js安装，可以使用script标签引入，也可以使用npm安装，import引入。
a、在html文件中用script标签引入driver.min.css文件和driver.min.js文件

 <script src="/dist/driver.min.js"></script>

b、使用npm install driver.js，然后在文件中import导入。这样就可以很好的和Vue结合一起使用了。

npm install driver.js

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

2、Driver.js基本用法。
a、单个节点高亮显示

const driver = new Driver();
driver.highlight('#element');

b、高亮和弹出框

const driver = new Driver();
driver.highlight({
element: '#element',
popover: {
title: '弹窗标题',//也可以使用HTML标签
description: '弹窗内容',//也可以使用HTML标签
position: 'bottom',//位置，可选值： left, left-center, left-bottom, top, top-center, top-right, right, right-center, right-bottom, bottom, bottom-center, bottom-right, mid-center
offset: 20,//位移大小
}
});

c、设置分步引导介绍功能

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

以上是雷雪松对Driver.js的讲解。是不是很简单，很炫酷？赶紧用起来吧，让你的用户在使用你的产品时，更快更好的上手吧！