vue引导页 driver.js 高亮空白问题记录

使用方法

npm install driver.js

在main.js引入 import Vue from 'vue';

import Driver from 'driver.js'

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

Vue.prototype.$driver = new Driver({ allowClose: false, //禁止点击外部关闭 doneBtnText: '完成', // 完成按钮标题 closeBtnText: '关闭', // 关闭按钮标题 stageBackground: '#fff', // 引导对话的背景色 nextBtnText: '下一步', // 下一步按钮标题 prevBtnText: '上一步', // 上一步按钮标题 })

在页面methods 中使用定义方法使用

  this.$driver.defineSteps([
      {
        element: '#steps1', //触发的元素id
        popover: {
          title: '温馨提示',
          description: '首页展示已生成链接的表格界面,通过模板名称、模板ID、应用名称、链接Code等条件进行查询',
          position: "bottom"
        }
      },
      {
        element: '#steps2',
        popover: {
          title: '新增',
          description: '新增创',
          position: "left"
        },
        onNext: () => {  // 设置 下一步之后执行方法有需要可以定义
          this.$nextTick(() => {
           执行
          })
        }
      },

    ])
    this.$driver.start() // 执行初始化

把的默认值t animate: true改成false 就好了, new Driver({ animate: false, allowClose: false, doneBtnText: '完成', closeBtnText: '关闭', nextBtnText: '下一步', prevBtnText: '上一步' })