【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"
		}
	}
];