前言
最近逛技术论坛发现了 driver.js 这个库，相信很多人在app中都碰到过功能引导的，这个库就可以用来做这个功能。web段项目很少见到功能引导的，但是用在uniapp 、浏览器插件 中感觉还是十分不错的，因此打算来简单学习一下，防止以后会用到。
文档地址：https://github.com/kamranahmedse/driver.js
官方demo：https://kamranahmed.info/driver.js/
下面只演示最基本的使用，其他见官方示例
安装、使用
安装
npm install driver.js
基本使用
最简单的使用方法是高亮突出一个元素，只要给一个 CSS 选择器即可
<template>
<div>
<div class="test">driver.js的基本使用</div>
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</template>
<script>
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
export default {
mounted() {
const driver = new Driver();
driver.highlight({
element: '.test',
popover: {
title: '这是个标题',
description: '描述：这是一个弹出层',
// 位置支持设置为 left, left-center, left-bottom, top,
// top-center, top-right, right, right-center, right-bottom,
// bottom, bottom-center, bottom-right, mid-center
position: 'top',
// 偏移
offset: 20
}
});
}
};
</script>
<style lang="scss" scoped>
.test {
color: blue;
}
div {
width: 200px;
height: 30px;
}
</style>
多步骤引导
<template>
<div>
<div id="first">第一步</div>
<div id="second">第二步</div>
<div id="third">第三步</div>
</div>
</template>
<script>
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
export default {
mounted() {
const driver = new Driver();
// 定义步骤
driver.defineSteps([
{
element: '#first', // 元素
popover: {
title: '提示',
description: '第一步',
position: 'left'
}
},
{
element: '#second',
popover: {
title: '提示',
description: '第二步',
position: 'top'
}
},
{
element: '#third',
popover: {
title: '提示',
description: '第三步',
position: 'right'
}
}
]);
// 开始引导，参数表示默认开始的标识
driver.start(0);
setTimeout(() => {
// 如果存在下一步
if (driver.hasNextStep()) {
// 移动到下一步
driver.moveNext();
}
}, 500);
setTimeout(() => {
// 如果存在上一步
if (driver.hasPreviousStep()) {
// 移动到下一步
driver.movePrevious();
}
}, 1500);
}
};
</script>
<style lang="scss" scoped>
div {
width: 200px;
height: 30px;
color: blue;
}
</style>
<template>
<div>
<div id="first">第一步</div>
<div id="second">第二步</div>
<div id="third">第三步</div>
</div>
</template>
<script>
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
export default {
mounted() {
const driver = new Driver({
// 不允许点击遮罩关闭
allowClose: false
});
// 定义步骤
driver.defineSteps([
{
element: '#first', // 元素
popover: {
title: '提示',
description: '第一步',
position: 'left'
}
},
{
element: '#second',
popover: {
title: '提示',
description: '第二步',
position: 'top'
}
},
{
element: '#third',
popover: {
title: '提示',
description: '第三步',
position: 'right'
}
}
]);
// 开始引导，参数表示默认开始的标识
driver.start(0);
setTimeout(() => {
// 如果存在下一步
if (driver.hasNextStep()) {
// 移动到下一步
driver.moveNext();
}
}, 500);
setTimeout(() => {
// 如果存在上一步
if (driver.hasPreviousStep()) {
// 移动到下一步
driver.movePrevious();
}
}, 1500);
}
};
</script>
<style lang="scss" scoped>
div {
width: 200px;
height: 30px;
color: blue;
}
</style>
注：电脑上左右健，可以来切换步骤。
常用配置、方法
配置
// 以下的值都是默认值
const driver = new Driver({
animate: true, // 是否开启动画
opacity: 0.75, // 遮罩透明度
padding: 10, // padding
allowClose: true, // 点击遮罩是否可以关闭
overlayClickNext: false, // 点击遮罩进行下一步
doneBtnText: 'Done', // 最后一共按钮的文本
closeBtnText: 'Close', // 关闭按钮的文本
stageBackground: '#ffffff', // 突出元素的背景色
nextBtnText: 'Next', // 下一步按钮的文本
prevBtnText: 'Previous', // 上一步按钮的文本
showButtons: false, // 不显示控制按钮
keyboardControl: true, // 是否允许通过键盘的左右键来控制
scrollIntoViewOptions: {
}, // 滚动视图配置，暂时不知道如何使用
onHighlightStarted: (Element) => {
}, // 元素高亮开始事件
onHighlighted: (Element) => {
}, // 元素高亮事件
onDeselected: (Element) => {
}, // 取消选定事件
onReset: (Element) => {
}, //重置事件
onNext: (Element) => {
}, // 下一步
onPrevious: (Element) => {
}, //上一步
});
定义步骤
const stepDefinition = {
element: '#some-item', // 元素对象，支持类和id
stageBackground: '#ffffff', // 突出框背景色
popover: {
// There will be no popover if empty or not given
className: 'popover-class', // 弹出窗口样式
title: 'Title', // 标题
description: 'Description', // 描述
showButtons: false, // 是否显示按钮
doneBtnText: 'Done',
closeBtnText: 'Close',
nextBtnText: 'Next',
prevBtnText: 'Previous',
},
onNext: () => {
}, // 从当前步骤移动到下一步骤时调用
onPrevious: () => {
}, // 从当前步骤移动到上一步骤时调用
};
常用方法
const driver = new Driver(driverOptions);
// 检查驱动程序是否激活
if (driver.isActivated) {
console.log('Driver is active');
}
// 定义步骤列表
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
driver.start(stepNumber = 0); // 开始执行定义的步骤
driver.moveNext(); // 移动到下一步
driver.movePrevious(); // 移动到上一步
driver.hasNextStep(); // 是否存在下一步
driver.hasPreviousStep(); // 是否存在上一步
// 停止移动
driver.preventMove();
// 使用查询选择器或步骤定义突出显示元素
driver.highlight(string|stepDefinition);
// 重新定位弹出窗口和高亮显示的元素
driver.refresh();
// 重置覆盖并清除屏幕
driver.reset();
// 检查是否有任何突出显示的元素
if(driver.hasHighlightedElement()) {
console.log('There is an element highlighted');
}
// 获取屏幕上当前突出显示的元素
const activeElement = driver.getHighlightedElement();
// 获取最后一个突出显示的元素
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // 获取活动元素的屏幕坐标
activeElement.hidePopover(); // 隐藏弹框
activeElement.showPopover(); // 显示弹框
activeElement.getNode(); // 获取当前突出元素下的dom元素