利用Vue+intro.js實現(xiàn)頁面新手引導流程功能

更新時間：2024年06月17日 10:57:42 作者：小破孩呦

在同學們使用某些網(wǎng)站的新版本頁面的時候,經(jīng)常會出現(xiàn)一個類似于新手引導一樣的效果,來幫助同學們更好的熟悉新版本頁面的功能和使用,這篇文章主要給大家介紹了關(guān)于如何利用Vue+intro.js實現(xiàn)頁面新手引導流程功能的相關(guān)資料,需要的朋友可以參考下

效果圖：

1、安裝 intro.js

npm install intro.js --save

2、在項目的 main.js 中，引入 intro.js 庫和相關(guān)樣式文件，如下：

// 首頁引導插件
import intro from 'intro.js' // introjs庫
import 'intro.js/introjs.css' // introjs默認css樣式
// introjs還提供了多種主題，可以通過以下方式引入
import 'intro.js/themes/introjs-modern.css' // introjs主題

// 把intro.js加入到vue的prototype中，方便使用，就可以直接通過this.$intro()來調(diào)用了
Vue.prototype.$intro = intro

3、在 data 中配置初始數(shù)據(jù)，如下：

data(){
    return{
         introOption: { // 參數(shù)對象
            prevLabel: '上一步',
            nextLabel: '下一步',
            skipLabel: '跳過',
            doneLabel: '完成',
            tooltipClass: 'intro-tooltip', /* 引導說明文本框的樣式 */
            // highlightClass: 'intro-highlight', /* 說明高亮區(qū)域的樣式 */
            exitOnEsc: true, /* 是否使用鍵盤Esc退出 */
            exitOnOverlayClick: false, /* 是否允許點擊空白處退出 */
            keyboardNavigation: true, /* 是否允許鍵盤來操作 */
            showBullets: false, /* 是否使用點顯示進度 */
            showProgress: false, /* 是否顯示進度條 */
            scrollToElement: true, /* 是否滑動到高亮的區(qū)域 */
            overlayOpacity: 0.5, // 遮罩層的透明度 0-1之間
            positionPrecedence: ['bottom', 'top', 'right', 'left'], /* 當位置選擇自動的時候，位置排列的優(yōu)先級 */
            disableInteraction: false, /* 是否禁止與元素的相互關(guān)聯(lián) */
            hidePrev: true, /* 是否在第一步隱藏上一步 */
            // hideNext: true, /* 是否在最后一步隱藏下一步 */
            steps: [], /* steps步驟，可以寫個工具類保存起來 */
          },
          tipsImg1: require('./img/tips1.jpg'), // 新手引導的提示圖片
          tipsImg2: require('./img/tips2.jpg') // 新手引導的提示圖片
    }
}

4、在 methods 中配置方法，用以設置引導步數(shù)，如下：

methods: {
        initGuide() {
            // 綁定標簽元素的選擇器數(shù)組
            this.introOption.steps = [
                { title: '系統(tǒng)使用指導', element: '#step1', intro: `鼠標懸浮在各個功能模塊上，可快速查找系統(tǒng)對應操作SOP以及運維人員。<img src="` + this.tipsImg1 + `" alt="" style="width: 200px;margin-top: 15px;"/>`},
                { title: '個人信息', element: '#step2', intro: `點擊個人頭像/下拉圖標，選擇個人信息，初始密碼為******，建議修改為個人賬號密碼。<img src="` + this.tipsImg2 + `" alt="" style="width: 125px;margin-top: 15px;"/>`, },
                { title: '重新引導', element: '#step3', intro: '點擊此處可重新查看引導流程。', },
            ]
            this.$intro()
                .setOptions(this.introOption)
                // 點擊結(jié)束按鈕后執(zhí)行的事件
                .oncomplete(() => {
                    console.log('點擊結(jié)束按鈕后執(zhí)行的事件')
                })
                // 點擊跳過按鈕后執(zhí)行的事件
                .onexit(() => {
                    console.log('點擊跳過按鈕后執(zhí)行的事件')
                })
                // 確認完畢之后執(zhí)行的事件
                .onbeforeexit(() => {
                    console.log('確認完畢之后執(zhí)行的事件')
                })
                .start()
        },
}

5、在 mounted 中調(diào)用方法，如下：

mounted() {
    this.$nextTick(() => {
        this.initGuide() // 調(diào)用新手引導的方法
    })
}

