If you don’t change, nothing will change

preface

1 introduction

Common configuration items Options

options

Animating: true, // Animating: animating: true, // Animating: animating: animating: animating: animating: animating: animating: animating: animating: animating: animating: animating ShowButtons: true, // Close closeBtnText: 'Close', // with defineSteps // there is a Previous step, Next nextBtnText: 'Next →', prevBtnText: 'Previous', // The last step has doneBtnText: 'Done', // keyboardControl: true} new Driver(options)Copy the code

Common attribute attrs

isActivated

// whether the driver isActivatedCopy the code

Common methods

highlight

/* options = {element, popover} popover = {className, title, description, position: left|right|top|bottom } */ driver.highlight(id | options)Copy the code

defineSteps

/* [{element, popover}] */ driver.definesteps (steps)Copy the code

start

Driver.start (2) driver.start(step = 0)Copy the code

moveNext

// Next driver.movenext ()Copy the code

movePrevious

// Driver. MovePrevious ()Copy the code

getHighlightedElement

/ / get highlighted elements const activeElement = driver. GetHighlightedElement () activeElement. HidePopover () activeElement. ShowPopover ()Copy the code

Common events

onHighlightStarted

// Trigger new Driver({onHighlighted: Element => {console.log('onHighlighted', Element)}})Copy the code

onDeselected

{onDeselected: Element => {console.log('onDeselected', Element)}})Copy the code

onPrevious

New Driver({onPrevious: Element => {console.log('onPrevious', Element)}})Copy the code

onNext

New Driver({onNext: Element => {console.log('onNext', Element)}})Copy the code

style

Div# popover {max-width: initial}Copy the code

2 use

The installation

npm install driver.js --save
Copy the code

3. Pay attention to

This.#refs. BTN is not valid. 2. The maximum width of popup is 8rem, and the button cannot adapt itself, so the style must be reset

The end of the

You see, the horizon of that cloud, is not as lovely as you ~

Good night ^_^

Refer to the link

  • Driver. Js’s official website

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage
  • Learn a vUE plugin (13) every day — HTML2Canvas
  • Learn a VUE plug-in (14) every day — vue-pull-to
  • So, how about a VUE plugin (15) every day — Vue-Content-Placeholder
  • Learn a vUE plugin every day (16) – VUe-video-player
  • Learn a vue plugin every day (17) — js-file-download
  • Learn a VUE plugin (18) every day — JS-Audio-Recorder
  • Learn a VUE plugin (19) every day – VUe-TreesELECT
  • Learn a VUE plug-in (20) — ProgressBar every day
  • Learn a VUE plugin every day (21) – ProvidePlugin
  • Learn a VUE plugin (22) every day — VUe-Router
  • Learn a vue plugin every day (23) – urL-loader