【driver.js】 轻量库 实现引导页面
driver.js 引导功能
Driver.js 是一个强大的,轻量级,使用原生 JavaScript 引擎开发的库,用于在页面聚焦用户的关注点。它支持所有主流浏览器,并且可高度自定义。
一、引入
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
二、初始化参数
const guide = () => {
const driver: Driver = new Driver({
// className来包装驱动程序。js弹出窗口
// className to wrap driver.js popover
className: 'scoped-class',
// 更改亮显元素时设置动画
// Animate while changing highlighted element
animate: true,
// 背景不透明度(0表示仅弹出窗口,没有覆盖)
// Background opacity (0 means only popovers and without overlay)
opacity: 0.75,
// 元件与边缘周围的距离
// Distance of element from around the edges
padding: 10,
// 单击覆盖是否应关闭
// Whether clicking on overlay should close or not
allowClose: true,
// 如果移动到覆盖上的下一步,请单击
// Should it move to next step on overlay click
overlayClickNext: false,
// 最后一个按钮上的文本
// Text on the final button
doneBtnText: 'Done',
// 此步骤关闭按钮上的文本
// Text on the close button for this step
closeBtnText: 'Close',
// 此步骤的下一个按钮文本
// Next button text for this step
nextBtnText: 'Next',
// 此步骤的上一个按钮文本
// Previous button text for this step
prevBtnText: 'Previous',
// 不在页脚中显示控制按钮
// Do not show control buttons in footer
showButtons: false,
// 允许通过键盘进行控制(退出以关闭,箭头键移动)
// Allow controlling through keyboard (escape to close, arrow keys to move)
keyboardControl: true,
// 如果可能,我们使用“scrollIntoView()”,如果需要,请将其选项传递给此处
// We use `scrollIntoView()` when possible, pass here the options for it if you want any
scrollIntoViewOptions: {},
// 当元素将被突出显示时调用
// Called when element is about to be highlighted
onHighlightStarted: (Element) {},
// 当元素完全突出显示时调用
// Called when element is fully highlighted
onHighlighted: (Element) {},
// 取消选择元素时调用
// Called when element has been deselected
onDeselected: (Element) {},
// 在即将清除覆盖时调用
// Called when overlay is about to be cleared
onReset: (Element) {},
// 在任何步骤上移动到下一步骤时调用
// Called when moving to next step on any step
onNext: (Element) => {},
// 在任何步骤上移动到下一步骤时调用
// Called when moving to next step on any step
onPrevious: (Element) => {},
});
driver.defineSteps(steps);
driver.start();
};
三、步骤参数
const steps = [
{
// 要突出显示的查询选择器字符串或节点
// Query selector string or Node to be highlighted
element: '#some-item',
// 如果为空或未给出,则不会弹出窗口
// There will be no popover if empty or not given
popover: {
// className to wrap this specific step popover in addition to the general className in Driver options
className: 'popover-class',
// 弹出窗口上的标题
// Title on the popover
title: 'Title',
// 主要描述内容
// Body of the popover
description: 'Description',
// 不在页脚中显示控制按钮
// Do not show control buttons in footer
showButtons: false,
// 此步骤关闭按钮上的文本
// Text on the close button for this step
closeBtnText: 'Close',
// 此步骤的下一个按钮文本
// Next button text for this step
nextBtnText: 'Next',
// 此步骤的上一个按钮文本
// Previous button text for this step
prevBtnText: 'Previous',
},
{
element: "#breadcrumb",
popover: {
title: "Breadcrumb",
description: "Indicate the current page location",
position: "right"
}
},
...
];
四、支持的方法
const driver = new Driver(driverOptions);
// 检查驱动程序是否激活
// Checks if the driver is active or not
const isActivated = driver.isActivated;
// 移至步骤列表中的下一步
// Moves to next step in the steps list
driver.moveNext();
// 移至步骤列表中的上一步
// Moves to previous step in the steps list
driver.movePrevious();
// 开始执行定义的步骤
// Starts driving through the defined steps
driver.start(stepNumber = 0);
// 使用查询选择器或步骤定义突出显示元素
// highlights the element using query selector or the step definition
driver.highlight(string|stepDefinition);
// 重置覆盖并清除屏幕
// Resets the overlay and clears the screen
driver.reset();
// 检查是否有任何突出显示的元素
// Checks if there is any highlighted element
driver.hasHighlightedElement();
// 检查是否有下一步要移动
// Checks if there is next step to move to
driver.hasNextStep();
// 检查是否有上一步要移动到
// Checks if there is previous step to move to
driver.hasPreviousStep();
// 防止当前移动。如果需要,可在“onNext”或“onPrevious”中使用
// Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// 执行一些异步任务并手动转到下一步
// perform some asynchronous task and manually move to next step
driver.preventMove();
// 获取屏幕上当前突出显示的元素
// Gets the currently highlighted element on screen
const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
// 获取活动元素的屏幕坐标
// Gets screen co-ordinates of the active element
activeElement.getCalculatedPosition();
// 隐藏弹出窗口
// Hide the popover
activeElement.hidePopover();
// 显示弹出窗口
// Show the popover
activeElement.showPopover();
// 获取此元素后面的DOM元素
// Gets the DOM Element behind this element
activeElement.getNode();
五、简单的示例
<el-button @click.prevent.stop="guide">打开引导页️</el-button>
// guide 为打开引导页的方法
const guide = () => {
const driver: Driver = new Driver({
allowClose: false,
doneBtnText: "结束",
closeBtnText: "关闭",
nextBtnText: "下一步",
prevBtnText: "上一步"
});
driver.defineSteps(steps);
driver.start();
};
const steps = [
{
element: "#collapseIcon",
popover: {
title: "Collapse Icon",
description: "Open && Close sidebar",
position: "right"
}
},
{
element: "#breadcrumb",
popover: {
title: "Breadcrumb",
description: "Indicate the current page location",
position: "right"
}
},
{
element: "#assemblySize",
popover: {
title: "Switch Assembly Size",
description: "Switch the system size",
position: "left"
}
},
{
element: "#language",
popover: {
title: "Switch Language",
description: "Switch the system language",
position: "left"
}
},
{
element: "#searchMenu",
popover: {
title: "Page Search",
description: "Page search, quick navigation",
position: "left"
}
},
{
element: "#themeSetting",
popover: {
title: "Setting theme",
description: "Customize settings theme",
position: "left"
}
},
{
element: "#message",
popover: {
title: "Message Notification",
description: "Can receive company information",
position: "left"
}
},
{
element: "#fullscreen",
popover: {
title: "Full Screen",
description: "Full Screen, Exit The Full Screen Page",
position: "left"
}
}
];
洗尽铅华始见金,褪去浮华归本真