Vue 页面引导效果 driver.js

引导页效果

Driver.js -Demo 是一个指南性质的库
访问GitHub

Driver 的使用

1、安装依赖包

npm install driver.js
或
yarn add driver.js

2、main.js 引入并将方法挂载到 vue 原型上

// 导入文件
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';

// 将方法写入到 Vue 原型上
Vue.prototype.$driver = new Driver({
	doneBtnText: '完成', // 最后一个按钮的文本
  	closeBtnText: '关闭', // 关闭按钮文本
  	stageBackground: '#f60', // 高亮显示的元素的背景色
  	nextBtnText: '下一步', // 下一步
  	prevBtnText: '上一步', // 上一步
})

3、在需要引导的页面中定义引导函数

// 引导规则较多建议以单文件引入
this.$nextTick(() => {
	const driverStep = [
		{
			element: "#step01",
			popover: {
				title: "用户信息",
				description: "描述信息",
				position: "top"
			}
		}
	]
	this.$driver.defineSteps(driverStep); 
	this.$driver.start(); // 启动
})

API 实例参数

const driver = new Driver({
	// 设置提示框的 className, 默认 ''
  	className: 'scoped-class',
  	// 是否设置动画, 默认 true
  	animate: true,
  	// 背景不透明度（0表示只有弹出框，没有覆盖）
  	opacity: 0.75,
  	// 元素与边缘周围的距离
  	padding: 10,
  	// 点击遮罩层是否关闭, 默认 true
  	allowClose: true,
  	// 点击遮罩层进行下一步提示
  	overlayClickNext: false, 
  	doneBtnText: '结束',  
  	closeBtnText: '关闭',
  	// 高亮显示的元素的背景色
  	stageBackground: '#ffffff',
  	nextBtnText: '下一步',
  	prevBtnText: '上一步',
  	// 是否显示控制按钮，默认为 true [ ture显示/false隐藏 ]
  	showButtons: false,
  	// 允许通过键盘进行控制（ESC退出关闭，左右箭头键移动）
  	keyboardControl: true,
  	scrollIntoViewOptions: {},
  	// 当元素即将高亮显示时调用
  	onHighlightStarted: (Element) => {},
  	// 当元素完全高亮显示时调用
  	onHighlighted: (Element) => {},
  	// 取消选择元素时调用
  	onDeselected: (Element) => {},
  	// 将要清除覆盖时调用
  	onReset: (Element) => {},
  	// 移动到下一步骤时调用
  	onNext: (Element) => {},
  	// 移动到上一步骤时调用
  	onPrevious: (Element) => {},
});

步骤定义 API

步骤配置主要用在 defineSteps 和 highlight 方法上

// 配置说明
const stepDefinition = {
	// 高亮元素
  	element: '#some-item',
  	// 高亮显示的元素的背景色
  	stageBackground: '#ffffff',
  	popover: {
    	className: 'popover-class',
    	title: '弹窗标题',
    	description: '步骤描述内容',
    	// 是否显示控制按钮，默认为 true [ ture显示/false隐藏 ]
    	showButtons: false,
    	doneBtnText: '结束',
    	closeBtnText: '关闭',
    	nextBtnText: '下一步',
    	prevBtnText: '上一步',
  		/**弹窗显示的位置
  		 * left, left-center, left-bottom, 
  		 * top, top-center, top-right, 
  		 * right, right-center, right-bottom, 
  		 * bottom, bottom-center, bottom-right, 
  		 * mid-center
  		 */
    	position: 'left',
  	},
  	// 从当前步骤移动到下一步时调用
  	onNext: () => {},
  	// 从当前步骤移动到上一步时调用
  	onPrevious: () => {},
};

// 设置单个元素
driver.highlight(stepDefinition)

// 设置分步指南
driver.defineSteps([
	stepDefinition1,
	stepDefinition2,
	stepDefinition3
])

可用方法 API

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();

// 阻止当前移动。如果需要，可在“onNext”或“onPrevious”中使用
// 执行一些异步任务并手动移动到下一步
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(); 

// 获取此元素后面的DOM元素
activeElement.getNode();