Boot operation is a non-essential function, but with this function, for the first time to enter the system, it is a friendly experience, can quickly introduce some simple functions of their system, we can easily achieve this effect based on driver.js.

See the effect

The installation

First, we need to install driver.js via NPM or yarn:

npm

npm install --save driver.js

yarn

yarn add driver.js

start

Because driver.js is used to manipulate the DOM node, it needs to wait until the node is rendered. It needs to be used in onMounted:

setup() {
    const driver = new Driver()
    const show = () => {
        driver.highlight(
            {
                element: '#logo',
                popover: {
                    title: 'Title for the Popover',
                    description: 'Description for it',
                    position: 'bottom',
                    offset: 20,
                }
            }
        )
    }
​
    onMounted(() => {
        setTimeout(() => {
            show()
        })
    })
}
Copy the code

Here, I don’t know why. InonMountedDirectly from insidedriver.jsIt didn’t work. It even addednextTickIt won’t work unlesssetTimeoutThat’s where it works. With the big guns, okay?

Highlight is the highlight effect provided by driver.js, but our boot operation will not only have one, there are usually many of them, so it is impractical to set them one by one.

Driver.js provides defineSteps to implement a series of boot actions:

setup() { const driver = new Driver() const show = () => { driver.defineSteps([ { element: '#logo', popover: { title: Position: 'bottom', offset: 20,}}]) driver.start()}}Copy the code

After defining with defineSteps, you need to start the boot using the start method.

Common configuration

When we instantiate the Driver, we can pass in some common configuration. For example, when we instantiate the Driver, we can pass in some common configuration:

Setup () {const driver = new driver ({doneBtnText: 'complete ', closeBtnText:' close ', nextBtnText: 'Next ', prevBtnText: }) const show = () => {driver.definesteps ([{element: '#logo', popover: {title: 'icon ', description: 'This is Vue icon ', position: 'bottom', offset: 20}}]) driver.start()}}Copy the code

Of course, this configuration can also be overridden in options. Driver.js also provides a number of built-in configurations:

const driver = new Driver({
  className: 'scoped-class',        // className to wrap driver.js popover
  animate: true,                    // Whether to animate or not
  opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
  padding: 10,                      // Distance of element from around the edges
  allowClose: true,                 // Whether the click on overlay should close or not
  overlayClickNext: false,          // Whether the click on overlay should move next
  doneBtnText: 'Done',              // Text on the final button
  closeBtnText: 'Close',            // Text on the close button for this step
  stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
  nextBtnText: 'Next',              // Next button text for this step
  prevBtnText: 'Previous',          // Previous button text for this step
  showButtons: false,               // Do not show control buttons in footer
  keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
  scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
  onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
  onHighlighted: (Element) => {},      // Called when element is fully highlighted
  onDeselected: (Element) => {},       // Called when element has been deselected
  onReset: (Element) => {},            // Called when overlay is about to be cleared
  onNext: (Element) => {},                    // Called when moving to next step on any step
  onPrevious: (Element) => {},                // Called when moving to previous step on any step
});
Copy the code

driver.jsThe generatedpopover, will be generated according to the size of the target node, so ifpopoverIf it doesn’t fit, you can look at the originaldomWhat the nodes look like.

Built-in methods and properties

Driver.js also has some handy methods built in, such as defineSteps and start:

  • IsActivated: indicates whether the device is being booted.
  • DefineSteps: Define the boot steps;
  • Start (step = 0) : start boot, you can pass onenumberFor example, if there are too many steps, we can make a note, and the next time the user clicks in, he can start from the middle of the boot.
  • MoveNext: Boot to move to the next step;
  • MovePrevious: A boot to move to a previous step;
  • HasNextStep: Whether there is a boot for the next step;
  • HasPreviousStep: Whether there is a boot from the previous step;

There are many other ways, you can check out the website