新手引導功能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/