vue如何使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢?/h1>
更新時(shí)間:2023年03月08日 15:13:26 作者:凱小默
driver.js 是一個(gè)輕量級(jí)、無(wú)依賴(lài)的原生JavaScript引擎,在整個(gè)頁(yè)面中驅(qū)動(dòng)用戶(hù)的注意力,強(qiáng)大的、高度可定制的原生JavaScript引擎,無(wú)外部依賴(lài),支持所有主流瀏覽器,這篇文章主要介紹了vue如何使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢?需要的朋友可以參考下
介紹
https://github.com/kamranahmedse/driver.js
driver.js
是一個(gè)輕量級(jí)、無(wú)依賴(lài)的原生JavaScript引擎,在整個(gè)頁(yè)面中驅(qū)動(dòng)用戶(hù)的注意力,強(qiáng)大的、高度可定制的原生JavaScript引擎,無(wú)外部依賴(lài),支持所有主流瀏覽器。
安裝
npm install driver.js

使用
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
突出顯示單個(gè)元素
const driver = new Driver();
driver.highlight('#create-post');
高亮和彈出窗口
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
}
});
定位彈出窗口
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
// position can be left, left-center, left-bottom, top,
// top-center, top-right, right, right-center, right-bottom,
// bottom, bottom-center, bottom-right, mid-center
position: 'left',
}
});
還可以使用offset屬性為彈窗位置添加偏移量
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
position: 'bottom',
// Will show it 20 pixels away from the actual position of popover
// You may also provide the negative values
offset: 20,
}
});
創(chuàng)建功能介紹
功能介紹在新用戶(hù)入門(mén)時(shí)很有用,可以讓他們了解應(yīng)用程序的不同部分。您可以使用驅(qū)動(dòng)程序無(wú)縫創(chuàng)建它們。定義步驟,并在你想開(kāi)始展示時(shí)調(diào)用start。用戶(hù)將能夠使用鍵盤(pán)或使用彈出窗口上的按鈕來(lái)控制步驟。
const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
className: 'first-step-popover-class',
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
}
},
{
element: '#second-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'top'
}
},
{
element: '#third-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'right'
}
},
]);
// Start the introduction
driver.start();
異步操作
對(duì)于轉(zhuǎn)換步驟之間的任何異步操作,可以將執(zhí)行延遲到操作完成。你所要做的就是在 onNext
或 onPrevious
回調(diào)函數(shù)中使用driver.preventMove()
停止過(guò)渡,并使用 driver.moveNext()
手動(dòng)初始化它。這是一個(gè)示例實(shí)現(xiàn),它將在第二步停止4秒鐘,然后進(jìn)入下一步。
const driver = new Driver();
// Define the steps for introduction
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'left'
}
},
{
element: '#second-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'top'
},
onNext: () => {
// Prevent moving to the next step
driver.preventMove();
// Perform some action or create the element to move to
// And then move to that element
setTimeout(() => {
driver.moveNext();
}, 4000);
}
},
{
element: '#third-element-introduction',
popover: {
title: 'Title on Popover',
description: 'Body of the popover',
position: 'right'
}
},
]);
// Start the introduction
driver.start();
配置
const driver = new Driver({
className: 'scoped-class', // 封裝driver.js彈窗的類(lèi)名
animate: true, // 是否進(jìn)行動(dòng)畫(huà)
opacity: 0.75, // 背景不透明度(0表示只有彈窗,沒(méi)有覆蓋層)
padding: 10, // 元素到邊緣的距離
allowClose: true, // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉
overlayClickNext: false, // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動(dòng)
doneBtnText: 'Done', // final按鈕文本
closeBtnText: 'Close', // 關(guān)閉按鈕文本
stageBackground: '#ffffff', // 高亮元素背后的舞臺(tái)背景顏色
nextBtnText: 'Next', // 下一步按鈕文本
prevBtnText: 'Previous', // 前一步按鈕文本
showButtons: false, // 在頁(yè)腳不顯示控制按鈕
keyboardControl: true, // 允許通過(guò)鍵盤(pán)控制(esc鍵關(guān)閉,箭頭鍵移動(dòng))
scrollIntoViewOptions: {}, // 如果可能的話(huà),我們使用`scrollIntoView()`,如果你想要任何選項(xiàng),在這里傳遞
onHighlightStarted: (Element) => {}, // 當(dāng)元素將要高亮?xí)r調(diào)用
onHighlighted: (Element) => {}, // 當(dāng)元素完全高亮?xí)r調(diào)用
onDeselected: (Element) => {}, // 當(dāng)元素被取消選擇時(shí)調(diào)用
onReset: (Element) => {}, // 當(dāng)覆蓋層即將被清除時(shí)調(diào)用
onNext: (Element) => {}, // 當(dāng)移動(dòng)到下一個(gè)步驟時(shí)調(diào)用
onPrevious: (Element) => {}, // 在任何步驟中移動(dòng)到上一步時(shí)調(diào)用
});
定義步驟
定義步驟時(shí)可以傳遞的一組選項(xiàng) defineSteps 或傳遞給 highlight 方法的對(duì)象:
const stepDefinition = {
element: '#some-item', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn)
stageBackground: '#ffffff', // 這將覆蓋在驅(qū)動(dòng)程序中設(shè)置的
popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗
className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口
title: 'Title', // popover 標(biāo)題
description: 'Description', // popover 描述
showButtons: false, // 在頁(yè)腳不顯示控制按鈕
doneBtnText: 'Done', // 最后一個(gè)按鈕文本
closeBtnText: 'Close', // 關(guān)閉按鈕文本
nextBtnText: 'Next', // 下一個(gè)按鈕文本
prevBtnText: 'Previous', // 上一個(gè)按鈕文本
},
onNext: () => {}, // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
onPrevious: () => {}, // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
};
突出顯示單個(gè)元素時(shí)的效果
const driver = new Driver(driverOptions);
driver.highlight(stepDefinition);
創(chuàng)建一個(gè)分步指南:
const driver = new Driver(driverOptions);
driver.defineSteps([
stepDefinition1,
stepDefinition2,
stepDefinition3,
stepDefinition4,
]);
API方法
下面是可用的方法集:
const driver = new Driver(driverOptions);
// 檢查driver是否激活
if (driver.isActivated) {
console.log('Driver is active');
}
// 在步驟指南中,可以調(diào)用以下方法
driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
driver.start(stepNumber = 0); // 定義開(kāi)始步驟
driver.moveNext(); // 移動(dòng)到“步驟”列表中的下一步
driver.movePrevious(); // 移動(dòng)到“步驟”列表中的上一步
driver.hasNextStep(); // 檢查是否有下一步要移動(dòng)
driver.hasPreviousStep(); // 檢查是否有要移動(dòng)到的上一個(gè)步驟
// 阻止當(dāng)前移動(dòng),如果你想,可以在`onNext`或`onPrevious`中使用,執(zhí)行一些異步任務(wù),然后手動(dòng)切換到下一步
driver.preventMove();
// 使用查詢(xún)選擇器或步驟定義突出顯示元素
driver.highlight(string|stepDefinition);
// 重新定位彈出窗口并突出顯示元素
driver.refresh();
// 重置覆蓋層并清空屏幕
driver.reset();
// 另外,你可以傳遞一個(gè)布爾參數(shù)
// 立即清除,不做動(dòng)畫(huà)等
// 在你運(yùn)行的時(shí)候可能有用
// driver程序運(yùn)行時(shí)的不同實(shí)例
driver.reset(clearImmediately = false);
// 檢查是否有高亮的元素
if(driver.hasHighlightedElement()) {
console.log('There is an element highlighted');
}
// 獲取屏幕上當(dāng)前高亮顯示的元素,would be an instance of `/src/core/element.js`
const activeElement = driver.getHighlightedElement();
// 獲取最后一個(gè)高亮顯示的元素, would be an instance of `/src/core/element.js`
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); // 獲取活動(dòng)元素的屏幕坐標(biāo)
activeElement.hidePopover(); // 隱藏彈出窗口
activeElement.showPopover(); // 顯示彈出窗口
activeElement.getNode(); // 獲取這個(gè)元素后面的DOM元素
別忘了給觸發(fā) driver 的 click 綁定添加 e.stopPropagation()
。
實(shí)戰(zhàn)
下面是我實(shí)現(xiàn)的一個(gè) vue 的 demo,用的 driver.js
是 0.9.8
。
<template>
<div class='driver-demo'>
<div class="btn" @click="handleClick">向?qū)е敢?lt;/div>
<!-- 上 -->
<div id="step-item-1" class="top">
<h2>上面部分</h2>
<section>生活不過(guò)是一片混亂,充滿(mǎn)了各種可笑的、齷齪的事情,它只能給人們提供笑料,但是他笑的時(shí)候卻禁不住滿(mǎn)心哀傷。</section>
</div>
<!-- 右 -->
<div id="step-item-2" class="right">
<h2>右邊部分</h2>
<section>
月亮是那崇高而不可企及的夢(mèng)想,六便士是為了生存不得不賺取的卑微收入 。多少人只是膽怯地抬頭看一眼月亮,又繼續(xù)低頭追逐賴(lài)以溫飽的六便士?
</section>
</div>
<!-- 下 -->
<div id="step-item-3" class="bottom">
<h2>下邊部分</h2>
<section>我用盡了全力,過(guò)著平凡的一生。</section>
</div>
<!-- 左 -->
<div id="step-item-4" class="left">
<h2>左邊部分</h2>
<section>夢(mèng)想什么時(shí)候開(kāi)始都不晚。</section>
</div>
<!-- 中 -->
<div id="step-item-5" class="center">
<h2>中間部分</h2>
<section>
我們每個(gè)人生在世界上都是孤獨(dú)的……盡管身體互相依傍卻并不在一起,既不了解別人也不能為別人所了解。
</section>
</div>
</div>
</template>
<script>
// 引入資源
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
export default {
name: 'DriverDemo',
data () {
return {
driverOptions: {
className: 'kaimo-driver', // 封裝driver.js彈窗的類(lèi)名
animate: true, // 是否進(jìn)行動(dòng)畫(huà)
opacity: 0.5, // 背景不透明度(0表示只有彈窗,沒(méi)有覆蓋層)
padding: 20, // 元素到邊緣的距離
allowClose: true, // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉
overlayClickNext: false, // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動(dòng)
doneBtnText: '確定', // final按鈕文本
closeBtnText: '我知道了', // 關(guān)閉按鈕文本
stageBackground: '#fff', // 高亮元素背后的舞臺(tái)背景顏色
nextBtnText: '下一步', // 下一步按鈕文本
prevBtnText: '上一步', // 前一步按鈕文本
showButtons: true, // 在頁(yè)腳不顯示控制按鈕
keyboardControl: true, // 允許通過(guò)鍵盤(pán)控制(esc鍵關(guān)閉,箭頭鍵移動(dòng))
scrollIntoViewOptions: {}, // 如果可能的話(huà),我們使用`scrollIntoView()`,如果你想要任何選項(xiàng),在這里傳遞
onHighlightStarted: (Element) => {}, // 當(dāng)元素將要高亮?xí)r調(diào)用
onHighlighted: (Element) => {}, // 當(dāng)元素完全高亮?xí)r調(diào)用
onDeselected: (Element) => {}, // 當(dāng)元素被取消選擇時(shí)調(diào)用
onReset: (Element) => {}, // 當(dāng)覆蓋層即將被清除時(shí)調(diào)用
onNext: (Element) => {}, // 當(dāng)移動(dòng)到下一個(gè)步驟時(shí)調(diào)用
onPrevious: (Element) => {}, // 在任何步驟中移動(dòng)到上一步時(shí)調(diào)用
}
};
},
methods: {
handleClick(e) {
// 阻止點(diǎn)擊事件進(jìn)一步傳播,不加的話(huà)指引打開(kāi)會(huì)關(guān)閉
e.stopPropagation();
// 初始化
const driver = new Driver(this.driverOptions);
// 自定義幾個(gè)步驟
driver.defineSteps([
this.stepDefinition1(),
this.stepDefinition2(),
this.stepDefinition3(),
this.stepDefinition4(),
this.stepDefinition5(),
]);
// 開(kāi)始進(jìn)行向?qū)?,默認(rèn)從0開(kāi)始也就是步驟1,也可以自己調(diào)整其他步驟(0可以不寫(xiě))
driver.start(0);
},
stepDefinition1() {
return {
element: '#step-item-1', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn)
// stageBackground: '#ffffff', // 這將覆蓋在驅(qū)動(dòng)程序中設(shè)置的
popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗
className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口
title: '步驟1', // popover 標(biāo)題
description: '這是步驟1的向?qū)枋?, // popover 描述
// showButtons: true, // 在頁(yè)腳不顯示控制按鈕
// doneBtnText: 'Done', // 最后一個(gè)按鈕文本
// closeBtnText: 'Close', // 關(guān)閉按鈕文本
// nextBtnText: 'Next', // 下一個(gè)按鈕文本
// prevBtnText: 'Previous', // 上一個(gè)按鈕文本
},
onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
console.log("步驟1:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
console.log("步驟1:onPrevious");
},
};
},
stepDefinition2() {
return {
element: '#step-item-2', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗
className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口
title: '步驟2', // popover 標(biāo)題
description: '這是步驟2的向?qū)枋?, // popover 描述
position: 'left-center'
},
onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
console.log("步驟2:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
console.log("步驟2:onPrevious");
},
};
},
stepDefinition3() {
return {
element: '#step-item-3', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗
className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口
title: '步驟3', // popover 標(biāo)題
description: '這是步驟3的向?qū)枋?, // popover 描述
},
onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
console.log("步驟3:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
console.log("步驟3:onPrevious");
},
};
},
stepDefinition4() {
return {
element: '#step-item-4', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗
className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口
title: '步驟4', // popover 標(biāo)題
description: '這是步驟4的向?qū)枋?, // popover 描述
position: 'right-center'
},
onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
console.log("步驟4:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
console.log("步驟4:onPrevious");
},
};
},
stepDefinition5() {
return {
element: '#step-item-5', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗
className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口
title: '步驟5', // popover 標(biāo)題
description: '這是步驟5的向?qū)枋?, // popover 描述
},
onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用
console.log("步驟5:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用
console.log("步驟5:onPrevious");
},
};
}
},
};
</script>
<style lang="scss" scoped>
.driver-demo {
position: relative;
text-align: center;
background-color: #eee;
padding: 40px;
.btn {
width: 100px;
height: 48px;
line-height: 48px;
border: 1px solid purple;
background-color: plum;
border-radius: 4px;
cursor: pointer;
}
.top {
position: absolute;
top: 0;
left: 400px;
width: 300px;
height: 140px;
background-color: silver;
}
.right {
position: absolute;
top: 60px;
right: 0;
width: 200px;
height: 300px;
background-color: salmon;
}
.bottom {
position: absolute;
bottom: 200px;
left: 400px;
width: 200px;
height: 100px;
background-color: skyblue;
}
.left {
position: absolute;
top: 50%;
left: 0;
width: 300px;
height: 70px;
background-color: seagreen;
}
.center {
margin: 330px auto;
width: 400px;
height: 100px;
background-color: sandybrown;
}
}
</style>
效果
實(shí)現(xiàn)的功能向?qū)е敢Ч缦拢?/p>

