2
页面分步引导组件Driver.js
source link: https://www.leixuesong.com/3507
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
页面分步引导组件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文件
<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';
import 'driver.js/dist/driver.min.css';
2、Driver.js基本用法。
a、单个节点高亮显示
const driver = new Driver();
driver.highlight('#element');
driver.highlight('#element');
b、高亮和弹出框
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
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,//位移大小
}
});
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、设置分步引导介绍功能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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.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的讲解。是不是很简单，很炫酷？赶紧用起来吧，让你的用户在使用你的产品时，更快更好的上手吧！
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK