intro.js结合vue开发，项目实战

1.前言

最近项目里需要添加新人指引的功能，对项目而言更加智能化，对于新手用户而言可以更快更方便的使用项目，新手指引一般是对项目的流程的梳理，按照步骤进行业务的梳理和开发，前提是需要配合后端同学进行用户第一次登陆的验证，用户只需要一次提示，后续登陆不再需要提醒。

2.intro.js介绍

官网地址

https://www.dowebok.com/demo/2013/35/ 国内地址

introjs.com/#commercial  国外需要付费

使用简单

引入 js 和 css，然后在代码中加入步骤和介绍。

快速小巧

7 KB 的 JavaScript 和 3 KB CSS，就是全部。

免费开源

免费和开源（包括商业用途），MIT许可证下。

键盘加鼠标导航

鼠标或键盘 ←, →, ENTER 导航，ESC 键退出。

浏览器兼容

目前兼容 Firefox、Chrome 和 IE8，后续版本将会提供更好的兼容。

3.使用

安装

npm install intro.js --save

3.1新建一个intro.config.js文件配置

import introJs from 'intro.js';import 'intro.js/introjs.css'const introObj = introJs();export default introObj;

3.2引入

import * as Intro from './introJs.config.js';

3.3使用

  mounted() {    // 配置    setTimeout( () => {        Intro.setOptions({            steps: [                {                element: '#step', // 目标元素                intro:                    '欢迎使用实时看板<br /><br />实时看板挂载公司业绩播报大屏、各部门业务驾驶舱、定制化看板等实时看板，点击菜单即可查看', // 提示文本                position: 'right', // 提示位置                },            ],        });        this.$nextTick( () => {            // 开始            Intro.start();        });    }, 300);  }

3.4页面配置id

<template slot="title">            <div :id="root.id===8?'step':''">            <i :class="root.icon"></i>            <span>{{ $t(root.label) }}</span>            </div>          </template>

3.4卸载

    Intro.onexit(function () {
           // 其他操作
         })

4.第二种是使用方法

4.1 html部分

 <ul>
        <li :data-step="list.step" :data-intro="list.intro" :data-position="list.position" :data-disable-interaction="true">测试1</li>
        <li :data-step="list.step1" :data-intro="list.intro1" :data-position="list.position1":data-disable-interaction="true">测试2</li>
    </ul>

4.2js部分

import * as Intro from './introJs.config.js';
export default {
    data () {
        list: {
   step: '1',
            intro: '第一部分',
            position: 'top',

   step1: '2',
            intro: '第二部分',
            position: 'top'

        }
    },
    mounted () {
        if (!localStorage.getItem('isShowHelp')) {
          this.$nextTick(() => {
            // 开始
            Intro.start()
          })
          // 退出引导回调函数
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp', 1)
          })
        }
    }
}

5.配置中英文

nextLabel: '下一个', // 下一个按钮文字

prevLabel: '上一个', // 上一个按钮文字

skipLabel: '跳过', // 跳过按钮文字

doneLabel: '立即体验',// 完成按钮文字

hidePrev: true, // 在第一步中是否隐藏上一个按钮

hideNext: true, // 在最后一步中是否隐藏下一个按钮

exitOnOverlayClick: false, // 点击叠加层时是否退出介绍

showStepNumbers: false, // 是否显示红色圆圈的步骤编号

disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互，就是禁止点击

showBullets: false // 是否显示面板指示点