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
- Page to create the UI that needs to be guided, such as in the demo below
This is a DOM - 1
,This is the DOM - 2
,This is the DOM - 3
. - use
v-tour
Components for functional guidance display,v-tour
The component receives two parameters,steps
andoptions
.steps
Used to define guiding step items,options
Configuration for defining guidelines. For details about how to set the two parameters, see the following sectiondemo
Notes in the example. - use
this.$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.
- In guiding,
tooltip
Target must be locateddom
Give presentations. - When the target
dom
When the scroll axis hides the area, you need to turn the targetdom
Scroll 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