后台管理引导页实现

yarn add driver.js

<!--
 * @use: <LmDriver/>
 * @description: 引导页
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-05-19 22:06:01
 * @LastEditTime: 2022-05-19 22:52:49
 * @FilePath: /universal-background-template/src/components/LmDriver/index.vue
-->

<template>
  <div id="guide" @click.prevent.stop="startGuide" class="el-icon-s-promotion">
    引导
  </div>
</template>
<script>
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";
import { steps } from "./steps";
let driver;
export default {
  name: "LmDriver",
  data() {
    return {};
  },

  mounted() {
    driver = new Driver({
      animate: false, // Whether to animate or not 这里如果是true的话，引导的图标可能会消失 原因待查找
      opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
      padding: 10, // Distance of element from around the edges
      allowClose: true, // Whether the click on overlay should close or not
      overlayClickNext: false, // Whether the click on overlay should move next
      doneBtnText: "结束", // Text on the final button
      closeBtnText: "关闭", // Text on the close button for this step
      stageBackground: "#cccccc", // Background color for the staged behind highlighted element
      nextBtnText: "下一步", // Next button text for this step
      prevBtnText: "上一步", // Previous button text for this step
      keyboardControl: true,
      onNext: (Element) => {
          console.log(Element)
      },
    });
  },
  methods: {
    startGuide() {
      driver.defineSteps(steps);
      driver.start();
    },
  },
};
</script>
<style lang="less" scoped>
#guide {
  cursor: pointer;
}
</style>

/*
 * @use: 
 * @description: 引导步骤
 * @SpecialInstructions: 无
 * @Author: clearlove
 * @Date: 2022-05-19 22:12:34
 * @LastEditTime: 2022-05-19 22:47:44
 * @FilePath: /universal-background-template/src/components/LmDriver/steps.js
 */
import Driver from "driver.js";
let driver = new Driver
export const steps = [
    {
        element: '#guide', //当前被引导的元素
        popover: {
            title: '引导开始', // 当前显示的标题
            description: '这是引导页', // 描述信息
            position: 'left' //出现的位置
        }
    },
    {
        element: '#logout', //登出
        popover: {
            title: '退出',
            description: '鼠标移上去可以退出',
            position: 'left'
        }
    },
    {
        element: '#telescopic', //菜单栏最小化
        popover: {
            title: '菜单栏最小化',
            description: '鼠标点击可以最小化菜单栏',
            position: 'right'
        },
        onNext: () => {
            // Prevent moving to the next step
            driver.preventMove();
            // Perform some action or create the element to move to
            // And then move to that element
            setTimeout(() => {
                driver.moveNext();
            }, 2000);
        }
    },
    {
        element: '#menu', //菜单
        popover: {
            title: '菜单',
            description: '鼠标点击跳转不同的页面',
            position: 'right-center'
        }
    },
    {
        element: '#lm-content', //内容区域
        popover: {
            title: '内容',
            description: '内容区域',
            position: 'mid-center'
        }
    }
]

<LmDriver/>

<div id="guide"></div>