vue 新手引导页功能

背景：项目中 需要添加 新手引导页功能，效果如下图：

解决方法：vue + vue-intro + intro.js

1.安装依赖

npm i vue-introjs
npm i intro.js复制代码

2.修改 webpack 文件

   在 webpack.dev.conf.js  webpack.prod.conf.js下的 plugins 分别加入

new webpack.ProvidePlugin({
  introJs: ['intro.js', 'introJs']
})复制代码

3. main.js 中引入

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

4.在页面中使用

dom:

"">
      "'The content of tooltip'" v-intro-position="'top'">123
      
"'The content of tooltip'" v-intro-position="'top'">456
    
复制代码

js:

 this.$nextTick(()=>{
      var introJS = require('intro.js')
      introJS().start() // 退出引导调用 exit() 即可
  })复制代码

ps：如果是使用 v-for 循环生成的元素，怎样控制 intro 显示的条件？

        在这里，我们可以使用 v-intro-if

"" style="padding:50px">
      "'The content of tooltip'" v-intro-position="'top'" v-intro-if="item == 1" v-for="item in [1,2,3]">{{item}}
      
"'The content of tooltip'" v-intro-position="'top'">2
    
复制代码

vue-introjs

introjs

introjs文档

参考链接