页面分步引导组件Driver.js
在Web开发的时候，无意中发现了一下页面分步引导组件Driver.js。Driver.js是一个轻量级（约4kb gzip），并且无任何依赖，但功能强大的JavaScript引擎。Driver.js可以提高用户对页面的关注度，，也可以创建强大的分部引导介绍功能，号召性用语组件，焦点移位器等。更重要的是Driver.js支持所有的主流浏览器。下面雷雪松就详细的介绍一下页面分步引导组件Driver.js的用法。
1、Driver.js安装，可以使用script标签引入，也可以使用npm安装，import引入。
a、在html文件中用script标签引入driver.min.css文件和driver.min.js文件
[cc lang=”html” escaped=”true”] <script src=”/dist/driver.min.js”></script>[/cc]
b、使用npm install driver.js，然后在文件中import导入。这样就可以很好的和Vue结合一起使用了。
[cc lang=”javascript” escaped=”true”]npm install driver.js[/cc]
[cc lang=”javascript” escaped=”true”]import Driver from ‘driver.js’;
import ‘driver.js/dist/driver.min.css’;[/cc]
2、Driver.js基本用法。
a、单个节点高亮显示
[cc lang=”javascript”]const driver = new Driver();
driver.highlight(‘#element’);[/cc]
b、高亮和弹出框
[cc lang=”javascript” ]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,//位移大小
}
});[/cc]
c、设置分步引导介绍功能
[cc lang=”javascript” ]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();[/cc]
以上是雷雪松对Driver.js的讲解。是不是很简单，很炫酷？赶紧用起来吧，让你的用户在使用你的产品时，更快更好的上手吧！