注意：

（1）上述代碼中，initGuide() 方法里配置了指引步驟和開始指引；并在 mounted 生命周期中調(diào)用 initGuide() 方法以展示指引內(nèi)容。需要注意的是，為確保指引信息在原始頁面渲染完畢后調(diào)用，需要在 $nextTick() 中調(diào)用 initGuide() 方法。

（2）正常是可以在 mounted 中調(diào)用指引方法，但是如果你的指引塊是通過接口渲染的，那么建議在接口請求成功之后調(diào)用指引方法，避免數(shù)據(jù)為請求成功，指引塊無法正確選中。

6、重新查看新手指引的方法，如下：

// 重新查看引導
viewIntro(){
   this.initGuide()
},

說明：在標簽添加點擊事件 viewIntro() ，然后在事件中調(diào)用 this.initGuide() 方法即可。

7、頁面標簽綁定，如下：

<div id="step1">
    <div>這里邊是你第一步需要指引所框選的內(nèi)容</div>
</div>
<div id="step2">
    <div>這里邊是你第二步需要指引所框選的內(nèi)容</div>
</div>
<div id="step3">
    <div>這里邊是你第三步需要指引所框選的內(nèi)容</div>
</div>

<div class="new-tips" @click="viewIntro()">新人教程</div>

注意：標簽上的 id 所對應的是 initGuide 方法中 element 的值，每一步都是通過這個 id 進行綁定的。

8、css 樣式

<!-- 新手引導提示樣式 -->
<style lang="scss">
.introjs-helperLayer{
    box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 1px 0px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px!important;
    border: 3px dashed #409eff;
}
.new-tips{
    color: #409eff;
    line-height: 80px;
    cursor: pointer;
}
.introjs-tooltip-title{
    font-size: 16px;
    width: 80%;
    padding-top: 10px;
}
.warper {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid saddlebrown;
}
/* 重置引導組件樣式(類似element-ui個人使用) */
.intro-tooltip {
  color: #ffff;
  background: #2c3e50;
}
/* 引導提示框的位置 */
.introjs-bottom-left-aligned {
  left: 45% !important;
}
.introjs-right,
.introjs-left {
  top: 30%;
}
.intro-highlight {
  background: rgba(255,255,255,0.5);
}
.introjs-arrow.left {
  border-right-color: #2c3e50;
}
.introjs-arrow.top {
  border-bottom-color: #2c3e50;
}
.introjs-arrow.right {
  border-left-color: #2c3e50;
}
.introjs-arrow.bottom {
  border-top-color: #2c3e50;
}
/* 提示框頭部區(qū)域 */
.introjs-tooltip-header {
  padding-right: 0 !important;
  padding-top: 0 !important;
}
.introjs-skipbutton {
  color: #409eff !important;
  font-size: 14px !important;
  font-weight: normal !important;
//   padding: 8px 10px !important ;
}
.introjs-tooltipbuttons {
  border: none !important;
}
.introjs-tooltiptext {
  font-size: 14px !important;
  padding: 15px !important;
}
/* 提示框按鈕 */
.introjs-tooltipbuttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.introjs-button {
  width: 50px !important;
  text-align: center;
  padding: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 3px !important;
  border: none !important;
}
.introjs-button:last-child {
  margin-left: 10px;
}
.introjs-prevbutton {
  color: #606266 !important;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
}
.introjs-nextbutton {
  color: #fff !important;
  background-color: #409eff !important;
  border-color: #409eff !important;
}
.introjs-disabled {
  color: #9e9e9e !important;
  border-color: #bdbdbd !important;
  background-color: #f4f4f4 !important;
}
</style>

附加：只首次進入的時候顯示引導

新手引導一般只有我們第一次進入這個網(wǎng)站的時候才會出現(xiàn)引導內(nèi)容，后續(xù)都不會再顯示，我們這里如何實現(xiàn)？

可以通過 localstorge 來存儲一個 key，來判斷用戶是否是第一次進入這個網(wǎng)站，只需要在引導啟動時候加個判斷就行，代碼如下：

mounted () {
    this.$nextTick(() => {
      if (localStorage.getItem('isFirst') === null || localStorage.getItem('isFirst') !== '1') {
        this.$intro().start()
        localStorage.setItem('isFirst', 1)
      }
    })
},

至此完成，測試有效?。。?/p>