Background: The project needs to add the new boot page function, the effect is as follows:



Vue + vue-intro + intro.js

1. Install dependencies

npm i vue-introjs
npm i intro.jsCopy the code

2. Modify the WebPack file

Plugins in webpack.dev.conf.js webpack.prod.conf.js are added separately

new webpack.ProvidePlugin({
  introJs: ['intro.js'.'introJs']})Copy the code

3. In main.js

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

4. Use it on the page

dom:

<div class="">
      <button v-intro="'The content of tooltip'" v-intro-position="'top'">123</button>
      <div v-intro="'The content of tooltip'" v-intro-position="'top'">456</div>
    </div>Copy the code

js:

 this.$nextTick(()=>{
      var introJS = require('intro.js') introJS().start() // Exits the boot callexit(a)})Copy the code

Ps: If the elements are generated using the V-for loop, how do you control the conditions in the intro display?

In this case, we can use v-intro-IF

<div class="" style="padding:50px">
      <button v-intro="'The content of tooltip'" v-intro-position="'top'" v-intro-if="item == 1" v-for="Item in [1, 2, 3]." ">{{item}}</button>
      <div v-intro="'The content of tooltip'" v-intro-position="'top'">2</div>
    </div>Copy the code

vue-introjs

introjs

Introjs document

Refer to the link