Intro. Js can be used in both PC and mobile terminals. The code will be combined with vUE to implement a step-by-step help guide.

The installation

npm install intro.js --save
Copy the code

Create a new intro. Js file to configure the intro

import introJs from 'intro.js'
import 'intro.js/introjs.css'

const intro = introJs()
// Please refer to the official document for more configuration parameters
intro.setOptions({
  nextLabel: 'Next'.// Next button text
  prevLabel: 'Previous'.// Previous button text
  skipLabel: 'skipped'.// Skip button text
  doneLabel: 'Experience it now'.// Complete the button text
  hidePrev: true.// Whether to hide the previous button in the first step
  hideNext: true.// Whether to hide the next button in the last step
  exitOnOverlayClick: false.// Whether to exit the introduction when clicking the overlay layer
  showStepNumbers: false.// Whether to display the step number of the red circle
  disableInteraction: true.// Whether to disable interaction with elements in the highlighted box, that is, to disable clicking
  showBullets: false          // Whether to display panel indicator points
})

export default intro
Copy the code

There are two ways to use it

Methods a

Using HTML attributes

  • Data-intro: indicates the prompt text of a step

  • Data-step :(optional) define step number (priority)

  • Data-tooltipclass :(optional) define CSS classes for hints

  • Data-highlightclass :(optional) appends the CSS class to the helperLayer

  • Data – the position: Define the location of the hint, top, left, right, bottom, bottom-left-aligned (same as bottom), bottom-middle-aligned, bottom-right-aligned, or auto. And automatically assign the correct location). The default is the bottom

  • Data-scrollto: an element, element, or tooltip to scrollTo. The default value is Element.

  • Data-disable-interaction: Whether to disable interaction with elements in the highlighted box, true or false (or (1 or 0)).

HTML part

<section class="nav-menu">
    <ul>
        <li :data-step="homeSteps.shifts.step" :data-intro="homeSteps.shifts.intro" :data-position="homeSteps.shifts.position" :data-disable-interaction="true">Flight management</li>
        <li :data-step="homeSteps.attendGroup.step" :data-intro="homeSteps.attendGroup.intro" :data-position="homeSteps.attendGroup.position" :data-disable-interaction="true">Attendance group management</li>
        <li :data-step="homeSteps.attendCount.step" :data-intro="homeSteps.attendCount.intro" :data-position="homeSteps.attendCount.position" :data-disable-interaction="true">Attendance statistics</li>
        <li :data-step="homeSteps.writeOff.step" :data-intro="homeSteps.writeOff.intro" :data-position="homeSteps.writeOff.position" :data-disable-interaction="true">Cancel after verification of statistical</li>
    </ul>
</section>
Copy the code

Js part

import Intro from '@/utils/intro'  // Import the written configuration file
export default {
    data () {
        homeSteps: {
          shifts: {
            step: '1'.intro: 'Shift management, configure the commute time and a variety of humanized Settings. '.position: 'top'
          },
          attendGroup: {
            step: '2'.intro: 'Attendance group management, setting up attendance rules such as attendance method and time. The invitational function is here. '.position: 'top'
          },
          attendCount: {
            step: '3'.intro: 'Attendance statistics, daily/monthly team attendance can be viewed at any time. Modify the result of punching. '.position: 'top'
          },
          writeOff: {
            step: '4'.intro: 'Cancel statistics, you can view the historical record of the result of modification. '.position: 'top'
          }
        }
    },
    mounted () {
        if(! localStorage.getItem('isShowHelp')) {
          this.$nextTick((a)= > {
            / /
            Intro.start()
          })
          // Exit the boot callback function
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp'.1)})}}}Copy the code

Way 2

Using JSON Configuration

HTML part

<section class="nav-menu">
    <ul>
        <li id="step1">Flight management</li>
        <li id="step2">Attendance group management</li>
        <li id="step3">Attendance statistics</li>
        <li id="step4">Cancel after verification of statistical</li>
    </ul>
</section>
Copy the code

Js part

import Intro from '@/utils/intro'  // Import the written configuration file
export default {
    mounted () {
        if(! localStorage.getItem('isShowHelp')) {
          / / configuration
          Intro.setOptions({
            steps: [{element: '#step1'.// Target element
                intro: 'Shift management, configure the commute time and a variety of humanized Settings. '.// Prompt text
                position: 'top'     // Indicate the location
              },
              {
                element: '#step2'.intro: 'Attendance group management, setting up attendance rules such as attendance method and time. The invitational function is here. '.position: 'top'
              },
              {
                element: '#step3'.intro: 'Attendance statistics, daily/monthly team attendance can be viewed at any time. Modify the result of punching. '.position: 'top'
              },
              {
                element: '#step4'.intro: 'Cancel statistics, you can view the historical record of the result of modification. '.position: 'top'}]})this.$nextTick((a)= > {
            / /
            Intro.start()
          })
          // Exit the boot callback function
          Intro.onexit(function () {
            localStorage.setItem('isShowHelp'.1)})}}}Copy the code