Vue uses driver.js to boot, and subcomponents can boot normally

driver official address

Configuration items and official demo, you can directly skip to see the installation, if you encounter problems and special needs, then look at it

install driver

npm install driver.js --save

Introduced in the subcomponent page

(If it is configured in the parent component, there will be problems with the guidance of the child component. If it is used in multiple places, it can also be configured in main.js)

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

configuration (subcomponent)

1. Just set the id on the element to be guided by the methods encapsulation function,
parent component, child component, and other components

  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. After the data is returned, process it
(if the guided element is driven by background data, such as surrounded by if, otherwise just call the function in mounted)
insert image description here

It's over and you're done~

common problem

insert image description here

If the element cannot be displayed, it may be a positioning problem. You can set it to the following style and try
position: absolute;