引入
npm下载:npm install intro.js --save
在main.js中引入:
import IntroJs from 'intro.js'
import 'intro.js/introjs.css';
Vue.use(IntroJs);
参数详解
页面
在需要引导说明的标签上加入如下属性,插件就自动将当前标签区域高亮选中:
<div data-step="1" data-intro="这里是步骤1!"></div>
<div data-step="2" data-intro="这里是步骤2!"></div>
<div data-step="3" data-intro="这里是步骤3!"></div>
说明:
- data-step:第几步
- data-intro:分布引导的内容
- data-position:引导内容显示位置,
参数:left,right,top,bottom
JS
在js中引用的还有两种重要的方法:
- oncomplete 选中“跳过”按钮回调方法
- onexit选中“结束”按钮回调方法
一般在页面加载时调用即可:
//访问引导页
function guide() {
introJs().setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "结束"
}).oncomplete(function () {
//点击跳过按钮后执行的事件
}).onexit(function () {
//点击结束按钮后, 执行的事件
}).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'