使用intro新手指引说明

首先安装 

npm i vue-introjs

和 

npm install intro.js --save

然后在对应视图中引入

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

template部分

<div  data-step="1" data-intro="这里是步骤1!" class="indexLogo">
  <el-button type="primary">
    点击按钮
  </el-button>
</div>
<div class="Auth" data-step="2" data-intro="这里是步骤2!">这是第二个部分</div>

在这个可以使用两种方法 第一种：data-step 对应步骤 data-intro对应展示提示的内容；

 guide() {
    introJs().setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "结束"
    }).oncomplete(function () {
        //点击跳过按钮后执行的事件
    }).onexit(function () {
        //点击结束按钮后， 执行的事件
    }).start();
}

第二种是steps分开写，通过class或者id进行关联。

 handleChece(){
introJs().setOptions({
  prevLabel:"上一步",
		nextLabel:"下一步",
		skipLabel:"关闭",
		doneLabel:"结束",
	    exitOnOverlayClick: false,// 是否允许点击空白处退出，默认true：允许
		showStepNumbers: true,// 是否显示说明的数据步骤  默认true:显示
        //对应的数组，顺序出现每一步引导提示
        steps: [
			{
                //第一步引导
                //这个属性类似于jquery的选择器， 可以通过jquery选择器的方式来选择你需要选中的对象进行指引
                element: '.indexLogo',
                //这里是每个引导框具体的文字内容，中间可以编写HTML代码
                intro: '<div class="intro_top_style">这里创建课程</div>',
                //这里可以规定引导框相对于选中对象出现的位置 top,bottom,left,right
                position: 'right'
            },
            {
                //第二步引导
                element: '.Auth',
                intro: '<div class="intro_top_style">授权</div>',
                position: 'button'
            }
 
        ]

}).start()
      },