vue页面新手指导组件driver.js使用说明

1.安装依赖

npm install --save deiver.js

2.引入组件（可以全局引入，也可以在使用的组件中引入）这里只在组件里引入

import 'driver.js/dist/driver.min.css'
import Driver from 'driver.js'

3.在mountd里定义提示框内容(这里有一个坑，就是点击浏览器后退时候，提示框还会存在，所以我添加了window.addEventListener监听时候点击后退前进来关闭提示框，并且添加了首次使用接口判断)

  mounted() {
    const driver = new Driver({
      doneBtnText: '完成',
      closeBtnText: '关闭',
      stageBackground: '#fff',
      nextBtnText: '下一步',
      prevBtnText: '上一步'
    })
     driver.defineSteps([
      {
        element: '#create-post1',
        popover: {
          title: '请选择设计类型',
          description: '如要突出商品请选择第一种'
        }
      },
      {
        element: '#create-post2',
        popover: {
          title: '选择上传图片',
          description: '您可以点击此处，上传图片'
        }
      },
      {
        element: '#create-post3',
        popover: {
          title: '选择生成尺寸',
          description: '点击此处，切换需要的图片尺寸'
        }
      },
      {
        element: '#create-post4',
        popover: {
          title: '选择生成的文案',
          description: '在此处编辑文案，会出现在生成的图片中'
        }
      }
      ,
      {
        element: '#create-post5',
        popover: {
          title: '点击生成',
          description: '系统已经给您默认了一张商品图，点击"智能生成"，看看效果把'
        }
      }
    ])
    window.addEventListener("popstate", function(e) { 
        driver.reset()
      }, false);
    let mydriver = localStorage.getItem('driver')
    if(mydriver == null){
      getIsGenerate().then(res=>{
        console.log(res.data)
        if(res.data == false){
          localStorage.setItem('driver',0)
          driver.start()
        }
        else if(res.data == true){
          localStorage.setItem('driver',1)
        }
      }).catch(()=>{
      }) 
    }
    //下面测试功能用代码上线可以删除
    else if(mydriver == 0){
      driver.start()
      getIsGenerate().then(res=>{
        console.log(res.data)
        if(res.data == false){
          localStorage.setItem('driver',0)
          driver.start()
        }
        else if(res.data == true){
          localStorage.setItem('driver',1)
        }
      }).catch(()=>{
      }) 
    }
  },

4.把定义过的提示框通过element里的id与页面中的一一对应就可以添加提示功能