driver 官方地址

配置项及官方demo ,可直接跳过看安装，若遇到问题和特殊需求再看

安装 driver

npm install driver.js --save

在子组件页面引入

（如果在父组件 配置的话，子组件引导会出问题，如果多处使用，也可以在main.js配 置）

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

配置（子组件）

1.在methods 封装函数
父组件 子组件 其它组件 要引导的元素上设置id即可

  test() {
     // debugger;
     const driver = new Driver();

     // Define the steps for introduction
     driver.defineSteps([
     // 父组件元素id
       {
         element: "#element-01",
         popover: {
           className: "first-step-popover-class",
           title: "Title on Popover",
           description: "Body of the popover",
           position: "left",
         },
       },
       {
         element: "#element-02",
         popover: {
           title: "Title on Popover",
           description: "Body of the popover",
           position: "left",
         },
       },
     	// 子组件元素id
       {
         element: "#element-1",
         popover: {
           title: "Title on Popover",
           description: "Body of the popover",
           position: "right",
         },
       },
       //其它组件id
       {
         element: "#tips",
         popover: {
           title: "Title on Popover",
           description: "Body of the popover",
           position: "left",
         },
       },
     ]);

     // Start the introduction
     driver.start();
   },

2.在数据返回后，处理
(如果引导的元素，是后台数据驱动，如if包围,否则 在mounted 中调用函数即可)

结束 至此大功告成~

常见问题

如是元素显示不出，可能是定位问题，可以设置成下面的样式试试
position: absolute;