Driver.js 的技術(shù)特性
Driver.js是一個功能強大且高度可定制的基于原生JavaScript開發(fā)的新用戶引導(dǎo)庫。它沒有依賴項，支持所有主要瀏覽器。
簡單：簡單易用，完全沒有外部依賴
高度可定制：有一個強大的api，可以用于你希望突出顯示任何內(nèi)容
高亮顯示：頁面功能介紹上的任意元素(字面上的任意)
功能介紹：為你的web應(yīng)用程序創(chuàng)建強大的功能介紹
焦點移位器：為用戶友好添加焦點移位器
用戶友好：通過鍵盤行為控制一切
一致行為：所有瀏覽器(包括著名的IE)都可以使用
MIT聲明：免費用于個人和商業(yè)用途
使用場景
1、用戶第一次打開應(yīng)用，對界面不夠熟悉，或者作為一個創(chuàng)新型的產(chǎn)品，大部分用戶沒有類似的使用經(jīng)驗。
2、相對成熟的應(yīng)用進行一次較大的版本改動，UI 布局有比較大的改變，需要引導(dǎo)來告知用戶。
一、安裝
yarn add driver.js
npm install driver.js
也可以在線或本地直接引入，需要注意要同時引入 CSS 文件：
<link rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/driver.js/0.9.8/driver.min.js"></script>
二、引入
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
三、使用方法（進行連續(xù)的指引）
簡單示例一
image.png
<template>
<div class="test-guide">
<h1>測試driver.js</h1>
<el-button id="guide-ele" type="primary">我是第一步</el-button>
</div>
</template>
<script setup>
import "./driver.min.js";
import "./driver.min.css";
import { onMounted } from "vue";
function showTips() {
const driver = new Driver();
driver.highlight({
element: "#guide-ele",
stageBackground: "#ffa0a0",
popover: {
title: "溫馨提示",
description: "這是本站的首頁",
position: "bottom",
className: "first-step",
},
});
}
onMounted(() => {
showTips();
});
</script>
簡單示例二
image.png
<template>
<div class="test-guide">
<h1>測試driver.js</h1>
<el-button id="first-element-introduction" type="primary"
>我是第一步</el-button
>
<el-button
id="second-element-introduction"
type="primary"
style="margin-top: 40px"
>我是第二步</el-button
>
<el-button
id="third-element-introduction"
type="primary"
style="margin-top: 140px"
>我是第三步</el-button
>
</div>
</template>
<script setup>
import "./driver.min.js";
import "./driver.min.css";
import { onMounted } from "vue";
function showTips() {
const driver = new Driver();
driver.defineSteps([
{
element: "#first-element-introduction",
popover: {
className: "first-step-popover-class",
title: "我是第一步",
description: "Body of the popover",
position: "left",
},
},
{
element: "#second-element-introduction",
popover: {
title: "我是第二步",
description: "Body of the popover",
position: "top",
},
},
{
element: "#third-element-introduction",
popover: {
title: "我是第三步",
description: "Body of the popover",
position: "right",
},
},
]);
driver.start();
}
onMounted(() => {
showTips();
});
</script>
steps選項
const stepDefinition = {
element: '#some-item', // 需要被高亮的查詢選擇器字符或Node。 Query selector string or Node to be highlighted
popover: { // 如果為空將不會顯示彈窗There will be no popover if empty or not given
className: 'popover-class', // 除了Driver選項中的通用類名稱之外，還可以指定包裹當(dāng)前指定步驟彈窗的類名 className to wrap this specific step popover in addition to the general className in Driver options
title: 'Title', // 彈窗的標(biāo)題 Title on the popover
description: 'Description', // 彈窗的主體內(nèi)容 Body of the popover
showButtons: false, // 是否在底部顯示控制按鈕 Do not show control buttons in footer
closeBtnText: 'Close', // 關(guān)閉按鈕的文本 Text on the close button for this step
nextBtnText: 'Next', // 當(dāng)前步驟的下一步按鈕文本 Next button text for this step
prevBtnText: 'Previous', // 當(dāng)前步驟的上一步按鈕文本 Previous button text for this step
}
};
Driver 選項
const driver = new Driver({
className: 'scoped-class', //包裹driver.js彈窗的類名 className to wrap driver.js popover
animate: true, // 高亮元素改變時是否顯示動畫 Animate while changing highlighted element
opacity: 0.75, //背景透明度(0 表示只有彈窗并且沒有遮罩) Background opacity (0 means only popovers and without overlay)
padding: 10, // 元素與邊緣的距離 Distance of element from around the edges
allowClose: true, // 是否允許點擊遮罩時關(guān)閉 Whether clicking on overlay should close or not
overlayClickNext: false, //是否允許點擊遮罩時移到到下一步 Should it move to next step on overlay click
doneBtnText: 'Done', // 最終按鈕上的文本 Text on the final button
closeBtnText: 'Close', // 當(dāng)前步驟關(guān)閉按鈕上的文本 Text on the close button for this step
nextBtnText: 'Next', //當(dāng)前步驟下一步按鈕上的文本 Next button text for this step
prevBtnText: 'Previous', // 當(dāng)前步驟上一步按鈕上的文本 Previous button text for this step
showButtons: false, //是否在底部顯示控制按鈕 Do not show control buttons in footer
keyboardControl: true, // 是否允許通告鍵盤控制(escape關(guān)閉，箭頭鍵用于移動)Allow controlling through keyboard (escape to close, arrow keys to move)
scrollIntoViewOptions: {}, // `scrollIntoView()` 方法的選項 We use `scrollIntoView()` when possible, pass here the options for it if you want any
onHighlightStarted: (Element) {}, // 元素開將要高亮?xí)r調(diào)用Called when element is about to be highlighted
onHighlighted: (Element) {}, // 元素開完全高亮?xí)r調(diào)用Called when element is fully highlighted
onDeselected: (Element) {}, // 取消選擇時調(diào)用 Called when element has been deselected
onReset: (Element) {}, // 遮罩將要關(guān)閉時調(diào)用 Called when overlay is about to be cleared
onNext: (Element) => {}, // 任何步驟中移到到下一步時調(diào)用Called when moving to next step on any step
onPrevious: (Element) => {}, // 任何步驟中移到到上一步時調(diào)用Called when moving to next step on any step
});
API方法
const isActivated = driver.isActivated; // 檢查driver是否激活Checks if the driver is active or not
driver.moveNext(); // 移動到步驟列表中的下一步 Moves to next step in the steps list
driver.movePrevious(); // 移動到步驟列表中的上一步 Moves to previous step in the steps list
driver.start(stepNumber = 0); // 從指定的步驟開始 Starts driving through the defined steps
driver.highlight(string|stepDefinition); // 高亮通過查詢選擇器指定的或步驟定義的元素 highlights the element using query selector or the step definition
driver.reset(); // 重置遮罩并且清屏Resets the overlay and clears the screen
driver.hasHighlightedElement(); //檢查是否有高亮元素 Checks if there is any highlighted element
driver.hasNextStep(); // 檢查是否有可移動到的下一步元素 Checks if there is next step to move to
driver.hasPreviousStep(); // 檢查是否有可移動到的上一步元素。Checks if there is previous step to move to
driver.preventMove();// 阻止當(dāng)前移動。如果要執(zhí)行某些異步任務(wù)并手動移動到下一步，則在“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
const activeElement = driver.getHighlightedElement();// 獲取屏幕上當(dāng)前高亮元素 Gets the currently highlighted element on screen
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // 獲取活動元素的屏幕坐標(biāo)Gets screen co-ordinates of the active element
activeElement.hidePopover(); // 隱藏彈窗Hide the popover
activeElement.showPopover(); // 顯示彈窗Show the popover
activeElement.getNode(); // 獲取此元素后面的DOM元素Gets the DOM Element behind this element
你可以使用各種各樣的選項來實現(xiàn)你想要的一切。You can use a variety of options to achieve whatever you may want.
