前言
Intro.js的官方文档：introjs.com/docs/gettin... 利用Intro.js实现简单的新手引导
效果：
下载依赖配置
打开官网可以看到官网的下载依赖
js
npm install intro.js --save
yarn add intro.js当然也可以下载到本地引入使用 连接
打开连接引入对应版本的js文件和css文件（连接为线上地址，可以打开把内容复制到本地文件中引入）
页面引入实现效果
1.引入js和css文件（这里我是下载到了本地）
HTML
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./introjs.css" />
</head>
<script type="text/javascript" src="./intro.js"></script>2.DOM元素，其中data-intro是每一步的备注讲解；data-step是第几步第几步
HTML
<div id="app">
<div class="v2">
<div class="v" data-step="1" data-intro="第1步,先这样" style="width: 100px;">我 是内容1</div>
<div class="v" data-step="2" data-intro="第2步,再先这样" style="width: 100px;">我是内容2</div>
<div class="v" data-step="3" data-intro="第3步,最后这样" style="width: 100px;">我是内容3</div>
</div>
<el-button @click="caozuo()">操作引导</el-button>
</div>3.调用方法 其中mounted里面是打开页面就调用，当然也可以通过按钮去调用方法。 confirm("请确认是否退出操作引导")为退出操作引导时的一个确认信息
js
<script>
let vm = new Vue({
el: '#app',
data: {
},
mounted() {
introJs(".v2").onbeforeexit(function () {
return confirm("请确认是否退出操作引导");
}).start()
},
methods: {
caozuo() {
introJs(".v2").onbeforeexit(function () {
return confirm("请确认是否退出操作引导");
}).start()
}
}
})
</script>更多配置(调用方式分为两种)
1.有一些常用配置项帮大家列举出来可自行根据需求更改
js
introJs('.v2').setOptions({
nextLabel: "下一步", // 下一个的按钮文字
prevLabel: "上一步", // 上一个按钮文字
// skipLabel: "跳过", // 跳过指引的按钮文字
doneLabel: "完成", // 完成按钮的文字
hidePrev: false, // 是否在第一步中隐藏"上一步"按钮;不隐藏，将呈现为一个禁用的按钮
hideNext: false, // 是否在最后一步中隐藏"下一步"按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
showStepNumbers: false, // 是否显示步骤编号
disableInteraction: true, // 是否禁用高亮显示框内元素的交互
showBullets: true, // 是否显示面板的指示点
overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
helperElementPadding: 10, // 选中的指引元素周围的填充距离
showProgress: true, //进度条
})
// 点击结束按钮后执行的事件
.oncomplete(() => {
})
// 点击跳过按钮后执行的事件
.onexit(() => {
})
// 确认完毕之后执行的事件
.onbeforeexit(() => {
localStorage.setItem("introValue1","true")
}).start();根据DOM元素ID进行引导
js
// 绑定标签元素的选择器数组
let yindaoList = [
{
element: document.querySelector('#problemDescription'), // 定位到相应的元素位置，如果不设置element，则默认展示在屏幕中央
title: '提交工单', // 标题
intro: '这里用来描述您的问题' // 内容
},
{
element: document.querySelector('#attachments'),
title: '提交工单', // 标题
intro: '这里可以上传附件' // 内容
},
{
element: document.querySelector('#telephone'),
title: '提交工单', // 标题
intro: '留下您的电话吧~方便专业顾问联系您' // 内容
},
{
element: document.querySelector('#submit'),
title: '提交工单', // 标题
intro: '别忘了要点击提交' // 内容
},
{
element: document.querySelector('#historicalWorkOrder'),
title: '提交工单', // 标题
intro: '这里可以查看历史提交工单' // 内容
},
];
introJs().setOptions({
steps: yindaoList, //上面声明的数组
nextLabel: "下一步", // 下一个的按钮文字
prevLabel: "上一步", // 上一个按钮文字
// skipLabel: "跳过", // 跳过指引的按钮文字
doneLabel: "完成", // 完成按钮的文字
hidePrev: false, // 是否在第一步中隐藏"上一步"按钮;不隐藏，将呈现为一个禁用的按钮
hideNext: false, // 是否在最后一步中隐藏"下一步"按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
showStepNumbers: false, // 是否显示步骤编号
disableInteraction: true, // 是否禁用高亮显示框内元素的交互
showBullets: true, // 是否显示面板的指示点
overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
helperElementPadding: 10, // 选中的指引元素周围的填充距离
showProgress: true, //进度条
})
// 点击结束按钮后执行的事件
.oncomplete(() => {
})
// 点击跳过按钮后执行的事件
.onexit(() => {
})
// 确认完毕之后执行的事件
.onbeforeexit(() => {
localStorage.setItem("introValue1","true")
}).start();结束
最后希望本篇文章能够帮助小伙伴们，更多详细配置api可以看一下官方文档，里面都很详细 官网连接