实现效果:
安装:
npm install intro.js
页面组件引入:
import introJs from 'intro.js';
import 'intro.js/introjs.css';
初始化:
<template>
<section class="sfgrd-main-wrap guide-page-wraper" id="guide-page-wraper">
// 表格相关
<div>
...
</div>
<div class="mengcheng" v-show="showMask"></div>
<div class="contWraper" v-show="showMask">
<div class="top"></div>
<div class="bottom">
<div class="textCont">
<div class="bigt">新功能已了解</div>
<div class="smallt">让我们更好为您提供功能,快去使用吧!</div>
</div>
</div>
<img class="img" src="./assets/img/done.png" alt="">
<span class="close el-icon-close" @click="closePage"></span>
<div class="btn" @click="showAgin">再看一遍</div>
</div>
</section>
</template>
// methods方法:
guide() {
const introContainer = document.getElementById('guide-page-wraper');
introJs('#guide-page-wraper')
.setOptions({
nextLabel: '下一步', // 下一个按钮文字
prevLabel: '上一步', // 上一个按钮文字
skipLabel: '跳过', // 跳过按钮文字(不想显示跳过按钮,已通过css隐藏)
doneLabel: '完成', // 完成按钮文字
hidePrev: true, // 在第一步中是否隐藏上一个按钮
hideNext: false, // 在最后一步中是否隐藏下一个按钮
exitOnEsc: false, // 点击键盘的ESC按钮是否退出指引
keyboardNavigation: true, // 是否允许键盘来操作
exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
showStepNumbers: false, // 是否显示步骤编号
disableInteraction: true, // 是否禁用与突出显示的框内的元素的交互,就是禁止点击
showBullets: false, // 是否显示面板指示点
overlayOpacity: 0.5, // 遮罩层的透明度 0-1之间
highlightClass: "statci-guide-page-intro-highlight", // 说明高亮区域的样式
tooltipClass: 'statci-guide-page-customTooltip',
steps: [ // 引导框内的相关参数配置
{
element: document.querySelectorAll('.guide-page-wraper .tk-light-conditions')[0],
title: '筛选区',
intro: '查询条件选择区,可在此区域设置查询条件,精准查询所需数据。'
},{
element: document.querySelectorAll('.guide-page-wraper .tk-inner-button--medium')[2],
title: '展开/收起',
intro: '展开/收起查询条件,“展开”查看更多筛选条件“收起”能看到更多表格数据。'
},{
element: document.querySelectorAll('.guide-page-wraper .tk-light-buttons')[0],
title: '批量操作按钮区',
intro: '新增、删除、审核等批量操作按钮区,可选多行数据进行操作。(提示:单行数据的审核、删除等操作会放在数据表的“操作”列)'
},{
element: document.querySelector('.guide-page-wraper .tk-light-table .el-table__fixed-right'),
title: '单行操作按钮区',
intro: '数据表格“操作”列放置单行操作按钮,便于看到数据即可进行操作。',
position: 'left'
}
]
}).oncomplete(() => { // 点击结束按钮后执行的事件
}).onexit(() => { // 点击跳过按钮后执行的事件
}).onbeforeexit(() => { // 确认完毕之后执行的事件
// this.showMaskFun();
}).start();
},
// css样式
<style lang="less">
.guide-page-wraper {
position: relative;
.must-star:before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
.text-blue {
color: dodgerblue;
cursor: pointer;
}
.amount-text {
color: dodgerblue;
font-size: 14px;
margin-left: 5px;
}
.introjs-overlay {
position: absolute !important;
left: 0;
top: 0;
}
.mengcheng {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.52);
}
.contWraper {
width: 560px;
height: 206px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 30;
.top {
width: 100%;
height: 46px;
}
.bottom {
width: 100%;
height: 160px;
background-image: url(./assets/img/bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-left: 220px;
box-sizing: border-box;
overflow: hidden;
display: flex;
align-items: center;
.bigt {
font-size: 30px;
color: #000000;
line-height: 38px;
font-weight: 500;
}
.smallt {
margin-top: 8px;
font-size: 12px;
color: #666666;
line-height: 20px;
font-weight: 400;
}
}
.img {
display: block;
width: 200px;
height: 206px;
position: absolute;
bottom: 0;
left: 20px;
}
.close {
position: absolute;
top: 62px;
right: 16px;
font-size: 16px;
padding: 4px;
color: #141414;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.btn {
width: 72px;
height: 28px;
position: absolute;
right: 24px;
bottom: 16px;
display: flex;
justify-content: center;
align-items: center;
background: #3355FF;
border-radius: 4px;
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
}
.introjs-tooltipReferenceLayer,
.introjs-helperLayer,
.introjs-overlay,
.introjs-disableInteraction,
.introjs-showElement {
z-index: 100 !important;
}
}
/deep/ .grey-table-row {
background-color: rgb(217, 236, 255);
}
.guide-page-wraper .introjs-tooltipReferenceLayer .statci-guide-page-customTooltip {
background-color: rgb(48, 109, 229);
color: #fff;
font-size: 13px;
.introjs-tooltip-title {
font-size: 15px;
font-weight: 600;
color: #FFFFFF;
}
.introjs-tooltiptext {
padding: 16px 18px;
line-height: 18px;
}
.introjs-skipbutton {
right: 10px;
color: #fff;
font-size: 15px;
height: 42px;
line-height: 42px;
font-weight: 600;
display: none;
}
.introjs-arrow.top {
border-bottom-color: rgb(48, 109, 229);
}
.introjs-arrow.bottom {
border-top-color: rgb(48, 109, 229);
}
.introjs-arrow.right {
border-left-color: rgb(48, 109, 229);
}
.introjs-arrow.left {
border-right-color: rgb(48, 109, 229);
}
.introjs-arrow.top-right {
border-bottom-color: rgb(48, 109, 229);
}
.introjs-arrow.bottom-middle {
border-top-color: rgb(48, 109, 229);
}
.introjs-tooltipbuttons {
border-top: none;
padding: 10px 20px;
.introjs-button {
border: none;
text-shadow: none;
font-size: 12px;
padding: 0.5rem 0.8rem;
color: rgb(48, 109, 229);
outline: none;
text-decoration: none;
border: 0;
&:focus {
outline: none;
box-shadow: none;
}
}
}
}
</style>