如何在vue项目中使用用intro.js新手引导功能呢?这里需要使用到vue-introjs插件，vue-introjs是在Vue中绑定intro.js所使用的。在使用vue-introjs前，需要先安装intro.js

npm安装

npm i intro.js --save
npm i vue-introjs --save

webpack配置

// webpack.config.js
{
    plugins: [
        new webpack.ProvidePlugin({
            // other modules
            introJs: ['intro.js']
        })
    ]
}

如果是vue-cli3的项目，则在vue.config.js 

chainWebpack: config => {
    config.plugin('provide').use(webpack.ProvidePlugin, [{
      // other modules
      introJs: ['intro.js']
    }])    
}

main.js中引入

在webpack中配置后，webpack.ProvidePlugin将会使用它，所以不需要在main.js中使用import introJs from 'intro.js'来引用

import VueIntro from 'vue-introjs';
import 'intro.js/introjs.css';
Vue.use(VueIntro);

页面中使用

需要在页面渲染完成后，使用

mounted: function () {
  this.setGuide();
},
methods: {
  setGuide() {
    let data=[
      {element: '.step_1',intro: '步骤1：对应class为.step_1的元素进行选择提示。',position: 'right'},
      {element: '#step_2',intro: '步骤2：对应Id为#step_2的元素进行选择提示。',position: 'left'},
    ]
    this.$intro().setOptions({
      prevLabel: "上一步",
      nextLabel: "下一步",
      skipLabel: "跳过",
      doneLabel: "完成",
      steps:steps
    }).oncomplete(()=> {
      //点击结束按钮后执行的事件
    }).onexit(()=> {
      //点击跳过按钮后执行的事件
    }).start()
  },
}

如果不想使用steps的方式，我们可以直接在html中通过指令的方式来使用，html如下：

<div v-intro="'这是步骤1的引导提示内容'" v-intro-step="1"></div>
<div v-intro="'这是步骤2的引导提示内容'" v-intro-step="2"></div>

setOption关键字

主要参数如下：

prevLabel: "上一步", 
nextLabel: "下一步",
skipLabel: "跳过",
doneLabel: "结束",
tooltipPosition: 'bottom',/* 引导说明框相对高亮说明区域的位置 */
tooltipClass: '', /* 引导说明文本框的样式 */
highlightClass: '', /* 说明高亮区域的样式 */
exitOnEsc: true,/* 是否使用键盘Esc退出 */
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',/* 默认提示内容 */

更多详细的使用此处不再赘述，vue-introjs的github地址：https://github.com/alex-oleshkevich/vue-introjs。

链接: https://www.fly63.com/article/detial/9673