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

參考連接