1 安装

最近新开发的项目需要添加新手指引，Intro.js 是一个轻量级的js库，用来实现创建一步步的产品操作指引是一个不错的选择，在这里做个简单的记录。我们前端项目使用的是 Vue 生态进行开发的项目，先安装依赖：

npm install intro.js --save

//使用yarn
yarn add Intro.js

//npm
npm i Intro.js -S

//cnpm
cnpm i Intro.js -S

2 API

简单记录各个API的说明：

//设置提示框属性
intro().setOptions({
	nextLabel: 'Next →', // 下一步按钮的显示名称
	prevLabel: '← Back', //上一步按钮的显示名称 
	skipLabel: 'Skip', //跳过按钮的显示名称
	doneLabel: 'Done', // 结束按钮的显示名称
	tooltipPosition: 'bottom', // 引导说明框相对高亮说明区域的位置
	tooltipClass: '', // 引导说明文本框的样式
	highlightClass: '', // 说明高亮区域的样式
	exitOnEsc: true, // 是否使用键盘Esc退出
	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' // 默认提示内容
})
// 开始介绍定义的元素
intro().start()
// 将回调设置为介绍完成后的回调。
intro().oncomplete(()=> {
  alert("end of introduction");
});
// 点击高亮地方之外触发的
intro().onexit(() =>{
  // 可以让页面回到顶部
  document.body.scrollTop = document.documentElement.scrollTop = 0;
});
// 可以获取下标
intro().onchange((obj) => { // 已完成当前一步  
	const num = parseInt($(obj).attr('data-step').match(/\d+/)[0]); // 当前的下标  
});

Intro.js 新手引导插件的使用笔记

1 安装

2 API