最近公司經理讓我在項目上做一個新用戶引導，講真這玩意我只在APP上看見過，網頁上沒啥功能啊，還需要引導！ 沒辦法，剛它！！！

在網上查了點資料 Vue 基本上都是 intro.js 和 driver.js 兩個插件

這兩個插件intro.js 好像是比driver.js 要出名這么一丟丟，我個人還是推薦dirver.js intor.js 在路由切換以后遮罩層就會疊加一層疊在一起就跟Av畫質一樣，后面都看不見，intro.js支持的dirver.js都支持，主要dirver.js 簡單粗暴適合硬擼，所以還是選擇dirver.js YY一下（我一直為沒有搞懂這兩個插件在githun 項目演示為什么不把文檔做成引導的來講解文檔，這樣多方便也符合插件本身）

npm 安裝： npm install driver.js

yarn 安裝 ：yarn add driver.js

這里我們直接在mian.js 里面配置，我感覺做個都不可能只是在一個也main引導，其他也頁面也要引導，

main.js 配置：

import Vue from "vue"
import Driver from "driver.js"
import "driver.js/dist/driver.min.css"

直接封裝一下：

Vue.prototype.$Driver = new Driver({

classname:“scoped class”，// 為你的指示模塊添加類名 如果你要取消 某一個按鈕（比如：“上一步””下一步“，”完成“）的 這個類名還是要加上的

animate:true，//在更改突出顯示的元素時設置動畫

不透明度：0.75，//背景不透明度（0表示只有彈出窗口，沒有覆蓋）

padding:10，//元素與邊緣的距離

allowclose:true，//單擊覆蓋是否應關閉

overlay click next:false，//單擊overlay click是否轉到下一步

donebtntext:“完成”，//最后一個按鈕上的文本

closebtnext:'關閉'，//此步驟的“關閉”按鈕上的文本

NextBtnText:'一步'，//此步驟的下一步按鈕文本

prevbtnext:“上一步”，//此步驟的上一個按鈕文本

show buttons:false，//不在頁腳中顯示控件按鈕

keyboardcontrol:true，//允許通過鍵盤進行控制（轉義為“關閉”，箭頭鍵為“移動”）。

scrollintoview options:，//我們盡可能使用'scrollintoview（）'，如果需要，請在此處傳遞它的選項

onHighlightStarted:（element），//當要突出顯示元素時調用

onHighlighted:（element），//當element完全突出顯示時調用

OnDeselected:（element），//取消選擇element后調用

onreset：（element），//當要清除覆蓋時調用

on next:（element）=>，//在任何步驟上移動到下一步時調用

onPrevious:（element）=>，//在任何步驟上移動到下一步時調用

})

需要配置一下steps

可以用js 引用 也可以直接在data里面配置

const steps = [

{

element: "#guide-menu", // 需要引導展示的iD

popover: {

title: "菜單導航", //展示模塊標題

description: "點擊菜單可切換右側菜單內容", // 展示模塊類容

position: "right" // 模塊的位置 可以定位 看自己了

}

]

export default steps

在頁面直接this.$Driver調用就可以了

引入steps調用方法:

import steps from '../plugins/steps'

this.$driver.defineSteps(steps) //傳入配置參數
this.$driver.start() // 開始執行dirver

基本上這樣就可以實現基本功能了

如果從這個路由跳轉到下個路由 那么需要再引一遍dirver.js 就可以了

import steps from '../plugins/steps'

this.$driver.defineSteps(steps) // 從新配置的參數

this.$driver.start() // 開始執行dirver

這樣雖然沒什么毛病,但是仔細一想老子辛辛苦苦寫的用戶引導 你不按步驟走,直接點跳過,我心里面還是不怎么樂意,我們寫了半天代碼你點一個完成這樣好像不太合適,所以我要把"完成"什么的都禁止掉(來自邪惡程序員的狂笑),dirver.js 并沒有提供想對的禁止按鈕的方法,但是提供了自定義類名,而且還有單獨步驟的自定義類名,這一點我感覺真特么好啊,

popoverClassBut // 這是我自己自定義的類名

.popoverClassBut .driver-clearfix .driver-close-btn ,.popoverClassBut .driver-clearfix .driver-prev-btn{display: none !important;
}

這樣就可以為所欲為強制用戶走我們為他規劃好的路線了 ^_^

為單獨一個引導添加獨立的屬性,也可以添加事件,添加事件必須用JS來導出,不能用在data里面

const stepDefinition = {
element ： '＃some-item '， //查詢選擇器字符串或要突出顯示的節點
stageBackground ： '＃ fffffff '， //這將覆蓋驅動程序
popover中設置的一個： { //如果為空則不會有彈出窗口給定
className ： ' popover-class '，// className以包裝此特定步驟popover以及Driver選項
標題中的常規className ： ' Title '， // popover
描述中的標題： '描述'， //
popover的主體
showButtons： false， //不顯示頁腳中的控制按鈕 doneBtnText： ' Done '， //最后一個按鈕上的文本
closeBtnText： ' Close '， //關閉按鈕上的文字
nextBtnText： '下一步'， //下一個按鈕文字
prevBtnText ： '上一頁'， //上一頁按鈕文字
}，
onNext : (）=> {}， //從當前步驟
轉到下一步時調用onPrevious : (）=> {}， //從當前步驟移動到上一步時調用
};

重之中重

我們的項目里面有很多樣式都會用到position:fixed; 而dorver.js的也是position:fixed;

z-index:100000;

所以基本上我們的樣式就會被覆蓋 而起不到引導的效果

就像這個一樣 用的是element的 這一塊還是現實的白屏 彈出框都是position:fixed; 這種情況我只需要吧元素的z-index 設置的比dirver高就可以了 也可以再methods里面設置

this.$driver.defineSteps(steps)
this.$driver.start()var driver = document.getElementById('driver-page-overlay')var highlighted = document.getElementById('driver-highlighted-element-stage')
driver.style.cssText = "z-index:1000!important;"
highlighted.style.cssText = "z-index:1000!important;" // 我需要引導展示的元素

這個時候我們發現你要引導用戶去點擊某一個餐單

你希望是這樣 只能按照你的規定點擊你要的菜單

如果是這樣你把z-index設置比dirver.js 高 就不行這樣會把所有的菜單都顯示出來,達不到我們想到的效果 ,把單獨的元素這是z-index :100000000 也不行 因為他的父級沒有dirver.js 高 所有還是會被隱藏.

我這邊試了很多方法都不行 不可能因為一個新用戶引導而取消老子菜單置頂吧 ,然后我發現頂用dirver.js 的時候會全局加上一個 "driver-fix-stacking"的類名 真的是有這個大寶貝不早說 浪費半天表情, 我們只需要在

.driver-fix-stacking .header {

position:relative;

}

就可以 這樣達到我們想要的效果了

總結

以上是生活随笔為你收集整理的vue点击切换类名_vue 新用户引导（vue-dirver）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。