新手引导功能intro.js

vue项目中使用intro.js

安装intro.js

npm install intro.js --save

安装vue-introjs（该工具包是在introjs基础上开发的，故先要安装introjs）

npm i vue-introjs

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']
    }])    
}

使用

import VueIntro from 'vue-introjs'
Vue.use(VueIntro)

import 'intro.js/introjs.css';

初始化

this.$intro().setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "完成"
      }).oncomplete(()=> {
          //点击结束按钮后执行的事件
      }).onexit(()=> {
          //点击跳过按钮后执行的事件
      }).start()

html部分

<div v-intro="'The content of tooltip'" v-intro-step="2"></div>

 

 参考链接：

https://github.com/alex-oleshkevich/vue-introjs

https://introjs.com/