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