到此這篇關(guān)于vue里使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢奈恼戮徒榻B到這了,更多相關(guān)vue項(xiàng)目功能向?qū)е敢齼?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
-
vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程——table組件源碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2023-04-04
-
Vue infinite update loop的問(wèn)題解決
這篇文章主要介紹了Vue "...infinite update loop..."的問(wèn)題解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧 2019-04-04
-
vue.js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2020-05-05
-
Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧 2023-07-07
-
Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪 2022-08-08
最新評(píng)論
介紹
https://github.com/kamranahmedse/driver.js
driver.js
是一個(gè)輕量級(jí)、無(wú)依賴(lài)的原生JavaScript引擎,在整個(gè)頁(yè)面中驅(qū)動(dòng)用戶(hù)的注意力,強(qiáng)大的、高度可定制的原生JavaScript引擎,無(wú)外部依賴(lài),支持所有主流瀏覽器。
安裝
npm install driver.js
使用
import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css';
突出顯示單個(gè)元素
const driver = new Driver(); driver.highlight('#create-post');
高亮和彈出窗口
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', } });
定位彈出窗口
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', // position can be left, left-center, left-bottom, top, // top-center, top-right, right, right-center, right-bottom, // bottom, bottom-center, bottom-right, mid-center position: 'left', } });
還可以使用offset屬性為彈窗位置添加偏移量
const driver = new Driver(); driver.highlight({ element: '#some-element', popover: { title: 'Title for the Popover', description: 'Description for it', position: 'bottom', // Will show it 20 pixels away from the actual position of popover // You may also provide the negative values offset: 20, } });
創(chuàng)建功能介紹
功能介紹在新用戶(hù)入門(mén)時(shí)很有用,可以讓他們了解應(yīng)用程序的不同部分。您可以使用驅(qū)動(dòng)程序無(wú)縫創(chuàng)建它們。定義步驟,并在你想開(kāi)始展示時(shí)調(diào)用start。用戶(hù)將能夠使用鍵盤(pán)或使用彈出窗口上的按鈕來(lái)控制步驟。
const driver = new Driver(); // Define the steps for introduction driver.defineSteps([ { element: '#first-element-introduction', popover: { className: 'first-step-popover-class', title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // Start the introduction driver.start();
異步操作
對(duì)于轉(zhuǎn)換步驟之間的任何異步操作,可以將執(zhí)行延遲到操作完成。你所要做的就是在 onNext
或 onPrevious
回調(diào)函數(shù)中使用driver.preventMove()
停止過(guò)渡,并使用 driver.moveNext()
手動(dòng)初始化它。這是一個(gè)示例實(shí)現(xiàn),它將在第二步停止4秒鐘,然后進(jìn)入下一步。
const driver = new Driver(); // Define the steps for introduction driver.defineSteps([ { element: '#first-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'left' } }, { element: '#second-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'top' }, onNext: () => { // Prevent moving to the next step driver.preventMove(); // Perform some action or create the element to move to // And then move to that element setTimeout(() => { driver.moveNext(); }, 4000); } }, { element: '#third-element-introduction', popover: { title: 'Title on Popover', description: 'Body of the popover', position: 'right' } }, ]); // Start the introduction driver.start();
配置
const driver = new Driver({ className: 'scoped-class', // 封裝driver.js彈窗的類(lèi)名 animate: true, // 是否進(jìn)行動(dòng)畫(huà) opacity: 0.75, // 背景不透明度(0表示只有彈窗,沒(méi)有覆蓋層) padding: 10, // 元素到邊緣的距離 allowClose: true, // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉 overlayClickNext: false, // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動(dòng) doneBtnText: 'Done', // final按鈕文本 closeBtnText: 'Close', // 關(guān)閉按鈕文本 stageBackground: '#ffffff', // 高亮元素背后的舞臺(tái)背景顏色 nextBtnText: 'Next', // 下一步按鈕文本 prevBtnText: 'Previous', // 前一步按鈕文本 showButtons: false, // 在頁(yè)腳不顯示控制按鈕 keyboardControl: true, // 允許通過(guò)鍵盤(pán)控制(esc鍵關(guān)閉,箭頭鍵移動(dòng)) scrollIntoViewOptions: {}, // 如果可能的話(huà),我們使用`scrollIntoView()`,如果你想要任何選項(xiàng),在這里傳遞 onHighlightStarted: (Element) => {}, // 當(dāng)元素將要高亮?xí)r調(diào)用 onHighlighted: (Element) => {}, // 當(dāng)元素完全高亮?xí)r調(diào)用 onDeselected: (Element) => {}, // 當(dāng)元素被取消選擇時(shí)調(diào)用 onReset: (Element) => {}, // 當(dāng)覆蓋層即將被清除時(shí)調(diào)用 onNext: (Element) => {}, // 當(dāng)移動(dòng)到下一個(gè)步驟時(shí)調(diào)用 onPrevious: (Element) => {}, // 在任何步驟中移動(dòng)到上一步時(shí)調(diào)用 });
定義步驟
定義步驟時(shí)可以傳遞的一組選項(xiàng) defineSteps 或傳遞給 highlight 方法的對(duì)象:
const stepDefinition = { element: '#some-item', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn) stageBackground: '#ffffff', // 這將覆蓋在驅(qū)動(dòng)程序中設(shè)置的 popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗 className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口 title: 'Title', // popover 標(biāo)題 description: 'Description', // popover 描述 showButtons: false, // 在頁(yè)腳不顯示控制按鈕 doneBtnText: 'Done', // 最后一個(gè)按鈕文本 closeBtnText: 'Close', // 關(guān)閉按鈕文本 nextBtnText: 'Next', // 下一個(gè)按鈕文本 prevBtnText: 'Previous', // 上一個(gè)按鈕文本 }, onNext: () => {}, // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用 onPrevious: () => {}, // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用 };
突出顯示單個(gè)元素時(shí)的效果
const driver = new Driver(driverOptions); driver.highlight(stepDefinition);
創(chuàng)建一個(gè)分步指南:
const driver = new Driver(driverOptions); driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3, stepDefinition4, ]);
API方法
下面是可用的方法集:
const driver = new Driver(driverOptions); // 檢查driver是否激活 if (driver.isActivated) { console.log('Driver is active'); } // 在步驟指南中,可以調(diào)用以下方法 driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]); driver.start(stepNumber = 0); // 定義開(kāi)始步驟 driver.moveNext(); // 移動(dòng)到“步驟”列表中的下一步 driver.movePrevious(); // 移動(dòng)到“步驟”列表中的上一步 driver.hasNextStep(); // 檢查是否有下一步要移動(dòng) driver.hasPreviousStep(); // 檢查是否有要移動(dòng)到的上一個(gè)步驟 // 阻止當(dāng)前移動(dòng),如果你想,可以在`onNext`或`onPrevious`中使用,執(zhí)行一些異步任務(wù),然后手動(dòng)切換到下一步 driver.preventMove(); // 使用查詢(xún)選擇器或步驟定義突出顯示元素 driver.highlight(string|stepDefinition); // 重新定位彈出窗口并突出顯示元素 driver.refresh(); // 重置覆蓋層并清空屏幕 driver.reset(); // 另外,你可以傳遞一個(gè)布爾參數(shù) // 立即清除,不做動(dòng)畫(huà)等 // 在你運(yùn)行的時(shí)候可能有用 // driver程序運(yùn)行時(shí)的不同實(shí)例 driver.reset(clearImmediately = false); // 檢查是否有高亮的元素 if(driver.hasHighlightedElement()) { console.log('There is an element highlighted'); } // 獲取屏幕上當(dāng)前高亮顯示的元素,would be an instance of `/src/core/element.js` const activeElement = driver.getHighlightedElement(); // 獲取最后一個(gè)高亮顯示的元素, would be an instance of `/src/core/element.js` const lastActiveElement = driver.getLastHighlightedElement(); activeElement.getCalculatedPosition(); // 獲取活動(dòng)元素的屏幕坐標(biāo) activeElement.hidePopover(); // 隱藏彈出窗口 activeElement.showPopover(); // 顯示彈出窗口 activeElement.getNode(); // 獲取這個(gè)元素后面的DOM元素
別忘了給觸發(fā) driver 的 click 綁定添加 e.stopPropagation()
。
實(shí)戰(zhàn)
下面是我實(shí)現(xiàn)的一個(gè) vue 的 demo,用的 driver.js
是 0.9.8
。
<template> <div class='driver-demo'> <div class="btn" @click="handleClick">向?qū)е敢?lt;/div> <!-- 上 --> <div id="step-item-1" class="top"> <h2>上面部分</h2> <section>生活不過(guò)是一片混亂,充滿(mǎn)了各種可笑的、齷齪的事情,它只能給人們提供笑料,但是他笑的時(shí)候卻禁不住滿(mǎn)心哀傷。</section> </div> <!-- 右 --> <div id="step-item-2" class="right"> <h2>右邊部分</h2> <section> 月亮是那崇高而不可企及的夢(mèng)想,六便士是為了生存不得不賺取的卑微收入 。多少人只是膽怯地抬頭看一眼月亮,又繼續(xù)低頭追逐賴(lài)以溫飽的六便士? </section> </div> <!-- 下 --> <div id="step-item-3" class="bottom"> <h2>下邊部分</h2> <section>我用盡了全力,過(guò)著平凡的一生。</section> </div> <!-- 左 --> <div id="step-item-4" class="left"> <h2>左邊部分</h2> <section>夢(mèng)想什么時(shí)候開(kāi)始都不晚。</section> </div> <!-- 中 --> <div id="step-item-5" class="center"> <h2>中間部分</h2> <section> 我們每個(gè)人生在世界上都是孤獨(dú)的……盡管身體互相依傍卻并不在一起,既不了解別人也不能為別人所了解。 </section> </div> </div> </template> <script> // 引入資源 import Driver from 'driver.js'; import 'driver.js/dist/driver.min.css'; export default { name: 'DriverDemo', data () { return { driverOptions: { className: 'kaimo-driver', // 封裝driver.js彈窗的類(lèi)名 animate: true, // 是否進(jìn)行動(dòng)畫(huà) opacity: 0.5, // 背景不透明度(0表示只有彈窗,沒(méi)有覆蓋層) padding: 20, // 元素到邊緣的距離 allowClose: true, // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉 overlayClickNext: false, // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動(dòng) doneBtnText: '確定', // final按鈕文本 closeBtnText: '我知道了', // 關(guān)閉按鈕文本 stageBackground: '#fff', // 高亮元素背后的舞臺(tái)背景顏色 nextBtnText: '下一步', // 下一步按鈕文本 prevBtnText: '上一步', // 前一步按鈕文本 showButtons: true, // 在頁(yè)腳不顯示控制按鈕 keyboardControl: true, // 允許通過(guò)鍵盤(pán)控制(esc鍵關(guān)閉,箭頭鍵移動(dòng)) scrollIntoViewOptions: {}, // 如果可能的話(huà),我們使用`scrollIntoView()`,如果你想要任何選項(xiàng),在這里傳遞 onHighlightStarted: (Element) => {}, // 當(dāng)元素將要高亮?xí)r調(diào)用 onHighlighted: (Element) => {}, // 當(dāng)元素完全高亮?xí)r調(diào)用 onDeselected: (Element) => {}, // 當(dāng)元素被取消選擇時(shí)調(diào)用 onReset: (Element) => {}, // 當(dāng)覆蓋層即將被清除時(shí)調(diào)用 onNext: (Element) => {}, // 當(dāng)移動(dòng)到下一個(gè)步驟時(shí)調(diào)用 onPrevious: (Element) => {}, // 在任何步驟中移動(dòng)到上一步時(shí)調(diào)用 } }; }, methods: { handleClick(e) { // 阻止點(diǎn)擊事件進(jìn)一步傳播,不加的話(huà)指引打開(kāi)會(huì)關(guān)閉 e.stopPropagation(); // 初始化 const driver = new Driver(this.driverOptions); // 自定義幾個(gè)步驟 driver.defineSteps([ this.stepDefinition1(), this.stepDefinition2(), this.stepDefinition3(), this.stepDefinition4(), this.stepDefinition5(), ]); // 開(kāi)始進(jìn)行向?qū)?,默認(rèn)從0開(kāi)始也就是步驟1,也可以自己調(diào)整其他步驟(0可以不寫(xiě)) driver.start(0); }, stepDefinition1() { return { element: '#step-item-1', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn) // stageBackground: '#ffffff', // 這將覆蓋在驅(qū)動(dòng)程序中設(shè)置的 popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗 className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口 title: '步驟1', // popover 標(biāo)題 description: '這是步驟1的向?qū)枋?, // popover 描述 // showButtons: true, // 在頁(yè)腳不顯示控制按鈕 // doneBtnText: 'Done', // 最后一個(gè)按鈕文本 // closeBtnText: 'Close', // 關(guān)閉按鈕文本 // nextBtnText: 'Next', // 下一個(gè)按鈕文本 // prevBtnText: 'Previous', // 上一個(gè)按鈕文本 }, onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用 console.log("步驟1:onNext"); }, onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用 console.log("步驟1:onPrevious"); }, }; }, stepDefinition2() { return { element: '#step-item-2', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn) popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗 className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口 title: '步驟2', // popover 標(biāo)題 description: '這是步驟2的向?qū)枋?, // popover 描述 position: 'left-center' }, onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用 console.log("步驟2:onNext"); }, onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用 console.log("步驟2:onPrevious"); }, }; }, stepDefinition3() { return { element: '#step-item-3', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn) popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗 className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口 title: '步驟3', // popover 標(biāo)題 description: '這是步驟3的向?qū)枋?, // popover 描述 }, onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用 console.log("步驟3:onNext"); }, onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用 console.log("步驟3:onPrevious"); }, }; }, stepDefinition4() { return { element: '#step-item-4', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn) popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗 className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口 title: '步驟4', // popover 標(biāo)題 description: '這是步驟4的向?qū)枋?, // popover 描述 position: 'right-center' }, onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用 console.log("步驟4:onNext"); }, onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用 console.log("步驟4:onPrevious"); }, }; }, stepDefinition5() { return { element: '#step-item-5', // 要突出顯示的查詢(xún)選擇器字符串或節(jié)點(diǎn) popover: { // 如果為空或未指定彈窗,則不會(huì)有彈窗 className: 'popover-class', // 除了驅(qū)動(dòng)程序選項(xiàng)中的一般類(lèi)名外,還要包裝這個(gè)特定步驟彈出窗口 title: '步驟5', // popover 標(biāo)題 description: '這是步驟5的向?qū)枋?, // popover 描述 }, onNext: () => { // 從當(dāng)前步驟移動(dòng)到下一步時(shí)調(diào)用 console.log("步驟5:onNext"); }, onPrevious: () => { // 從當(dāng)前步驟移動(dòng)到上一步時(shí)調(diào)用 console.log("步驟5:onPrevious"); }, }; } }, }; </script> <style lang="scss" scoped> .driver-demo { position: relative; text-align: center; background-color: #eee; padding: 40px; .btn { width: 100px; height: 48px; line-height: 48px; border: 1px solid purple; background-color: plum; border-radius: 4px; cursor: pointer; } .top { position: absolute; top: 0; left: 400px; width: 300px; height: 140px; background-color: silver; } .right { position: absolute; top: 60px; right: 0; width: 200px; height: 300px; background-color: salmon; } .bottom { position: absolute; bottom: 200px; left: 400px; width: 200px; height: 100px; background-color: skyblue; } .left { position: absolute; top: 50%; left: 0; width: 300px; height: 70px; background-color: seagreen; } .center { margin: 330px auto; width: 400px; height: 100px; background-color: sandybrown; } } </style>
效果
實(shí)現(xiàn)的功能向?qū)е敢Ч缦拢?/p>
到此這篇關(guān)于vue里使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢奈恼戮徒榻B到這了,更多相關(guān)vue項(xiàng)目功能向?qū)е敢齼?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程之table組件源碼分析
這篇文章主要介紹了vue3新擬態(tài)組件庫(kù)開(kāi)發(fā)流程——table組件源碼,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04Vue infinite update loop的問(wèn)題解決
這篇文章主要介紹了Vue "...infinite update loop..."的問(wèn)題解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04vue.js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車(chē)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例
本文主要介紹了Vue中el-tree樹(shù)全部展開(kāi)或收起的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08