web端引导图introJs使用教程

官网地址点我看

先上图

官方实例图片：

项目成果图片：（糊掉了部分信息）

一、引入

<link rel="stylesheet" href="css/introjs.css">
<script src="js/intro.js"></script>
// or npm安装 Vue可用
npm i vue-introjs intro.js --save
// 在main.js 引入
import VueIntro from 'vue-introjs';
Vue.use(VueIntro);
import 'intro.js/introjs.css';
// 需要在vue.config.js中添加
module.exports = {configureWebpack: {plugins: [new webpack.ProvidePlugin({introJs: ['intro.js', 'introJs']})]}
}

二、使用

方法一：适用于步骤少，相对固定显示内容的dom元素。
方法二：适用于步骤较多，元素交互较多的情况。

方法1

直接用于dom元素：

data-step：表示显示的顺序，步骤
data-intro：表示显示提示框的内容，可以自定义内容
data-position：表示提示框出现在需要提示dom内容的相对位置：上下左右方。

<p class="signUpBtn stepOne"  style="margin-top: 25px" data-step="1" data-intro="<div class='title'>赛事报名</div><div class='content'>点击“点击报名”按键进行赛事报名
</div>" data-position="right">点击报名</p>

js:
introJs().start()

方法2

进行配置：

introJs().setOptions({// 配置按钮内容
'skipLabel': '跳过',
'prevLabel': "上一步",
'nextLabel': '下一步',
'doneLabel': '知道了',
// 配置内容 steps数组,内部一个对象代表一个步骤
steps:[{element: '.faked', // 元素
intro: '<div class=\'title\'>提示信息标题</div><div class=\'content\'>引导信息。\n' +
'</div>', // 内容
position: 'bottom-right-aligned' // 位置
}，{element: '.edit_btn'  ,
intro:'<div class=\'title\'>提示信息标题</div><div class=\'content\'>引导信息。\n' +
'</div>',
position: 'bottom-left-aligned'
}]
}).start().onchange(function(obj){// 切换上下按钮step发生变化时触发
})oncomplete(function(){// 点击跳过时触发
}).onexit(function(){// 退出时触发
})

默认配置setOption内容 (摘自源码)

 this._options = {/* Next button label in tooltip box */nextLabel: 'Next &rarr;',/* Previous button label in tooltip box */prevLabel: '&larr; Back',/* Skip button label in tooltip box */skipLabel: 'Skip',/* Done button label in tooltip box */doneLabel: 'Done',/* Hide previous button in the first step? Otherwise, it will be disabled button. */hidePrev: false,/* Hide next button in the last step? Otherwise, it will be disabled button. */hideNext: false,/* Default tooltip box position */tooltipPosition: 'bottom-right-aligned',/* Next CSS class for tooltip boxes */tooltipClass: '',/* CSS class that is added to the helperLayer */highlightClass: '',/* Close introduction when pressing Escape button? */exitOnEsc: true,/* Close introduction when clicking on overlay layer? */exitOnOverlayClick: false,/* Show step numbers in introduction? */showStepNumbers: true,/* Let user use keyboard to navigate the tour? */keyboardNavigation: true,/* Show tour control buttons? */showButtons: true,/* Show tour bullets? */showBullets: true,/* Show tour progress? */showProgress: false,/* Scroll to highlighted element? */scrollToElement: true,/** Should we scroll the tooltip or target element?** Options are: 'element' or 'tooltip'*/scrollTo: 'element',/* Padding to add after scrolling when element is not in the viewport (in pixels) */scrollPadding: 30,/* Set the overlay opacity */overlayOpacity: 0.8,/* Precedence of positions, when auto is enabled */positionPrecedence: ["bottom", "top", "right", "left"],/* Disable an interaction with element? */disableInteraction: false,/* Set how much padding to be used around helper element */helperElementPadding: 10,/* Default hint position */hintPosition: 'bottom-right-aligned',/* Hint button label */hintButtonLabel: 'Got it',/* Adding animation to hints? */hintAnimation: true,/* additional classes to put on the buttons */buttonClass: "introjs-button"};

项目中的样式是本人自定义的，代码如下：

