下载
npm install intro.js --save
import 'intro.js/introjs.css';
import IntroJs from 'intro.js'; 可以在引入皮肤的样式，支持主题设置
主要介绍几种用法
1、 不展示按钮，让用户点击指示点进行（一般不会这么干）
image.png
introJs().setOptions({
showButtons: false
}).start()
2、可在引导页中添加进度条
image.png
introJs().setOptions({
showProgress: true,
}).start()
3、引导页中设置类名
image.png
introJs().setOptions({
tooltipClass: 'customTooltip'
}).start()
.customTooltip * {
color: #4a4a4a;
font-size: 18px
}
.customTooltip .introjs-tooltip-title {
color: #0a41c9;
}
4、可设置一进入页面中心的提示,element属性不设置，默认在页面中间位置
image.png
introJs().setOptions({
steps: [{
title: 'Welcome',
intro: 'Hello World! ??'
},
{
element: document.querySelector('.card-demo'),
intro: 'This <b>STEP</b> focuses on an image. <br/> We also used some HTML tags!'
},
{
title: 'Farewell!',
element: document.querySelector('.card__image'),
intro: '<img src="https://images.unsplash.com/photo-1608096299210-db7e38487075?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" />'
}]
}).start();
5、不展示引导页提示，会在要展示的地方有个按钮闪烁，点击后提示引导
image.png
image.png
introJs().addHints();
6、可以直接在元素标签上使用data-intro and data-title最后调用introJs().start()；要是很复杂的话，看下面的7
image.png
<div data-title="Welcome!" data-intro="Hello World! ??" class="card-demo">
<div class="card shadow--md">
<div class="card__image" data-intro="Intro.js can highlight on elements">
<img
src="..."
alt="Image alt text"
title="Logo Title Text 1"
/>
</div>
<div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
</div>
</div>
introJs().start();
7、通过setOptions定制化
image.png
introJs().setOptions({
steps: [{
title: 'Welcome',
intro: 'Hello World! ??'
},
{
element: document.querySelector('.card-demo'),
intro: 'This step focuses on an image'
},
{
title: 'Farewell!',
element: document.querySelector('.card__image'),
intro: 'And this is our final step!'
}]
}).start();
8、当前引导页只展示一次，设置dontShowAgain:true即可，默认提示语是英文的，dontShowAgainLabel可自定义设置，之后不在展示，会用cookie存储判断，可设置 名称及有效期
image.png
introJs().setOption({
dontShowAgain: true,
dontShowAgainLabel: '当前引导页提示后，不在显示',
}).start();
9、可以设置引导页每次展示的位置不同，通过position即可
image.png
introJs().setOptions({
steps: [
{
element: document.querySelector('.card-demo'),
intro: 'Tooltip has position right',
position: 'right'
},
{
element: document.querySelector('.card-demo-link'),
intro: 'Tooltip has position left',
position: 'left'
},
{
element: document.querySelector('.card-demo-text'),
intro: 'Tooltip has position bottom',
position: 'bottom'
},
{
element: document.querySelector('.card-demo'),
intro: 'Tooltip has position top',
position: 'top'
}]
}).start();
10、设置showBullets指示点的隐藏/展示
image.png
introJs().setOptions({
showBullets: false
}).start()
11、还有其他的api，大家可以去官网查看
12、vue3中只能使用setOptions去使用，不能使用标签的形式data-title的方式
const leftMenu = ref(null);
onMounted(() => {
IntroJs()
.setOptions({
prevLabel: '上一步',
nextLabel: '下一步 ',
doneLabel: '我知道了',
showProgress: false, //todo 不展示进度条
disablInteraction: true,
exitOnOverlayClick: false, //todo 不允许点击空白处关闭
showStepNumbers: false, //todo 是否展示步数步骤
showButtons: true, //todo 是否展示底部按钮
showBullets: true, //todo 是否使用指示点展示进度
scrollToElement: true, //todo 是都滑动到高亮的区域
overlayOpacity: 0.6, //todo 遮罩层的透明度
// skipLabel: '退出',//todo 右上角的关闭按钮，可定制
// tooltipPosition: 'top',//todo 工具默认提示的位置，一般不设置即可
dontShowAgain: true,
dontShowAgainLabel: '当前引导页提示后，不在显示',
exitOnEsc: false, //todo 键盘的退出键，默认允许关闭，可设置不关闭
buttonClass: '', //todo 提示按钮的样式
steps: [
{
title: '欢迎进入宛励空间',
intro: '请完成页面知道在关闭引导页',
},
{
element: leftMenu.value.$el,
title: '左侧菜单',
intro: '一般我们可以在这个地方切换',
position: 'right',
},
],
})
//当点击最后一步之后，我们可以进行操作
.onbeforeexit(() => {
return ElMessage.success('111111');
})
.start();
});
