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