先看页面效果：
1、不做任何样式修改，vue-introjs默认的样式效果如下：可以配置title，跳过，上一步，下一步等
2、修改修改样式，根据自己需求去做效果如下：
web端和h5都可以使用，具体用法如下：
一、npm安装
vue-introjs 是在 Vue 中绑定 intro.js 所使用的。vue-introjs 中没有内置 intro.js，所以在使用前请确保已安装 intro.js。
npm i intro.js npm i vue-introjs
二、webpack配置：在webpack的plugins中做以下配置
plugins: [ // other modules new webpack.ProvidePlugin({ 'introJs': ['intro.js'] }) ],
三、main.js中引入
安装了 intro.js 之后，webpack.ProvidePlugin 将会使用它，所以不需要在 src/main.js 中使用 import introJs from 'intro.js' 来引用。
但是需要在main.js中引入使用vue-introjs
import VueIntro from 'vue-introjs'; Vue.use(VueIntro); import 'intro.js/introjs.css';
四、页面中使用：需要在页面渲染完成后，使用，下面steps中配置需要引导元素的element：id或者类名即可，disableInteraction: true，与本身元素不关联，防止引导期间可以操作输入等
mounted() { this.$nextTick(() => { this.initIntro(); }); }, methods: { initIntro() { let steps = [ { element: "#EHRCode", intro:"介绍信息", position: "right" }, { element: "#SpareEmail", intro:"介绍信息", position: "right" } ]; var intro = introJs(); intro.setOptions({ prevLabel: "上一步", nextLabel: "下一步", skipLabel: "跳过", doneLabel: "完成", tooltipPosition: "bottom" /* 引导说明框相对高亮说明区域的位置 */, hidePrev: "true", //隐藏第一步中的上一个按钮 tooltipClass: "xxx" /* 引导说明文本框的样式 */, highlightClass: "xxxxx" /* 说明高亮区域的样式 */, exitOnOverlayClick: false /* 是否允许点击空白处退出 */, showStepNumbers: false /* 是否显示说明的数据步骤*/, keyboardNavigation: false /* 是否允许键盘来操作 */, showButtons: true /* 是否按键来操作 */, showBullets: false /* 是否使用点点点显示进度 */, showProgress: true /* 是否显示进度条 */, scrollToElement: true /* 是否滑动到高亮的区域 */, overlayOpacity: 0.8 /* 遮罩层的透明度 */, positionPrecedence: [ "bottom", "top", "right", "left" ] /* 当位置选择自动的时候，位置排列的优先级 */, disableInteraction: true, /* 是否禁止与元素的相互关联 */ steps:steps }); intro.oncomplete(() => { //点击结束按钮后执行的事件 console.log("oncomplete"); }); intro.onexit(() => { //点击跳过按钮后执行的事件 console.log("onexit"); }); intro.onchange(() => { //点击下一步执行的事件 console.log("onchange"); }); intro.start(); }, }
五、关键字：setOption 主要参数如下：
/* 下一步按钮的显示名称 */ nextLabel: 'Next →', /* 上一步按钮的显示名称 */ prevLabel: '← Back', /* 跳过按钮的显示名称 */ skipLabel: 'Skip', /* 结束按钮的显示名称 */ doneLabel: 'Done', /* 引导说明框相对高亮说明区域的位置 */ tooltipPosition: 'bottom', /* 引导说明文本框的样式 */ tooltipClass: '', /* 说明高亮区域的样式 */ highlightClass: '', /* 是否使用键盘Esc退出 */ exitOnEsc: true, /* 是否允许点击空白处退出 */ exitOnOverlayClick: true, /* 是否显示说明的数据步骤*/ showStepNumbers: true, /* 是否允许键盘来操作 */ keyboardNavigation: true, /* 是否按键来操作 */ showButtons: true, /* 是否使用点点点显示进度 */ showBullets: true, /* 是否显示进度条 */ showProgress: false, /* 是否滑动到高亮的区域 */ scrollToElement: true, /* 遮罩层的透明度 */ overlayOpacity: 0.8, /* 当位置选择自动的时候，位置排列的优先级 */ positionPrecedence: ["bottom", "top", "right", "left"], /* 是否禁止与元素的相互关联 */ disableInteraction: false, /* 默认提示位置 */ hintPosition: 'top-middle', /* 默认提示内容 */ hintButtonLabel: 'Got it'
注意：样式可以根据自己的需求做覆盖，显示影藏某些按钮可以配置或用js隐藏
