vue中关于driver.js使用

vue中关于driver.js使用

首先讲讲踩过的坑：

• driver.js版本问题
• 导入文件不存在问题
• 过早渲染操作指引

关于版本可以从driver.js（点击跳转）进行查看，本文使用的是0.9.8版本。
报错1：Uncaught TypeError: driver_js__WEBPACK_IMPORTED_MODULE_0
原因：当时直接下载的默认为最新版（1.30.）
报错2：TypeError: driver_js…lt is not a constructor
报错3：There are no steps defined to iterate

依赖加载

npm install driver.js@0.9.8

页面中使用

//div中
<el-card class="user-card" style="margin: 12px 0" id="some-element3">
	页面内容
</el-card>

//导入
import Driver from "driver.js/dist/driver.min.js";
import "driver.js/dist/driver.min.css";

//data中或另外封装的描述文本
const steps =() =>[
    {
        element: '#some-element1',
        popover: {
            title: '第一项',
            description: '第一项的描述',
            position: 'bottom',
        }
    },
    {
        element: '#some-element2',
        popover: {
            title: '第二项',
            description: '第二项的描述',
            position: 'top',
        }
    },
    {
        element: '#some-element3',
        popover: {
            title: '第二项',
            description: '第二项的描述',
            position: 'top',
        }
    },
]

//使用
  mounted() {
    let driverExample;
    const getpreview = () => {
      const t = 1
      driverExample = new Driver({//这里需要new一个实例出来
            animate: false,
            opacity: 0.75,
            padding: 10,
            allowClose: false,
            overlayClickNext: false,
            doneBtnText: "Done",
            //下面这些都是按钮名称
            closeBtnText: "Close",
            stageBackground: "#ffffff",
            nextBtnText: "Next",
            prevBtnText: "Previous"})
      driverExample.defineSteps(diverSteps(t));
      driverExample.start();

    };

    getpreview()
  }