Hello everyone, I am a meaty siege lion, you must have seen such a scene, when the website content updates, will guide the user to be familiar with the updated content through a guide operation, how to achieve such a scene? In this article, we share a new feature guide for VUE called Vue-Tour and look at how its main feature points are implemented.

Method of use

Installation and reference

Install YARN add vue-tourCopy the code
// reference in the entry file main.js
import VueTour from "vue-tour";
require("vue-tour/dist/vue-tour.css");

Vue.use(VueTour);
Copy the code

use

  1. Page to create the UI that needs to be guided, such as in the demo belowThis is a DOM - 1,This is the DOM - 2,This is the DOM - 3.
  2. usev-tourComponents for functional guidance display,v-tourThe component receives two parameters,stepsandoptions.stepsUsed to define guiding step items,optionsConfiguration for defining guidelines. For details about how to set the two parameters, see the following sectiondemoNotes in the example.
  3. usethis.$tours["myTour"].start();Statement to start the display of instructions.
<template>
  <div class="wrap">
    <div class="item" id="v-step-0">This is a DOM - 1</div>
    <div class="item v-step-1">This is the DOM - 2</div>
    <div class="item" data-v-step="2">This is the DOM - 3</div>
    <v-tour name="myTour" :steps="steps" :options="myOptions"></v-tour>
  </div>
</template>
<script>
export default {
  name: "my-tour".data() {
    return {
      myOptions: {
        useKeyboardNavigation: false.// Whether to control guidance through ←, → and ESC of the keyboard
        labels: { // The button copy of the guide item
          buttonSkip: "Skip the guide".// Skip the copy
          buttonPrevious: "Step up".// Last step copy
          buttonNext: "Next step".// Next step
          buttonStop: "The end" // Finish the copy
        },
        highlight: false // Whether to highlight the active target item
      },
      steps: [{target: "#v-step-0".// The id or class or data-v-step attribute of the current item
          content: "This is the DOM - 1".// Contents of the current guideline
          params: {
            placement: "bottom".// Indicate the location of target, support up, down, left and right
            highlight: false.// Whether the current item is highlighted when activated
            enableScrolling: false // Indicates whether to scroll to the position of the current item
          },
          // Handle UI rendering or asynchronous operations such as pop-ups, API calls, etc. When reject is executed, the instruction does not perform the next step
          before: type= > new Promise((resolve, reject) = > {
            // Time-consuming UI rendering or asynchronous operation
            resolve('foo')})}, {target: ".v-step-1".content: "This is DOM - 2".params: {
            placement: "bottom"}}, {target: '[data-v-step="2"]'.content: "This is the DOM - 3".params: {
            placement: "bottom"}}}; },mounted: function() {
    this.$tours["myTour"].start(); }};</script>
<style scoped>
.wrap {
  display: flex;
  padding: 20px;
}
.item {
  width: 400px;
  height: 200px;
  line-height: 200px;
  border: 2px solid #cecece;
}
</style>
​
Copy the code

Custom activation styles

You can control the style that currently directs dom elements by redefining the. V-tour__target — HighlightedClass style.

.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0.0.0.4);
}
Copy the code

Custom guide styles

You can customize the header, content, and button action areas by adding header, Content, and Actions slots to the V-Tour component. The following code uses a custom button action area as an example.

<v-tour name="myTour" :steps="steps">
  <template slot-scope="tour">
    <transition name="fade">
      <v-step
        v-if="tour.steps[tour.currentStep]"
        :key="tour.currentStep"
        :step="tour.steps[tour.currentStep]"
        :previous-step="tour.previousStep"
        :next-step="tour.nextStep"
        :stop="tour.stop"
        :skip="tour.skip"
        :is-first="tour.isFirst"
        :is-last="tour.isLast"
        :labels="tour.labels"
      >
        <template v-if="tour.currentStep === 2">
          <div slot="actions">
            <button @click="tour.previousStep" class="btn btn-primary">Previous step</button>
            <button @click="tour.nextStep" class="btn btn-primary">Next step</button>
          </div>
        </template>
      </v-step>
    </transition>
  </template>
</v-tour>
Copy the code

The callback function

