首先在项目中下载Intro.js

1
2
3
4
5
6
7
8
//使用yarn
yarn add Intro.js

//npm
npm i Intro.js -S

//cnpm
cnpm i Intro.js -S

找到需要加新手引导的组件，导入Intro.js组件和样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
    <div class="safetyInfo">

        <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>
    </div>
</template>

import introJs from 'intro.js'
import 'intro.js/introjs.css'
import 'intro.js/themes/introjs-modern.css' // introjs主题  https://introjs.com/docs/themes/list
// 导出组件数据
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()
        },
    },
}