intro.js实现新手引导

实现效果：

安装：

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>