body .introjs-helperNumberLayer {display: none;
}
body .introjs-skipbutton {width: 72px;height: 32px;background: #fff;border-radius: 2px;color: #999 !important;text-align: center;line-height: 25px;
}
body .introjs-nextbutton,
body .introjs-donebutton {width: 72px;height: 32px;background: #00C700 !important;border-radius: 2px;color: #fff !important;text-align: center;line-height: 25px;
}
body .introjs-disabled {display: none;
}
body .introjs-nextbutton:hover {background: #00C700;
}
body .introjs-button {border: none;text-shadow: none;
}
body .introjs-arrow.left {height: 8px;width: 53px;background: url("左箭头图片");background-repeat: no-repeat;background-size: cover;background-position: center bottom;border: none;left: -53px;
}
body .introjs-arrow.top-middle,
body .introjs-arrow.top,
body .introjs-arrow.top-middle {top: -52px;height: 56px;width: 9px;background: url("上箭头图片");background-repeat: no-repeat;background-size: cover;background-position: center bottom;border: none;
}
body .introjs-arrow.top-middle,
body .introjs-arrow.bottom,
body .introjs-arrow.top-middle,
body .introjs-arrow.bottom-right,
body .introjs-arrow.bottom-middle {bottom: -52px;height: 56px;width: 9px;background: url("上箭头图片");-webkit-transform: scaleY(-1);transform: scaleY(-1);background-repeat: no-repeat;background-size: cover;background-position: center bottom;border: none;
}
body .introjs-arrow.left-bottom {height: 8px;width: 53px;background: url("左箭头图片");background-repeat: no-repeat;background-size: cover;background-position: center bottom;border: none;left: -53px;bottom: 15px;
}
body .introjs-arrow.bottom-right {right: 15px;
}
body .introjs-arrow.top-right,
body .introjs-arrow.top-middle {top: -52px;height: 56px;width: 9px;background: url("上箭头图片");background-repeat: no-repeat;background-size: cover;background-position: center bottom;border: none;
}
body .introjs-tooltip {padding: 16px;width: 320px;height: 149px;
}
body .introjs-bullets {display: none;
}
body .introjs-tooltiptext .title {font-size: 16px;font-weight: 600;color: #333333;margin-bottom: 16px;
}
body .introjs-tooltiptext .content {font-size: 12px;font-weight: 500;color: #333333;
}
body .introjs-tooltiptext {height: 67%;
}

web端引导图introJs使用教程相关推荐

无需人工标注位置,一键在Web端CAD图上根据测点编号自动标注位置
需求分析 CAD图如下图所示在后台数据库中只有测点编号及测点值的信息,如下列列表测点编号测点类型测点值 DZ129-2 类型1 值1 DZ128-2 类型1 值2 DZ127-2 类型1 值3 ...
android pad版本 yy,YY直播在IOS端、Android端以及WEB端区别。
作为一名YY直播的深度用户,打算从设计规范.页面布局浅谈YY直播在三个平台的区别. 这是YY直播IOS端的首页,页眉使用滚动式导航(如图一,截的图片看不出来),页眉最右侧添加了一个下拉式菜单(图二), ...
用户数据销售额分析动态大屏看板+大屏数据可视化图表组件（折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图）+智能web端高保真大数据动态可视化大屏看板+中国动态地图+智慧电商实时动态数据大屏看板
作品内容:用户数据销售额分析动态大屏看板+大屏数据可视化图表组件(折线图+圆柱图+散点图+饼图+漏斗图+雷达图+水位图)+web端高保真大数据动态可视化大屏看板+中国动态地图+电商实时动态数据大屏看板 ...
Axure经典案例高保真交互下载（数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表、统计分析+用户画像分析）
Axure原型作品内容包括:数据统计图高保真原型+雷达图+条形图+折线图+web端通用后台管理原型+统计表.统计分析+用户画像分析+认证监控预警以下是Axure部分作品图片截图展示,想看交互效果的请 ...
使用ros3d.js实现web 端3D建图
使用ros3d.js实现web 端3D建图使用ros3d.js实现web 端3D建图前端资源下载: ros3d地图与小车模型显示-机器学习文档类资源-CSDN下载
一键在Web端把CAD图自动分割成多张图纸并导出子图或图片
前言在实际中,一个CAD文件中往往存放多张图纸,有时需要这些图纸分开,单独保存或显示.以往的做法是在cad中人工进行处理.今天小编教您在web端一键把CAD图自动分割成多张图纸并能把每个子图导出 ...
5款支持Web端创作的脑图工具，学习一款就够了
为了追求便利性,很多人都不想下载客户端,但是支持Web端操作的思维导图软件不多,今天就给大家整理了几款支持在Web端进行创作的脑图工具. 亿图脑图作为一款办公学习效率软件,亿图脑图能适用的平台还是比 ...
python123注册登录_用Python实现web端用户登录和注册功能的教程
用户管理是绝大部分Web网站都需要解决的问题.用户管理涉及到用户注册和登录. 用户注册相对简单,我们可以先通过API把用户注册这个功能实现了: _RE_MD5 = re.compile(r'^[0-9 ...
Web端CAD图形找不同？一键在Web端找出CAD图不同并对比分析
引言在实际中,当多专业设计协助时,遇到图纸更新后,要对比图纸找出图纸的不同处,一直是一个比较耗时费力的事情,也是业内的一大痛点.一般CAD新旧图纸的内容对比,包括增加新的图形元素.减少原有的图形元素 ...

web端引导图introJs使用教程

先上图

一、引入

二、使用

方法1

方法2

web端引导图introJs使用教程相关推荐

最新文章

热门文章