效果图
详细api 请看 => introJs 官方文档
在index.html引入3个cdn文件
<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs-rtl.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.js"></script>
在对应要使用的vue文件实例化
introJs().goToStep(1).setOptions({
prevLabel: "上一步",
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "结束",/* 引导说明框相对高亮说明区域的位置 */|
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'}).oncomplete(function () {
//点击跳过按钮后执行的事件
}).onexit(function () {
//点击结束按钮后， 执行的事件
}).start();
在想使用步骤指引的元素上 加上如下加粗的 " data-step="1" data-intro="这里填写QQ APPID"
<el-form-item label="QQ APPID" :label-width="formLabelWidth" class="is-required" data-step="1" data-intro="这里填写QQ APPID">
<el-input type="text" v-model="configInfo.appId" ></el-input>
</el-form-item>
<el-form-item label="微信 APPID" :label-width="formLabelWidth" class="is-required" data-step="2" data-intro="这里填写微信 APPID">
<el-input type="text" v-model="configInfo.wxappId" ></el-input>
</el-form-item>
* 插入图片 直接在data-intro 插入 img标签 如下加粗部分
data-intro="这里填写QQ APPID <img src='http://tgl.oa.com/images/check-yes-icon.png' style='width:200px;height:200px;'>"
网友评论