vue+intro.js插件實現(xiàn)引導功能

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

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

前言：

使用 intro.js這個插件，來實現(xiàn)一個引導性的效果，適用場景，比如：新手引導頁，操作說明等等

效果圖：

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

實現(xiàn)步驟：

1、安裝

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

2、使用方法1，新建一個單獨vue組件

template部分：

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

js部分：

import intro from "intro.js"  // introjs庫
import "intro.js/introjs.css" // introjs默認css樣式

data() {
    return {
      option: {
        // 參數(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ū)域 */,
        skipHighlight: true,
        overlayOpacity: 0.5, // 遮罩層的透明度 0-1之間
        positionPrecedence: [
          "bottom",
          "top",
          "right",
          "left",
        ] /* 當位置選擇自動的時候，位置排列的優(yōu)先級 */,
        disableInteraction: false /* 是否禁止與元素的相互關聯(lián) */,
        hidePrev: true /* 是否在第一步隱藏上一步 */,
        hideNext: false /* 是否在最后一步隱藏下一步 */,
        steps: [] /* steps步驟，可以寫個工具類保存起來 */,
      },
    }
}

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("點擊結束按鈕后執(zhí)行的事件")    })
        .onexit(() => {    console.log("點擊跳過按鈕后執(zhí)行的事件")    })
        .onbeforeexit(() => { console.log('確認完畢之后執(zhí)行的事件')    })
        .start()
    },
}

mounted(){
    this.init()
}

3、使用方法2

data-title：標題文字
data-intro：提示信息內(nèi)容
data-step：步驟的編號（優(yōu)先級）
data-tooltipClass：為提示定義CSS類
data-highlightClass：將CSS類附加到helperLayer
data-position：提示的位置，默認是bottom
data-scrollTo：滾動到的元素，element或tooltip。默認值為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、鍵盤事件

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

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

您可能感興趣的文章: