快捷導(dǎo)航

vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能

更新時(shí)間：2024年06月17日 11:03:12 作者：妍崽崽@

使用 intro.js這個(gè)插件,來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果,經(jīng)常在一些新手引導(dǎo)頁(yè)遇到這樣的需求,下面通過(guò)本文給大家分享vue+intro.js插件實(shí)現(xiàn)引導(dǎo)功能,感興趣的朋友一起看看吧

前言：

使用 intro.js這個(gè)插件，來(lái)實(shí)現(xiàn)一個(gè)引導(dǎo)性的效果，適用場(chǎng)景，比如：新手引導(dǎo)頁(yè)，操作說(shuō)明等等

效果圖：

官網(wǎng)地址：點(diǎn)我

實(shí)現(xiàn)步驟：

1、安裝

npm install intro.js --save
pnpm/cnpm  用法一樣
yarn add intro.js

2、使用方法1，新建一個(gè)單獨(dú)vue組件

template部分：

<template>
    <div class='card-demo'>我是界面寫(xiě)入的元素</div>
</template>

js部分：

import intro from "intro.js"  // introjs庫(kù)
import "intro.js/introjs.css" // introjs默認(rèn)css樣式

data() {
    return {
      option: {
        // 參數(shù)對(duì)象
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳過(guò)",
        doneLabel: "完成",
        tooltipClass: "intro-tooltip" /* 引導(dǎo)說(shuō)明文本框的樣式 */,
        // highlightClass: 'intro-highlight', /* 說(shuō)明高亮區(qū)域的樣式 */
        exitOnEsc: true /* 是否使用鍵盤(pán)Esc退出 */,
        exitOnOverlayClick: false /* 是否允許點(diǎn)擊空白處退出 */,
        keyboardNavigation: true /* 是否允許鍵盤(pán)來(lái)操作 */,
        showBullets: false /* 是否使用點(diǎn)顯示進(jìn)度 */,
        showProgress: false /* 是否顯示進(jìn)度條 */,
        scrollToElement: true /* 是否滑動(dòng)到高亮的區(qū)域 */,
        skipHighlight: true,
        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: false /* 是否在最后一步隱藏下一步 */,
        steps: [] /* steps步驟，可以寫(xiě)個(gè)工具類(lèi)保存起來(lái) */,
      },
    }
}

methods:{
    init(){
        let steps= [{
            title: 'Welcome',
            intro: 'Hello World! ??'
          },
          { // 圖片的可以展示
            intro: '<img src="https://i.giphy.com/media/ujUdrdpX7Ok5W/giphy.webp" onerror="this.onerror=null;this.src=\'https://i.giphy.com/ujUdrdpX7Ok5W.gif\';" alt="">'
          },
          { // 可以指定界面上的元素，然后顯示指定內(nèi)容
            element: document.querySelector('.card-demo'),
            intro: 'This step focuses on an element'
          }]
        introJs().setOptions({
          ...this.option,// 配置屬性
          steps: steps // 每一步展示的內(nèi)容
        })
        .oncomplete(() => {    console.log("點(diǎn)擊結(jié)束按鈕后執(zhí)行的事件")    })
        .onexit(() => {    console.log("點(diǎn)擊跳過(guò)按鈕后執(zhí)行的事件")    })
        .onbeforeexit(() => { console.log('確認(rèn)完畢之后執(zhí)行的事件')    })
        .start()
    },
}

mounted(){
    this.init()
}

3、使用方法2

data-title：標(biāo)題文字
data-intro：提示信息內(nèi)容
data-step：步驟的編號(hào)（優(yōu)先級(jí)）
data-tooltipClass：為提示定義CSS類(lèi)
data-highlightClass：將CSS類(lèi)附加到helperLayer
data-position：提示的位置，默認(rèn)是bottom
data-scrollTo：滾動(dòng)到的元素，element或tooltip。默認(rèn)值為element。
data-disable-interaction：是否禁用與突出顯示的框內(nèi)的元素的交互

template部分：

<template>
  <div data-title="test1" data-intro="intro-test1" data-step='1'>
    第一步
  </div>
  <div data-title="test2" data-intro="intro-test2" data-step='2'>
    第二步
  </div>
  <div data-title="test3" data-intro="intro-test3" data-step='3'>
    第三步
  </div>
</template>

js部分：

mounted(){
    introJs().start()
}

4、鍵盤(pán)事件

window.addEventListener('keydown', function(event) {
    // 左箭頭
    if(event.keyCode == 37) {
        console.log('左箭頭被按下');
        // 在此處處理左箭頭的邏輯
    }
    // 右箭頭
    else if(event.keyCode == 39) {
        console.log('右箭頭被按下');
        // 在此處處理右箭頭的邏輯
    }
});

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

您可能感興趣的文章: