Vue uses driver.js to complete the function of page guidance

Requirements: When the user enters for the first time, he must not know what some functions are for, and then give the user a page guide to teach him how to do it.

Click on the official documentation of the plug-in driver.js

Effect:

 1. Download driverjs

I downloaded the latest version "driver.js": "^1.0.5", by default, other lower versions may be imported and used differently, don't download it wrong

npm install driver

2. import

This package is relatively small, only 18k

import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

3. Write a few div content that needs a wizard, and set the id value for locking

 <div id="some-element" class="top">
                <h2>第一步</h2>
                <section>巴拉巴拉</section>
            </div>
                 <!-- 左 -->
                 <div id="step-item-3" class="left">
                <h2>第二步</h2>
                <section>巴拉巴拉</section>
            </div>
            <div id="step-item-4" class="bottom">
                <h2>第三部</h2>
                <section>结束</section>
            </div>

4. Guide content and positioning

Each element represents each step

element: user binding requires the value of the id in the div of the wizard, and can also be used. Class name, or div, for accuracy, it is best to bind with the id value, with a higher priority

steps: [
                {
                    element: '#some-element',
                    popover: {
                        title: 'Animated Tour Example',
                        description: "Here is the code example showing animated tour. Let's walk you through it.",
                        side: 'right',//弹窗在元素的位置
                        align: 'start'
                    }
                },
                {
                    element: '#step-item-3',
                    popover: {
                        title: 'Import the Library',
                        description: 'It works the same in vanilla JavaScript as well as frameworks.',
                        side: 'left',
                        align: 'start'
                    }
                },
                {
                    element: '#step-item-4',
                    popover: {
                        title: 'Importing CSS',
                        description: 'Import the CSS which gives you the default styling for popover and overlay.',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    popover: {
                        title: 'Happy Coding',
                        description: 'And that is all, go ahead and start adding tours to your applications.'
                    }
                }
            ]

5. Start binding after clicking the button

   const driverObj = driver({
                showProgress: true,
                steps: this.steps
            });
            driverObj.drive();
        }

6. Complete code

<template>
    <div class="content-box">
        <div class="container">
            <el-button @click="query">向导指引</el-button>
            <el-button @click="driverobj">步骤条向导</el-button>
            <div id="some-element" class="top">
                <h2>第一步</h2>
                <section>巴拉巴拉</section>
            </div>
                 <!-- 左 -->
                 <div id="step-item-3" class="left">
                <h2>第二步</h2>
                <section>巴拉巴拉</section>
            </div>
            <div id="step-item-4" class="bottom">
                <h2>第三部</h2>
                <section>结束</section>
            </div>
       
        </div>
    </div>
</template>

<script>
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
export default {
    data() {
        return {
            steps: [
                {
                    element: '#some-element',
                    popover: {
                        title: 'Animated Tour Example',
                        description: "Here is the code example showing animated tour. Let's walk you through it.",
                        side: 'right',//弹窗在元素的位置
                        align: 'start'
                    }
                },
                {
                    element: '#step-item-3',
                    popover: {
                        title: 'Import the Library',
                        description: 'It works the same in vanilla JavaScript as well as frameworks.',
                        side: 'left',
                        align: 'start'
                    }
                },
                {
                    element: '#step-item-4',
                    popover: {
                        title: 'Importing CSS',
                        description: 'Import the CSS which gives you the default styling for popover and overlay.',
                        side: 'bottom',
                        align: 'start'
                    }
                },
                {
                    popover: {
                        title: 'Happy Coding',
                        description: 'And that is all, go ahead and start adding tours to your applications.'
                    }
                }
            ]
        };
    },
    mounted() {},
    methods: {
        query() {
            const driverObj = driver();
            driverObj.highlight({
                element: '#some-element',
                popover: {
                    title: 'Title',
                    description: 'Description'
                }
            });
        },
        driverobj() {
            const driverObj = driver({
                showProgress: true,
                steps: this.steps
            });
            driverObj.drive();
        }
    }
};
</script>

<style lang="scss" scoped>
.bottom{
    width: 300px;
    margin-top: 400px;

}
.left{
    width: 300px;
    margin-left: 400px;
}
.top{
    width: 300px;
}
</style>

This is the end of the article, I hope it will be helpful to you~