溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue怎么使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢南嚓P(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue怎么使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢恼露紩兴斋@，下面我們一起來看看吧。
driver.js 是一個(gè)輕量級、無依賴的原生JavaScript引擎，在整個(gè)頁面中驅(qū)動用戶的注意力，強(qiáng)大的、高度可定制的原生JavaScript引擎，無外部依賴，支持所有主流瀏覽器。
npm install driver.js
import Driver from 'driver.js';
import 'driver.js/dist/driver.min.css';
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,
}
});功能介紹在新用戶入門時(shí)很有用，可以讓他們了解應(yīng)用程序的不同部分。您可以使用驅(qū)動程序無縫創(chuàng)建它們。定義步驟，并在你想開始展示時(shí)調(diào)用start。用戶將能夠使用鍵盤或使用彈出窗口上的按鈕來控制步驟。
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();對于轉(zhuǎn)換步驟之間的任何異步操作，可以將執(zhí)行延遲到操作完成。你所要做的就是在 onNext 或 onPrevious 回調(diào)函數(shù)中使用driver.preventMove() 停止過渡，并使用 driver.moveNext() 手動初始化它。這是一個(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彈窗的類名
animate: true, // 是否進(jìn)行動畫
opacity: 0.75, // 背景不透明度(0表示只有彈窗，沒有覆蓋層)
padding: 10, // 元素到邊緣的距離
allowClose: true, // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉
overlayClickNext: false, // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動
doneBtnText: 'Done', // final按鈕文本
closeBtnText: 'Close', // 關(guān)閉按鈕文本
stageBackground: '#ffffff', // 高亮元素背后的舞臺背景顏色
nextBtnText: 'Next', // 下一步按鈕文本
prevBtnText: 'Previous', // 前一步按鈕文本
showButtons: false, // 在頁腳不顯示控制按鈕
keyboardControl: true, // 允許通過鍵盤控制(esc鍵關(guān)閉，箭頭鍵移動)
scrollIntoViewOptions: {}, // 如果可能的話，我們使用`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)移動到下一個(gè)步驟時(shí)調(diào)用
onPrevious: (Element) => {}, // 在任何步驟中移動到上一步時(shí)調(diào)用
});定義步驟時(shí)可以傳遞的一組選項(xiàng) defineSteps 或傳遞給 highlight 方法的對象:
const stepDefinition = {
element: '#some-item', // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
stageBackground: '#ffffff', // 這將覆蓋在驅(qū)動程序中設(shè)置的
popover: { // 如果為空或未指定彈窗，則不會有彈窗
className: 'popover-class', // 除了驅(qū)動程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
title: 'Title', // popover 標(biāo)題
description: 'Description', // popover 描述
showButtons: false, // 在頁腳不顯示控制按鈕
doneBtnText: 'Done', // 最后一個(gè)按鈕文本
closeBtnText: 'Close', // 關(guān)閉按鈕文本
nextBtnText: 'Next', // 下一個(gè)按鈕文本
prevBtnText: 'Previous', // 上一個(gè)按鈕文本
},
onNext: () => {}, // 從當(dāng)前步驟移動到下一步時(shí)調(diào)用
onPrevious: () => {}, // 從當(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, ]);
下面是可用的方法集:
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); // 定義開始步驟
driver.moveNext(); // 移動到“步驟”列表中的下一步
driver.movePrevious(); // 移動到“步驟”列表中的上一步
driver.hasNextStep(); // 檢查是否有下一步要移動
driver.hasPreviousStep(); // 檢查是否有要移動到的上一個(gè)步驟
// 阻止當(dāng)前移動，如果你想，可以在`onNext`或`onPrevious`中使用，執(zhí)行一些異步任務(wù)，然后手動切換到下一步
driver.preventMove();
// 使用查詢選擇器或步驟定義突出顯示元素
driver.highlight(string|stepDefinition);
// 重新定位彈出窗口并突出顯示元素
driver.refresh();
// 重置覆蓋層并清空屏幕
driver.reset();
// 另外，你可以傳遞一個(gè)布爾參數(shù)
// 立即清除，不做動畫等
// 在你運(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(); // 獲取活動元素的屏幕坐標(biāo)
activeElement.hidePopover(); // 隱藏彈出窗口
activeElement.showPopover(); // 顯示彈出窗口
activeElement.getNode(); // 獲取這個(gè)元素后面的DOM元素別忘了給觸發(fā) driver 的 click 綁定添加 e.stopPropagation()。
下面是我實(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">
<h3>上面部分</h3>
<section>生活不過是一片混亂，充滿了各種可笑的、齷齪的事情，它只能給人們提供笑料，但是他笑的時(shí)候卻禁不住滿心哀傷。</section>
</div>
<!-- 右 -->
<div id="step-item-2" class="right">
<h3>右邊部分</h3>
<section>
月亮是那崇高而不可企及的夢想，六便士是為了生存不得不賺取的卑微收入 。多少人只是膽怯地抬頭看一眼月亮，又繼續(xù)低頭追逐賴以溫飽的六便士?
</section>
</div>
<!-- 下 -->
<div id="step-item-3" class="bottom">
<h3>下邊部分</h3>
<section>我用盡了全力，過著平凡的一生。</section>
</div>
<!-- 左 -->
<div id="step-item-4" class="left">
<h3>左邊部分</h3>
<section>夢想什么時(shí)候開始都不晚。</section>
</div>
<!-- 中 -->
<div id="step-item-5" class="center">
<h3>中間部分</h3>
<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彈窗的類名
animate: true, // 是否進(jìn)行動畫
opacity: 0.5, // 背景不透明度(0表示只有彈窗，沒有覆蓋層)
padding: 20, // 元素到邊緣的距離
allowClose: true, // 點(diǎn)擊覆蓋層是否應(yīng)該關(guān)閉
overlayClickNext: false, // 下一步點(diǎn)擊覆蓋層是否應(yīng)該移動
doneBtnText: '確定', // final按鈕文本
closeBtnText: '我知道了', // 關(guān)閉按鈕文本
stageBackground: '#fff', // 高亮元素背后的舞臺背景顏色
nextBtnText: '下一步', // 下一步按鈕文本
prevBtnText: '上一步', // 前一步按鈕文本
showButtons: true, // 在頁腳不顯示控制按鈕
keyboardControl: true, // 允許通過鍵盤控制(esc鍵關(guān)閉，箭頭鍵移動)
scrollIntoViewOptions: {}, // 如果可能的話，我們使用`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)移動到下一個(gè)步驟時(shí)調(diào)用
onPrevious: (Element) => {}, // 在任何步驟中移動到上一步時(shí)調(diào)用
}
};
},
methods: {
handleClick(e) {
// 阻止點(diǎn)擊事件進(jìn)一步傳播，不加的話指引打開會關(guān)閉
e.stopPropagation();
// 初始化
const driver = new Driver(this.driverOptions);
// 自定義幾個(gè)步驟
driver.defineSteps([
this.stepDefinition1(),
this.stepDefinition2(),
this.stepDefinition3(),
this.stepDefinition4(),
this.stepDefinition5(),
]);
// 開始進(jìn)行向?qū)?，默認(rèn)從0開始也就是步驟1，也可以自己調(diào)整其他步驟（0可以不寫）
driver.start(0);
},
stepDefinition1() {
return {
element: '#step-item-1', // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
// stageBackground: '#ffffff', // 這將覆蓋在驅(qū)動程序中設(shè)置的
popover: { // 如果為空或未指定彈窗，則不會有彈窗
className: 'popover-class', // 除了驅(qū)動程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
title: '步驟1', // popover 標(biāo)題
description: '這是步驟1的向?qū)枋?#39;, // popover 描述
// showButtons: true, // 在頁腳不顯示控制按鈕
// doneBtnText: 'Done', // 最后一個(gè)按鈕文本
// closeBtnText: 'Close', // 關(guān)閉按鈕文本
// nextBtnText: 'Next', // 下一個(gè)按鈕文本
// prevBtnText: 'Previous', // 上一個(gè)按鈕文本
},
onNext: () => { // 從當(dāng)前步驟移動到下一步時(shí)調(diào)用
console.log("步驟1:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動到上一步時(shí)調(diào)用
console.log("步驟1:onPrevious");
},
};
},
stepDefinition2() {
return {
element: '#step-item-2', // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗，則不會有彈窗
className: 'popover-class', // 除了驅(qū)動程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
title: '步驟2', // popover 標(biāo)題
description: '這是步驟2的向?qū)枋?#39;, // popover 描述
position: 'left-center'
},
onNext: () => { // 從當(dāng)前步驟移動到下一步時(shí)調(diào)用
console.log("步驟2:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動到上一步時(shí)調(diào)用
console.log("步驟2:onPrevious");
},
};
},
stepDefinition3() {
return {
element: '#step-item-3', // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗，則不會有彈窗
className: 'popover-class', // 除了驅(qū)動程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
title: '步驟3', // popover 標(biāo)題
description: '這是步驟3的向?qū)枋?#39;, // popover 描述
},
onNext: () => { // 從當(dāng)前步驟移動到下一步時(shí)調(diào)用
console.log("步驟3:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動到上一步時(shí)調(diào)用
console.log("步驟3:onPrevious");
},
};
},
stepDefinition4() {
return {
element: '#step-item-4', // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗，則不會有彈窗
className: 'popover-class', // 除了驅(qū)動程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
title: '步驟4', // popover 標(biāo)題
description: '這是步驟4的向?qū)枋?#39;, // popover 描述
position: 'right-center'
},
onNext: () => { // 從當(dāng)前步驟移動到下一步時(shí)調(diào)用
console.log("步驟4:onNext");
},
onPrevious: () => { // 從當(dāng)前步驟移動到上一步時(shí)調(diào)用
console.log("步驟4:onPrevious");
},
};
},
stepDefinition5() {
return {
element: '#step-item-5', // 要突出顯示的查詢選擇器字符串或節(jié)點(diǎn)
popover: { // 如果為空或未指定彈窗，則不會有彈窗
className: 'popover-class', // 除了驅(qū)動程序選項(xiàng)中的一般類名外，還要包裝這個(gè)特定步驟彈出窗口
title: '步驟5', // popover 標(biāo)題
description: '這是步驟5的向?qū)枋?#39;, // popover 描述
},
onNext: () => { // 從當(dāng)前步驟移動到下一步時(shí)調(diào)用
console.log("步驟5:onNext");
},
onPrevious: () => { // 從當(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ū)е敢边@篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue怎么使用driver.js實(shí)現(xiàn)項(xiàng)目功能向?qū)е敢敝R都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