引言

為了讓使用者更好的適應新版，或更方便使用公司內部系統，可以加入新手指引功能。如果你也想在自己的網頁加入使用者指引，那就試試在 vue 中使用 Intro.js 吧，它能夠很輕鬆的製作出新手指引的效果。 一、效果介紹 話不多說，咱們先來上一張圖看看效果

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

二、Intro.js

2.1、Intro.js 的安裝

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

Intro.js - Lightweight, user-friendly onboarding tour library​introjs.com​

首先我們引入下述檔案

<link rel="stylesheet" href="https://unpkg.com/intro.js/minified/introjs.min.css">
<script src="https://unpkg.com/intro.js/minified/intro.min.js"></script>
複製程式碼

2.2、Intro.js 基本使用

接著在 HTML 檔案中加入基本結構

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

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

三、 在 vue-cli 專案中使用

3.1、準備

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

//使用yarn
yarn add Intro.js
//npm
npm i Intro.js -S
//cnpm
cnpm 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="每一步的介紹字串" 全部參考程式碼

<template>
<div class="admin">

    <!-- 
    <section class="menu">
        <ul>
            <li data-step="1" data-intro="1" >測試1</li>
            <li data-step="2" data-intro="2" >測試2</li>
            <li data-step="3" data-intro="3" >測試3</li>
            <li data-step="4" data-intro="4" >測試4</li>
        </ul>
    </section>
    --> 

    <!-- 左側導航 --> 
    <div class="menu" v-bind:style="{width: menuWStyle}"  data-step="1" data-intro="導航選單">
        <!-- <el-radio-group v-model="isHiddenMenu" style="margin-bottom: 20px;">
            <el-radio-button :label="false">展開</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
        </el-radio-group> -->
        <el-menu 
            v-loading="menuLoading"
            :default-active="$route.path" 
            class="el-menu-vertical-demo"
            :collapse="isHiddenMenu"
            :collapse-transition="false"
            background-color="#263445"
            text-color="rgb(191, 203, 217)"
        >
            <el-submenu v-for="(firstItem) in menus" :index="firstItem.auth_id" :key="firstItem.auth_id">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{firstItem.auth_name}}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item 
                        v-for="twoItem in firstItem.children"
                         :key="twoItem.auth_id"
                        :index="twoItem.url" 
                        @click="jump(twoItem.url)"
                    ><i class="el-icon-setting"></i>{{twoItem.auth_name}}</el-menu-item>
                </el-menu-item-group>
            </el-submenu>
​
        </el-menu>
    </div>
    <!-- /左側導航 -->
    <!-- 右側內容 -->
    <div class="main">
        <!-- 頂部 -->
        <div class="top">