Vue+Driver.js实现新手引导功能_vue 前端给一个功能添加引导-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46403770/article/details/133772522

文章介绍了如何在页面中安装和使用driver.js库来创建带有动画和自定义选项的引导步骤组件，包括步骤定义、参数设置和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

npm install driver.js

使用
在需要的页面引入

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

给需要高亮的元素添加id（id起名随意，注意要与steps中一致）

<div id="step-1"></div>
<div id="step-2"></div>
<div id="step-3"></div>

显示方法

    const driverObj = driver({
      animate: true,
      overlayOpacity: 0.75,
      stagePadding: 10,
      allowClose: false,
      overlayClickNext: false,
      doneBtnText: "完成",
      prevBtnText:"上一步",
      nextBtnText: "下一步",
      showButtons: ["next", "close"],
      onNextClick: () => {
        console.log("下一步");
        driverObj.moveNext();
      },
      onPrevClick: () => {
        console.log("上一步");
        driverObj.movePrevious();
      },
      onCloseClick: () => {
        console.log("关闭");
        driverObj.destroy();
      },
      onDestroyed: () => {
        console.log("完成");
        driverObj.destroy();
      },
      steps: [
        {
          element: "#step-1",
          popover: {
            title: "第一步",
            side: "center",
            align: "start",
          },
        },
        {
          element: "#step-2",
          popover: {
            title: "第二步",
            side: "center",
            align: "start",
          },
        },
        {
          element: "#step-3",
          popover: {
            title: "第三步",
            side: "center",
            align: "start",
          },
        },
      ],
    });
    driverObj.drive();

常用参数说明（文档地址：driver.js配置文档）

steps: array; // 引导步骤
animate: boolean;// 是否打开动画，默认true
overlayColor: string;// 背景颜色，默认黑色
allowClose: boolean;// 是否允许通过单击背景关闭弹出窗口，默认true
overlayOpacity: number;// 背景色不透明度，默认0.5
stagePadding: number;// 高亮框内边距，默认10
stageRadius: number;// 高亮框圆角值，默认5
allowKeyboardControl: boolean;// 允许通过键盘控制(esc键关闭，箭头键移动)，默认true
showButtons: AllowedButtons[];// 显示的按钮，可选'next','previous','close'
disableButtons: AllowedButtons[];// 禁用的按钮，可选'next','previous','close'
showProgress: boolean;// 是否显示引导进度，默认false
progressText: string;  // 进度文本，current:当前步骤，total:总步骤数
nextBtnText: string;// 下一步按钮文本
prevBtnText: string;// 上一步按钮文本
doneBtnText: string;// 完成按钮文本
onNextClick: () => {
  console.log("下一步");
  driverObj.moveNext();
},
onPrevClick: () => {
  console.log("上一步");
  driverObj.movePrevious();
},
onCloseClick: () => {
  console.log("关闭");
  driverObj.destroy();
},
onDestroyed: () => {
  console.log("完成");
  driverObj.destroy();
},

完整代码

<template>
  <div>
    <div id="step-1"></div>
    <div id="step-2"></div>
    <div id="step-3"></div>
  </div>
</template>
<script>
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
export default {
  mounted() {
    const driverObj = driver({
      animate: true,
      overlayOpacity: 0.75,
      stagePadding: 10,
      allowClose: false,
      overlayClickNext: false,
      doneBtnText: "完成",
      nextBtnText: "下一步",
      showButtons: ["next", "close"],
      onNextClick: () => {
        console.log("下一步");
        driverObj.moveNext();
      },
      onPrevClick: () => {
        console.log("上一步");
        driverObj.movePrevious();
      },
      onCloseClick: () => {
        console.log("关闭");
        driverObj.destroy();
      },
      onDestroyed: () => {
        console.log("完成");
        driverObj.destroy();
      },
      steps: [
        {
          element: "#step-1",
          popover: {
            title: "第一步",
            side: "center",
            align: "start",
          },
        },
        {
          element: "#step-2",
          popover: {
            title: "第二步",
            side: "center",
            align: "start",
          },
        },
        {
          element: "#step-3",
          popover: {
            title: "第三步",
            side: "center",
            align: "start",
          },
        },
      ],
    });
    driverObj.drive();
  },
};
</script>