关于新手指导IntroJS，vue项目（vue3）和react项目（ant-design）的引用

安装插件

npm i introJs 

一、vue3项目中引用intro作新手引导

src/utils/util.js文件

import introJs from 'intro.js'

/**
 * @name: 新手指导
 * @param {String} pathname 当前页面的path
 * @param {Array} stepsArr 步骤内容（包括element、intro）
 * @return {*}
 */
export function guide (pathname, stepsArr) {
  let guideObj = JSON.parse(localStorage.getItem('guide')) || {}
  if (!guideObj[pathname]) {
    guideObj[pathname] = '1'
    localStorage.setItem('guide', JSON.stringify(guideObj))
    introJs().setOptions({
      'prevLabel': '← 上一步',
      'nextLabel': '下一步 →',
      'doneLabel': '我知道了',
      "skipLabel": '跳过',
      'showProgress': false,
      'disablInteraction': true,
      'steps': stepsArr
    }).start()
  }
}

xxx.vue文件

import * as Util from '@/utils/util.js' //引入公共封装的函数

<template>
	<el-button id="step1">导入商品</el-button>
</template>

mounted () {
    // 新手指导
    const stepsArr = [{
      element: '#step1',// id为step1的元素
      intro: '可以批量导入商品至购物车',
      position: 'left'
    }]
    Util.guide(this.$route.path, stepsArr) // 调用函数并传参
}

index.scss

// 新手指导 优化样式
.introjs-helperLayer {
  box-shadow: rgba(190, 190, 190, 0.2) 0px 0px 0px 5000px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
}

.introjs-tooltip {
  background-color: rgba(190, 190, 190, 0.0) !important;
  color: #fff;
  border: 2px dashed #fafafa;
  box-shadow: 0 0 black !important;
}

.introjs-arrow.top,
.introjs-arrow.top-middle,
.introjs-arrow.top-right {
  border-color: transparent transparent #fafafa !important;
  top: -20px;
  left: 20px;
}

.introjs-skipbutton:hover,
.introjs-skipbutton:focus {
  color: #fafafa;
  outline: none;
  text-decoration: none;
}

.introjs-arrow.top,
.introjs-arrow.top-middle,
.introjs-arrow.top-right {
  border-color: transparent transparent #fafafa !important;
  top: -20px;
  left: 20px;
}

.introjs-arrow.bottom,
.introjs-arrow.bottom-middle,
.introjs-arrow.bottom-right {
  border-color: #fafafa transparent transparent !important;
  bottom: -20px;
  left: 20px;
}

.introjs-arrow.left,
.introjs-arrow.left-bottom {
  left: -20px;
  border-color: transparent #fafafa transparent transparent !important;
}

.introjs-skipbutton {
  color: #fafafa !important;
}

.introjs-bullets ul li a.active {
  width: 15px;
  background: #fafafa !important;
}

.introjs-button {
  padding: 5px !important;
}

二、React项目中引用intro作新手引导

src/utils/public.js文件

import introJs from 'intro.js';
/**
 * @name: 新手指导
 * @description 若该界面是第一次进入，就存对应的 guide：{pathname：1} 在localStorage里面，
 * @param {String} pathname 当前页面的path
 * @param {Array} stepsArr 步骤内容（包括element、intro）
 * @return {*}
 */
 export function guide (pathname, stepsArr) {
  const guideObj = JSON.parse(localStorage.getItem('guide')) || {}
  if (!guideObj[pathname]) {
    guideObj[pathname] = '1'
    localStorage.setItem('guide', JSON.stringify(guideObj))
    if (stepsArr) {
      introJs().setOptions({
        'steps': stepsArr
      })
    }
    introJs().setOptions({
      'prevLabel': '← 上一步',
      'nextLabel': '下一步 →',
      'doneLabel': '我知道了',
      'showProgress': false,
      'disablInteraction': true,
      'steps': stepsArr
    }).start().oncomplete(() => {});
  }
}

xxx.jsx文件

import * as Public from '@/utils/public';

  // 新手指导
  useEffect(() => {
    const stepsArr = [
      {
        element: '#step1', // id为step1的元素
        intro: '点击“价格波动”即可查询商品的历史价格波动哦～',
        position: 'bottom'
      },
      {
        element: '#step2',
        intro: '点击“待办事项”可以查看到目前需要处理的工作哦～',
        position: 'bottom'
      },
      {
        element: '#step3',
        intro: '点击“预警事项”即可展示出商品库存不足或者商品临期',
        position: 'bottom'
      },
      {
        element: '#step4',
        intro: '点击“今日数据”即可展示出今天的业务量',
        position: 'top'
      }
    ]
    Public.guide(history.location.pathname, stepsArr)
  }, [])

global.less

// 新手指导 优化样式
.introjs-helperLayer {
  box-shadow: rgba(190, 190, 190, 0.2) 0px 0px 0px 5000px, rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
}
.introjs-tooltip {
  background-color: rgba(190, 190, 190, 0.0) !important;
  color: #fff;
  border: 2px dashed #fafafa;
  box-shadow: 0 0 black !important;
}
.introjs-arrow.top, .introjs-arrow.top-middle, .introjs-arrow.top-right {
  border-color: transparent transparent #fafafa !important;
  top: -20px;
  left: 20px;
}
.introjs-skipbutton:hover, .introjs-skipbutton:focus {
  color: #fafafa;
  outline: none;
  text-decoration: none;
}
.introjs-arrow.top, .introjs-arrow.top-middle, .introjs-arrow.top-right {
  border-color: transparent transparent #fafafa !important;
  top: -20px;
  left: 20px;
}
.introjs-arrow.bottom, .introjs-arrow.bottom-middle, .introjs-arrow.bottom-right {
  border-color: #fafafa transparent transparent !important;
  bottom: -20px;
  left: 20px;
}
.introjs-arrow.left, .introjs-arrow.left-bottom {
  left: -20px;
  border-color: transparent #fafafa transparent transparent !important;
}
.introjs-skipbutton {
  color: #fafafa !important;
}
.introjs-bullets ul li a.active {
  width: 15px;
  background: #fafafa !important;
}

localStorage里面的存储的效果如下