The V-Tour component supports the callback function to be triggered after an operation is performed. Add callbacks to the V-Tour and set the parameter value to an object. Methods of the 5 types can be set in the object, as shown in the following code.

<v-tour :callbacks="myCallbacks">
Copy the code
data: () = > ({
  myCallbacks: {
    onStart: this.onStart, // Trigger at start
    onPreviousStep: this.onPreviousStep, // Triggered at the previous step
    onNextStep: this.onNextStep, // Trigger in the next step
    onSkip: this.onSkip, // Trigger when jumping
    onFinish: this.onFinish // Trigger at the end}})Copy the code

implementation

Let’s take a look at how the V-Tour plug-in implements the new functionality guidelines. There are two main function points that need to be implemented during the new function step guidance process.

  1. In guiding,tooltipTarget must be locateddomGive presentations.
  2. When the targetdomWhen the scroll axis hides the area, you need to turn the targetdomScroll to viewable area.

Vue-tour is a lightweight implementation, and both functions are implemented through plug-ins.

@popperjs/core(Target DOM location display tooltip)

Vue-tour uses @popperjs/core to display tooltips somewhere in the target DOM element when directed to it. Let’s take a look at how this works.

The installation

yarn add @popperjs/core
Copy the code

use

Go straight to demo.

<template>
  <div>
    <div id="target"></div>
    <div id="tooltip">Here are the guidelines</div>
  </div>
</template>
<script>
import { createPopper } from "@popperjs/core";
export default {
  mounted() {
    const target = document.querySelector("#target");
    const tooltip = document.querySelector("#tooltip");
    createPopper(target, tooltip, {
      placement: "right".modifiers: [{name: "offset".options: {
            offset: [0.8]}}]}); }};</script>
<style>
#target {
  width: 400px;
  height: 200px;
  background: #eee;
}
#tooltip {
  background: # 333;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
}
</style>
Copy the code

In the sample code above, we refer to the @popperjs/core plugin’s createPopper method, which takes three arguments, described as follows:

/ * * *@param {dom} Target Target DOM element *@param {dom} Popper directs UI DOM elements *@param {object} Configure the information object */
createPopper(target, popper, {
  placement: "bottom".// Guide UI location information (' auto ', 'auto - start', 'auto - end', 'top', 'top - start', 'top - end' and 'bottom' and 'bottom - start', 'bottom - end', 'right' and 'right - - end start ', 'right' and 'left' and 'left - start', 'left - end')
  strategy: "absolute".// Guide UIpositon, support absolute and fixed
  modifiers: [] // Custom modifiers, refer to the official website for details
});
Copy the code

jump.js(The target DOM scrolls to the viewable area)

Vue-tour uses jump.js to scroll the target DOM into the viewable area when the target DOM is hidden in the scroll axis. Let’s see how it works. Github.com/callmecavs/…

The installation

yarn add jump.js
Copy the code

use

Go straight to demo.

  <div>
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>
</template>
<script>
import jump from "jump.js";
export default {
  mounted() {
    jump(".item4"); }};</script>
<style>
.item {
  width: 400px;
  height: 200px;
  line-height: 200px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.item1..item3..item5 {
  background: #d4fd86;
}
.item2..item4..item6 {
  background: #fa9c71;
}
</style>
Copy the code

In the example above, we define a list and execute the jump method in the Mounted declaration cycle. And we pass in the jump method the class of the target DOM element that we want to scroll to, and you can see that when we refresh the page, the page scrolls to the div area of.item4. Of course, the jump function also supports passing in additional configuration parameters, as shown below.

jump('.target', {
  duration: 1000.// Scroll time
  offset: 0.// The offset of the scroll position, which defaults to 0, scrolls to the top of the target element
  callback: undefined.// The callback function after the scroll is complete
  easing: easeInOutQuad, // redefine the buffer function
  a11y: false
})
Copy the code

Well, vue-tour is enough for now. Welcome friends to pay attention to the meaty siege lion, continue to share front-end technology ~

Highlights from the past

  • Low code platform building (a) into the front-end low code
  • Hand lift low code platform construction (two) reveal page designer
  • Low code platform construction (three) components interaction between the implementation
  • Hand low code platform construction (four) components drag free layout implementation
  • Manual low code platform construction (five) the implementation of custom components