Vue使⽤intro.js新⼿指引引⼊
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>
说明：
1. data-step：第⼏步
2. data-intro：分布引导的内容
3. data-position：引导内容显⽰位置，
参数：left,right,top,bottom
JS
在js中引⽤的还有两种重要的⽅法：
1. oncomplete 选中“跳过”按钮回调⽅法
javascript说明2. 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'

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。