使用intro.js实现web页面的引导页

1、引入intro的js和对于的样式，如下：

<!-- 引入 Intro.js 的 CSS 文件 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/introjs.min.css">


<!-- 引入 Intro.js 的 JavaScript 文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.0.0/intro.min.js"></script>

2、在vue中使用需要页面的DOM元素加载完成，在进行初始化引导页面

const initPageIntro = () => {// 引导图const allSteps = [{element: '#left-box', //这是添加引导的元素idtitle:"",intro: '自由清单能力展示', //这是引导提示内容position: 'right' //这是引导位置},{element: '#middle-top',title:"",intro: '',position: 'left'},{element: '#middle-bottom',title:"TOP10",intro: '',position: 'top'},{element: '#right-box',title:"",intro: '',position: 'left'},]const curIntro = IntroJs()curIntro.setOptions({prevLabel: `上一步`,nextLabel: `下一步`,skipLabel: `跳过`,doneLabel: `完成`,tooltipPosition: `bottom` /* 引导说明框相对高亮说明区域的位置 */,tooltipClass: `` /* 引导说明文本框的样式 */,highlightClass: `` /* 说明高亮区域的样式 */,exitOnOverlayClick: false /* 是否允许点击空白处退出 */,showStepNumbers: false /* 是否显示说明的数据步骤*/,keyboardNavigation: false /* 是否允许键盘来操作 */,showButtons: true /* 是否按键来操作 */,showBullets: true /* 是否使用点点点显示进度 */,showProgress: false /* 是否显示进度条 */,scrollToElement: true /* 是否滑动到高亮的区域 */,overlayOpacity: 0.6 /* 遮罩层的透明度 */,positionPrecedence: [`bottom`, `top`, `right`, `left`] /* 当位置选择自动的时候，位置排列的优先级 */,disableInteraction: false, /* 是否禁止与元素的相互关联 */hintPosition: 'top-middle',exitOnEsc :true,steps: allSteps})curIntro.oncomplete(() => {// 点击结束按钮后执行的事件console.log(`oncomplete`)})curIntro.onexit(() => {// 点击跳过按钮后执行的事件console.log(`onexit`)})curIntro.onchange(() => {// 点击下一步执行的事件console.log(`onchange`)})curIntro.start()
}