Vue 页面实现引导效果 driver.js

安装依赖包
npm install driver.js 或 yarn add driver.js

在需要用到的页面引入

import Driver from "driver.js";

import "driver.js/dist/driver.min.css";

  mounted() {
    this.showDriver();
  },
  methods: {
    showDriver() {
      const steps = [
        {
          element: document.querySelector(".el-header"), //获取元素节点
          popover: {
            title: "我是标题1",
            description: "我是描述文字1",
            position: "bottom-center", //提示框的位置
          },
        },
        {
          element: document.querySelector(".el-aside"),
          popover: {
            title: "我是标题2",
            description: "我是描述文字2",
            position: "right-center",
          },
        },
      ];
      const driver = new Driver({ //初始化引导页
        doneBtnText: "知道了", // 结束按钮的文字
        allowClose: false, // 是否可以通过点击遮罩层关闭指引
        stageBackground: "#fff", // 突出显示元素的背景颜色
        nextBtnText: "下一步", // 下一步按钮的文字
        prevBtnText: "上一步", // 上一步按钮的文字
        closeBtnText: "关闭", // 关闭按钮的文字
        keyboardControl: false, // 是否允许键盘操控
        xCloseButton: false, // 将关闭按钮作为X放在弹出
      });
      driver.defineSteps(steps);
      driver.start();
    },
  },

 效果图：

​​​​​​​