利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能

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

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

效果圖：

1、安裝 intro.js

npm install intro.js --save

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

// 首頁(yè)引導(dǎo)插件
import intro from 'intro.js' // introjs庫(kù)
import 'intro.js/introjs.css' // introjs默認(rèn)css樣式
// introjs還提供了多種主題，可以通過(guò)以下方式引入
import 'intro.js/themes/introjs-modern.css' // introjs主題

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

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

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

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

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

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

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

注意：

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

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

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

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

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

7、頁(yè)面標(biāo)簽綁定，如下：

<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>

注意：標(biāo)簽上的 id 所對(duì)應(yīng)的是 initGuide 方法中 element 的值，每一步都是通過(guò)這個(gè) id 進(jìn)行綁定的。

8、css 樣式

<!-- 新手引導(dǎo)提示樣式 -->
<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;
}
/* 重置引導(dǎo)組件樣式(類似element-ui個(gè)人使用) */
.intro-tooltip {
  color: #ffff;
  background: #2c3e50;
}
/* 引導(dǎo)提示框的位置 */
.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>

附加：只首次進(jìn)入的時(shí)候顯示引導(dǎo)

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

可以通過(guò) localstorge 來(lái)存儲(chǔ)一個(gè) key，來(lái)判斷用戶是否是第一次進(jìn)入這個(gè)網(wǎng)站，只需要在引導(dǎo)啟動(dòng)時(shí)候加個(gè)判斷就行，代碼如下：

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

至此完成，測(cè)試有效?。?！

總結(jié)

到此這篇關(guān)于利用Vue+intro.js實(shí)現(xiàn)頁(yè)面新手引導(dǎo)流程功能的文章就介紹到這了,更多相關(guān)Vue intro.js頁(yè)面新手引導(dǎo)流程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: