最近公司經(jīng)理讓我在項(xiàng)目上做一個(gè)新用戶引導(dǎo)，講真這玩意我只在APP上看見過(guò)，網(wǎng)頁(yè)上沒(méi)啥功能啊，還需要引導(dǎo)！ 沒(méi)辦法，剛它！！！

在網(wǎng)上查了點(diǎn)資料 Vue 基本上都是 intro.js 和 driver.js 兩個(gè)插件

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

npm 安裝： npm install driver.js

yarn 安裝 ：yarn add driver.js

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

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”，// 為你的指示模塊添加類名 如果你要取消 某一個(gè)按鈕（比如：“上一步””下一步“，”完成“）的 這個(gè)類名還是要加上的

animate:true，//在更改突出顯示的元素時(shí)設(shè)置動(dòng)畫

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

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

allowclose:true，//單擊覆蓋是否應(yīng)關(guān)閉

overlay click next:false，//單擊overlay click是否轉(zhuǎn)到下一步

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

closebtnext:'關(guān)閉'，//此步驟的“關(guān)閉”按鈕上的文本

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

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

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

keyboardcontrol:true，//允許通過(guò)鍵盤進(jìn)行控制（轉(zhuǎn)義為“關(guān)閉”，箭頭鍵為“移動(dòng)”）。

scrollintoview options:，//我們盡可能使用'scrollintoview（）'，如果需要，請(qǐng)?jiān)诖颂巶鬟f它的選項(xiàng)

onHighlightStarted:（element），//當(dāng)要突出顯示元素時(shí)調(diào)用

onHighlighted:（element），//當(dāng)element完全突出顯示時(shí)調(diào)用

OnDeselected:（element），//取消選擇element后調(diào)用

onreset：（element），//當(dāng)要清除覆蓋時(shí)調(diào)用

on next:（element）=>，//在任何步驟上移動(dòng)到下一步時(shí)調(diào)用

onPrevious:（element）=>，//在任何步驟上移動(dòng)到下一步時(shí)調(diào)用

})

需要配置一下steps

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

const steps = [

{

element: "#guide-menu", // 需要引導(dǎo)展示的iD

popover: {

title: "菜單導(dǎo)航", //展示模塊標(biāo)題

description: "點(diǎn)擊菜單可切換右側(cè)菜單內(nèi)容", // 展示模塊類容

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

}

]

export default steps

在頁(yè)面直接this.$Driver調(diào)用就可以了

引入steps調(diào)用方法:

import steps from '../plugins/steps'

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

基本上這樣就可以實(shí)現(xiàn)基本功能了

如果從這個(gè)路由跳轉(zhuǎn)到下個(gè)路由 那么需要再引一遍dirver.js 就可以了

import steps from '../plugins/steps'

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

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

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

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

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

這樣就可以為所欲為強(qiáng)制用戶走我們?yōu)樗?guī)劃好的路線了 ^_^

為單獨(dú)一個(gè)引導(dǎo)添加獨(dú)立的屬性,也可以添加事件,添加事件必須用JS來(lái)導(dǎo)出,不能用在data里面

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

重之中重

我們的項(xiàng)目里面有很多樣式都會(huì)用到position:fixed; 而dorver.js的也是position:fixed;

z-index:100000;

所以基本上我們的樣式就會(huì)被覆蓋 而起不到引導(dǎo)的效果

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

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;" // 我需要引導(dǎo)展示的元素

這個(gè)時(shí)候我們發(fā)現(xiàn)你要引導(dǎo)用戶去點(diǎn)擊某一個(gè)餐單

你希望是這樣 只能按照你的規(guī)定點(diǎn)擊你要的菜單

如果是這樣你把z-index設(shè)置比dirver.js 高 就不行這樣會(huì)把所有的菜單都顯示出來(lái),達(dá)不到我們想到的效果 ,把單獨(dú)的元素這是z-index :100000000 也不行 因?yàn)樗母讣?jí)沒(méi)有dirver.js 高 所有還是會(huì)被隱藏.

我這邊試了很多方法都不行 不可能因?yàn)橐粋€(gè)新用戶引導(dǎo)而取消老子菜單置頂吧 ,然后我發(fā)現(xiàn)頂用dirver.js 的時(shí)候會(huì)全局加上一個(gè) "driver-fix-stacking"的類名 真的是有這個(gè)大寶貝不早說(shuō) 浪費(fèi)半天表情, 我們只需要在

.driver-fix-stacking .header {

position:relative;

}

就可以 這樣達(dá)到我們想要的效果了

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。