前言
在工作中遇到需要对新注册用户进行教程指引功能，搜寻过许多方案感觉都不是那么便捷，步骤比较多的情况，手写遮罩层往往可能会比较的慢，最终觉得intro.js解决的很快，非常容易上手，看到网上对此教程的不多，并且没有中文文档！！！所以在工作之余突发奇想写一篇记录一下本人使用此插件的过程。
这是第二次记录文章，感兴趣的小伙伴可以先去官网看看。
introjs官网：introjs.com
一、安装
npm i intro.js
二、引入
在main.js中引入下方代码
import intro from 'intro.js' // 引入introjs库
import 'intro.js/introjs.css' // 引入introjs默认css样式
import 'intro.js/themes/introjs-modern.css' // 引入introjs主题 有多种主题可以选择 详见下方解释
Vue.prototype.$intro = intro // 加到prototype中，直接通过vue实例就能直接调用intro了
introjs.com/docs/themes… 官网提供了许多主题
可以根据自己喜欢哪种主题更改对应引入introjs主题文件就行
三、使用
下方图片展示的为初始样式：
1.第一步首先在所想指引的标签上 加上id
<div class="step_box">
<div id="step1" class="box1">这里是第1步</div>
<div id="step2" class="box1">这里是第2步</div>
<div id="step3" class="box1">这里是第3步</div>
</div>
2.第二步在data中定义初始参数
introOption: {
isActive: true , // 是否开始指引
steps: [], // steps步骤
prevLabel: "Back", // back按钮
nextLabel: "Next", // next按钮
skipLabel: "Skip", // skip按钮
doneLabel: "Finish", // finish按钮
hidePrev: true, //是否在第一步隐藏上一步
hideNext: true, // 是否在最后一步隐藏下一步
nextToDone:false, //是否将下一步按钮 改为最后一步
tooltipPosition: "bottom", //引导说明框相对高亮说明区域的位置
tooltipClass: "intro-tooltip", //引导说明文本框的样式
buttonClass:"intro-btn",//引导说明按钮的样式
progressBarAdditionalClass:"intro-progress",//引导说明进度条的样式
highlightClass: "intro-highlight", // 说明高亮区域的样式
exitOnEsc: true, // 是否使用键盘Esc退出
exitOnOverlayClick: false, //是否允许点击空白处退出
showStepNumbers: false, //是否显示说明的数据步骤
keyboardNavigation: true, // 是否允许键盘来操作
showButtons: true, // 是否按键来操作
showBullets: false, // 是否使用点显示进度
showProgress: false, // 是否显示进度条
scrollToElement: true, // 是否滑动到高亮的区域
overlayOpacity: 0.9, // 遮罩层的透明度
positionPrecedence: ["bottom", "top", "right", "left"], // 当位置选择自动的时候，位置排列的优先级
disableInteraction: false, // 是否禁止与元素的相互关联
helperElementPadding: 2, //提示边框的padding
}, // 参数对象
};
我这里列举了大部分能经常使用的可配置参数并用注释标注了该参数的说明
3.第三步在methods中定义一个initStep()函数
initStep() {
// 绑定对应标签元素的选择器数组（对应的步骤）
this.introOption.steps = [
{
// title: 'Welcome', //这里是可以定义指引框标题
element: "#step1",
intro: "这里是第1步!",
},
{
element: "#step2",
intro: "这里是第2步!",
},
{
element: "#step3",
intro: "这里是第3步",
}
];
this.$intro()
.setOptions(this.introOption)
// 点击结束按钮后执行的事件
.oncomplete(() => {
console.log("1");
})
// 点击跳过按钮后执行的事件
.onexit(() => {
console.log("2");
})
// 确认完毕之后执行的事件
.onbeforeexit(() => {
console.log("3");
})
//改变就会执行的事件
.onchange(function (res) {
})
.start();
},
4.第四步在mounted中调用上述方法（一定要在dom挂载之后调用 在created中可能会造成获取不到dom指引框错位等情况）
mounted() {
// 挂载完以后再调用
this.initGuide();
},
5.第五步 运行就可以了
