文章目錄

• • 功能要求
  • 使用Intro.js遇到的問題以及代碼
  • • 1.不能跨路由
    • • utils -> intro.js
    • 2.要在頁面引導所需顯示的數據全部拿到且渲染完畢以后加載Intro.js
    • • intro.js工具類如何使用

功能要求

公司要求在自己的平臺上實現新手引導，還是跨頁面，跨路由的。我找了下網上的新手引導插件，最后選了Intro.js來使用，可能因為它稍微好看那么一丟丟吧。

我寫的大多數都是思路，如果能看懂的話應該能輕易實現這些效果，直接粘貼的話估計懸哈。

建議先去Intro.js官網看一下demo，了解一下再來看demo基礎上的操作。

我只是個小小的基層程序員，如果有什么讓大家看了發笑的想法和邏輯就不要嘲笑我了，請溫柔地告訴我謝謝。

以下都是自己真實遇到的問題并且想方設法解決的，有更好的解決辦法可以貼出來一起討論。

使用Intro.js遇到的問題以及代碼

1.不能跨路由

最大的問題就是，Intro.js不能跨路由，因為它是在當前頁面，根據dom唯一的Id值,來獲取并顯示新手引導，所以沒有渲染的頁面它是獲取不到的。
所以我想的是，在每個頁面都從頭加載一次Intro.js，上一個頁面引導完畢以后，就直接router.push到下一個路由，然后自動加載，進行引導，引導完了再push到下一個路由，好的，完美套娃。

我們先在utils.js文件里封裝一個工具類Intro.js，方便每個頁面直接引用。這里我直接貼最終版的代碼啦，我覺得還是比較好看懂的。

utils -> intro.js

import introJs from 'intro.js' import 'intro.js/introjs.css'; import router from '@/router' import store from '@/store'let count = 0 // 初始化為0，后面會根據每一步傳入的dom的id選擇器 判斷當前在第幾步 let state = 0 // skip: 0 ,done: 1； export function guide (introSteps) {// console.log(sessionStorage.getItem('isIntro'))if (!parseInt(sessionStorage.getItem('isIntro'))) {return}introJs().setOptions({steps: introSteps,/* 當位置選擇自動的時候，位置排列的優先級 */positionPrecedence: ["top", "bottom", "right", "left"],prevLabel: "上一步",nextLabel: "下一步",skipLabel: "跳過",// 這里因為每個頁面的最后一步其實就會顯示doneLabel了，而實際上我們的新手引導操作并沒有完成，需要跳轉路由繼續，所以顯示的是下一步而非完成。doneLabel: "下一步", hidePrev: true,exitOnOverlayClick: false,/* 是否顯示說明的數據步驟*/showStepNumbers: false,/* 是否使用點點點顯示進度 */showBullets: false,/* 是否使用鍵盤Esc退出 */exitOnEsc: false,/* 默認提示位置 */hintPosition: 'top-left',/* 說明高亮區域的樣式 */highlightClass: 'customHighlight',/* 引導說明文本框的樣式 */tooltipClass: 'customTooltip'}).onchange(function (targetElement) {// 每次change時觸發，我的id樣式是“guide-step<id>”// id代表新手引導的第幾步，例如“guide-step1”，通過id判斷當前是第幾步count = parseInt(targetElement.id.slice(-1))}).onafterchange(function (targetElement) {// 公司設計的新手引導只有七步，如果count == 7了，說明現在是最后一步// 跳轉完成后用js的dom操作將doneLabel由“下一步”改為“完成”if (count === 7) {let i = document.getElementsByClassName('introjs-donebutton')[0].innerHTML = '知道了'}}).oncomplete(function (targetElement) {// 點擊完成以及跳過按鈕后執行的事件，不區分完成和跳過。state = 1setTimeout(() => {if (state) {judgeCount()}}, 200)}).onexit(function (targetElement) {// 點擊完成按鈕后， 執行的事件}).onskip(function (targetElement) {// 點擊跳過按鈕后， 執行的事件// onskip這個我當時在官網api里查不到，是我自己翻源碼翻出來的，折騰半天，無語。// 因為點擊跳過以后是默認完成了新手引導，此時就需要將狀態傳給后端，保證下一次進入有Intro.js的頁面時時不加載新手引導了。// 因為vue是跨路由寫的，每個頁面的完成其實都不是用戶真正完成了新手引導// 所以如果不區分完成和跳過各自觸發的事件的話，我們就不會知道用戶當前是跳過（ ==完成了新手引導）還是只是當前頁面的完成，需要繼續跳轉下一個路由。state = 0// 存儲進緩存，下次進入新手引導路由頁時將不在觸發Intro.jsstore.state.introStepInfo.isIntro = statesessionStorage.setItem('isIntro', state)}).start(); }// 這個是每一步新手引導對應的點擊下一步時對應應該進行的操作 // 我這邊，1，2步在一個頁面，3，4步在一個頁面，5，6步在一個頁面，第7步在一個頁面 // 所以1，3，5的時候我不需要進行特定操作，按照Intro.js走就行了 function judgeCount () {// 這是事先預存的跳轉路由需要的一些數據let _introStepInfo = JSON.parse(sessionStorage.getItem('introStepInfo'))switch (count) {case 1:breakcase 2:router.push({path: '/courseDetail',query: {id: _introStepInfo.courseId}})breakcase 3:breakcase 4:let _introChapterName = sessionStorage.getItem('chapterName')router.push({path: '/coursePreview',query: {id: _introStepInfo.courseId,chapterId: _introStepInfo.chapterId}})breakcase 5:breakcase 6:router.push({path: '/myCourses'})breakcase 7:sessionStorage.setItem('isIntro', 0)break} }

2.要在頁面引導所需顯示的數據全部拿到且渲染完畢以后加載Intro.js

這里要注意一個問題，就是有些dom是要在從后端拿到數據以后渲染了才有的，不渲染的話Intro.js獲取不到唯一的id值。

所以我們在axios封裝里面，要在全局設定一個值為false的Boolean變量isAxios，在請求回來以后將它變為true。
這只是最基礎的，除此以外還要考慮該頁面是不是有兩個以上需要拿到數據才能渲染的dom，所以這時需要再增加一個全局變量count，請求request的時候+1，response回來的時候-1，count為0的時候再把isAxios設為true。然后我們再在需要渲染Intro.js的頁面生命周期 mounted() 里設定一個500毫秒/次的定時器，判斷isAxios，為true了，我們就可以進行新手引導了，并且在完成后清除。

這些都是不成熟的，如果有更好的方法大家可以提出。

intro.js工具類如何使用

// 引入自己封裝的新手引導函數 import { guide } from '@/utils/intro'

在mounted()生命周期里設定計時器

let i = setInterval(() => {if (!this.isAxios) {guide([{title: '開放課程',intro: '查看您已采購的全部課程。(1/7)',element: document.querySelector('#guide-step1')},{title: '課程資源',intro: '點擊任意一門課程封面進入該課程。(2/7)',element: document.querySelector('#guide-step2')}])clearInterval(i)} }, 500)

其實在封裝axios里關于這個還有很多需要注意的小細節，但與intro.js其實關系不大了，本次就不說了，大家多多注意一下就可以了。

總結

以上是生活随笔為你收集整理的如何在vue项目中，跨页面（跨路由）使用新手引导工具 Intro.js的全部內容，希望文章能夠幫你解決所遇到的問題。

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