vue项目中使用intro.js引导组件

1、在项目中安装依赖

• 使用 yarn 安装 yarn add intro.js
• 使用 npm 安装 npm install intro.js --save

2、在vue.config.js文件中配置

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        introJs: ['intro.js'],
      }),
    ],
  },
})

3、在main.js文件中引入组件并挂载到实例上

import introJS from 'intro.js'
import 'intro.js/introjs.css'
Vue.prototype.$intro = introJS
/**
 * introjs主题
 * introjs-dark
 * introjs-flattener
 * introjs-modern
 * introjs-nassim
 * introjs-nazanin
 * introjs-royal
*/
import 'intro.js/themes/introjs-flattener.css' 

4、在页面中使用

<template>
  <div>
    <div id="step1" class="warper">第1步</div>
    <div id="step2" class="warper">第2步</div>
    <div id="step3" class="warper">第3步</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      introOption: {
	    // 这里是更换成中文（默认英文）
	    prevLabel: '上一步',
	    nextLabel: '下一步',
	    skipLabel: '跳过',
	    doneLabel: '完成',
	    /* 引导说明框相对高亮说明区域的位置 */
	    tooltipPosition: 'bottom',
	    /* 引导说明文本框的样式 */
	    tooltipClass: 'intro-tooltip',
	    /* 说明高亮区域的样式 */
	    highlightClass: 'intro-highlight',
	    /* 引导说明框相对高亮说明区域的位置 */
	    tooltipPosition: 'bottom',
	    /* 是否使用键盘Esc退出 */
	    exitOnEsc: true,
	    /* 是否允许点击空白处退出 */
	    exitOnOverlayClick: false,
	    /* 提示边框的padding */
	    helperElementPadding: 2,
	    /* 是否显示说明的数据步骤 */
	    showStepNumbers: false,
	    /* 是否允许键盘来操作 */
	    keyboardNavigation: true,
	    /* 是否按键来操作 */
	    showButtons: true,
	    /* 是否使用点显示进度 */
	    showBullets: false,
	    /* 是否显示进度条 */
	    showProgress: false,
	    /* 是否滑动到高亮的区域 */
	    scrollToElement: true,
	    /* 遮罩层的透明度 */
	    overlayOpacity: 0.9,
	    /* 当位置选择自动的时候，位置排列的优先级 */
	    positionPrecedence: ['bottom', 'top', 'right', 'left'],
	    /* 是否禁止与元素的相互关联 */
	    disableInteraction: false,
	    /* 是否在第一步隐藏上一步 */
	    // hidePrev: true,
	    /* 是否在最后一步隐藏下一步 */
	    // hideNext: true,
	    /* steps步骤，可以写个工具类保存起来 */
	    steps: [],
        }, // 参数对象
      }
    },
    mounted() {
      // 挂载完以后再调用
      this.initGuide()
    },
    methods: {
      initGuide() {
        // 绑定标签元素的选择器数组
        this.introOption.steps = [
		    {
		      // title: 'Welcome',
		      element: '#step1',
		      intro: '步骤1：step1!',
		    },
		    {
		      element: '#step2',
		      intro: '步骤2：step2!',
		    },
		    {
		      element: '#step3',
		      intro: '步骤3：step3!',
		    },
		    {
		      element: '#step4',
		      intro: '步骤4：step4!',
		    },
		  ]
		this.$intro()
		    .setOptions(this.introOption)
		    // 点击结束按钮后执行的事件
		    .oncomplete(() => {
		      console.log('点击结束按钮后执行的事件')
		    })
		    // 点击跳过按钮后执行的事件
		    .onexit(() => {
		      console.log('点击跳过按钮后执行的事件')
		    })
		    // 确认完毕之后执行的事件
		    .onbeforeexit(() => {
		      console.log('确认完毕之后执行的事件')
		    })
		    .start()
		},
  	}
}
</script>

<style lang="less">
.warper {
  width: 200px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid saddlebrown;
}
/* 重置引导组件样式(类似element-ui个人使用) */
.intro-tooltip {
  color: #ffff;
  background: #2c3e50;
}
/* 引导提示框的位置 */
.introjs-bottom-left-aligned {
  left: 45% !important;
}
.introjs-right,
.introjs-left {
  top: 30%;
}
.intro-highlight {
  background: rgba(255,255,255,0.5);
}
.introjs-arrow.left {
  border-right-color: #2c3e50;
}
.introjs-arrow.top {
  border-bottom-color: #2c3e50;
}
.introjs-arrow.right {
  border-left-color: #2c3e50;
}
.introjs-arrow.bottom {
  border-top-color: #2c3e50;
}
/* 提示框头部区域 */
.introjs-tooltip-header {
  padding-right: 0 !important;
  padding-top: 0 !important;
}
.introjs-skipbutton {
  color: #409eff !important;
  font-size: 14px !important;
  font-weight: normal !important;
  padding: 8px 10px !important ;
}
.introjs-tooltipbuttons {
  border: none !important;
}
.introjs-tooltiptext {
  font-size: 14px !important;
  padding: 15px !important;
}
/* 提示框按钮 */
.introjs-tooltipbuttons {
  display: flex;
  align-items: center;
  justify-content: center;
}
.introjs-button {
  width: 50px !important;
  text-align: center;
  padding: 4px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 3px !important;
  border: none !important;
}
.introjs-button:last-child {
  margin-left: 10px;
}
.introjs-prevbutton {
  color: #606266 !important;
  background: #fff !important;
  border: 1px solid #dcdfe6 !important;
}
.introjs-nextbutton {
  color: #fff !important;
  background-color: #409eff !important;
  border-color: #409eff !important;
}
.introjs-disabled {
  color: #9e9e9e !important;
  border-color: #bdbdbd !important;
  background-color: #f4f4f4 !important;
}
</style>