引言

為了讓使用者更好的適應新版，或更方便使用公司內部系統，可以加入新手指引功能。如果你也想在自己的網頁加入使用者指引，那就試試在vue中使用 Intro.js 吧，它能夠很輕鬆的製作出新手指引的效果。

一、效果介紹

話不多說，咱們先來上一張圖看看效果

那激動人心的時刻到了，我們如何vue中使用 Intro.js 在呢？

二、Intro.js2.1、Intro.js的安裝

Intro.js 是一個輕量級的js庫，用於建立一步一步的產品引導，支援使用鍵盤的前後方向鍵導航，使用 Enter 和 ESC 鍵推出引導，您可以通過幾個簡單的步驟安裝Intro.js

Intro.js - Lightweight, user-friendly onboarding tour libraryintrojs.com

首先我們引入下述檔案

<div data-step="1" data-intro="第一步，歡迎！">歡迎，這是第一步。</div><div data-step="2" data-intro="第二步，你好！">你好，這是第二步。</div><div data-step="3" data-intro="第三步，大家好！">大家好，這是第三步。</div>

data-step 是步驟，data-intro 是對每一步的介紹。

最後我們加入JS程式碼就可以透過瀏覽器執行檢視效果啦(*￣︶￣)

<script>introJs().setOptions({    nextLabel: '下一個  →',    // 下一個按鈕文字    prevLabel: '← 上一個',     // 上一個按鈕文字    skipLabel: '跳過',              // 跳過按鈕文字    doneLabel: '立即體驗',           // 完成按鈕文字    hidePrev: true,                 // 在第一步中是否隱藏上一個按鈕    hideNext: true,                 // 在最後一步中是否隱藏下一個按鈕    exitOnOverlayClick: false,  // 點選疊加層時是否退出介紹    showStepNumbers: false,     // 是否顯示紅色圓圈的步驟編號    disableInteraction: true,   // 是否禁用與突出顯示的框內的元素的互動，就是禁止點選    showBullets: false          // 是否顯示面板指示點}).start();</script>

感覺如何，是不是很簡單，接下來我們學習如何在VUE專案中使用

三、 在vue-cli專案中使用3.1、準備

首先開啟專案，下載Intro.js模組

//使用yarnyarn add Intro.js//npmnpm i Intro.js -S//cnpmcnpm i Intro.js -S

3.2、使用

找到需要加新手引導的元件，匯入Intro.js元件和樣式

import introJs from 'intro.js'import 'intro.js/introjs.css'

在methods中封裝guide方法

// 匯出元件資料export default {    // 定義方法    methods: {        guide() {            introJs()            .setOptions({                nextLabel: '下一個',  // 下一個按鈕文字                prevLabel: '上一個',  // 上一個按鈕文字                skipLabel: '跳過',    // 跳過按鈕文字                doneLabel: '立即體驗',// 完成按鈕文字                hidePrev: true,       // 在第一步中是否隱藏上一個按鈕                hideNext: true,       // 在最後一步中是否隱藏下一個按鈕                exitOnOverlayClick: false,  // 點選疊加層時是否退出介紹                showStepNumbers: false,     // 是否顯示紅色圓圈的步驟編號                disableInteraction: true,   // 是否禁用與突出顯示的框內的元素的互動，就是禁止點選                showBullets: false          // 是否顯示面板指示點            }).start()        },    },}

接著在鉤子函式mounted中呼叫

import introJs from 'intro.js'import 'intro.js/introjs.css'// 匯出元件資料export default {    // 鉤子函式    mounted() {        this.guide()    },    // 定義方法    methods: {        guide() {            introJs()            .setOptions({                nextLabel: '下一個',  // 下一個按鈕文字                prevLabel: '上一個',  // 上一個按鈕文字                skipLabel: '跳過',    // 跳過按鈕文字                doneLabel: '立即體驗',// 完成按鈕文字                hidePrev: true,       // 在第一步中是否隱藏上一個按鈕                hideNext: true,       // 在最後一步中是否隱藏下一個按鈕                exitOnOverlayClick: false,  // 點選疊加層時是否退出介紹                showStepNumbers: false,     // 是否顯示紅色圓圈的步驟編號                disableInteraction: true,   // 是否禁用與突出顯示的框內的元素的互動，就是禁止點選                showBullets: false          // 是否顯示面板指示點            }).start()        },    },}

最後就是給需要加引導的盒模型加屬性就大功告成了

data-step="步驟數字" data-intro="每一步的介紹字串"

全部參考程式碼

好了到這裡就結束了，你學會了嗎，趕緊動動小手程式碼敲起來(～￣▽￣)～

3.3、效果

表頭的介紹的效果