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:

<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>

js:

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

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

        在这里，我们可以使用 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>

vue-introjs

introjs

introjs文档

参考链接