Vue3: 网站引导工具使用_vue网站指引-CSDN博客

本文链接：https://blog.csdn.net/Message_lx/article/details/128406663

本文介绍了Driver.js库的安装、使用方法，以及详细的API参数介绍，包括高亮元素、带弹窗操作。适合前端开发者了解如何创建交互式教程和提示。

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

安装步骤

npm install driver.js --save

<script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">

使用步骤


  import Driver from 'driver.js'; // import driver.js
  import 'driver.js/dist/driver.min.css'; // import driver.js css
  
  const steps = [
    {
      element: '#header',
      popover: {
        title: '这是本站首页',
        description: '本站首页是一些展示性的信息',
        // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center

        position: 'bottom-center',
      },
    },
    {
      element: '#search',
      popover: {
        title: '搜索区域',
        description: '你可以定义这部分的动画及样式',
        // position can be left, left-center, left-bottom, top,
    // top-center, top-right, right, right-center, right-bottom,
    // bottom, bottom-center, bottom-right, mid-center

        position: 'bottom',
      },
    },
    {
      element: '#tool',
      popover: {
        title: '工具栏',
        description: '你可以定义这部分的动画及样式',
        position: 'top',
      },
    },
  ];
  function showTips() {
    const driver = new Driver({
      prevBtnText: '上一步',
      nextBtnText: '下一步',
      doneBtnText: '我知道了',
      closeBtnText: '关闭',
      onReset: (ele: any) => {
        localStorage.setItem('driver', JSON.stringify({ firstVisit: false }));
      },
    });
    driver.defineSteps(steps);
    driver.start();
  }

  onMounted(() => {
    showTips();
  });

API 参数介绍

高亮元素

const focusDriver = new Driver();

// Highlight the section on focus
document.getElementById('creation-input')
  .addEventListener('focus', (e) => {
    focusDriver.focus('#creation-input');
  });

带弹窗

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  }
});

参数说明

const driver = new Driver({
 //包裹driver.js弹窗的类名 className to wrap driver.js popover
  className: 'scoped-class', 
  // 高亮元素改变时是否显示动画 Animate while changing highlighted element
  animate: true,  
  //背景透明度(0 表示只有弹窗并且没有遮罩) Background opacity (0 means only popovers and without overlay)
  opacity: 0.75,  
  //  元素与边缘的距离 Distance of element from around the edges
  padding: 10,   
  // 是否允许点击遮罩时关闭 Whether clicking on overlay should close or not
  allowClose: true, 
  //是否允许点击遮罩时移到到下一步 Should it move to next step on overlay click
  overlayClickNext: false, 
  // 最终按钮上的文本 Text on the final button
  doneBtnText: 'Done', 
  // 当前步骤关闭按钮上的文本 Text on the close button for this step
  closeBtnText: 'Close',
  //当前步骤下一步按钮上的文本 Next button text for this step 
  nextBtnText: 'Next', 
  // 当前步骤上一步按钮上的文本 Previous button text for this step
  prevBtnText: 'Previous', 
  //是否在底部显示控制按钮 Do not show control buttons in footer
  showButtons: false, 
  // 是否允许通告键盘控制(escape关闭，箭头键用于移动)Allow controlling through keyboard (escape to close, arrow keys to move)
  keyboardControl: true, 
  scrollIntoViewOptions: {}, //  `scrollIntoView()` 方法的选项 We use `scrollIntoView()` when possible, pass here the options for it if you want any
  // 元素开将要高亮时调用Called when element is about to be highlighted
  onHighlightStarted: (Element) {}, 
  // 元素开完全高亮时调用Called when element is fully highlighted
  onHighlighted: (Element) {}, 
  // 取消选择时调用 Called when element has been deselected
  onDeselected: (Element) {}, 
  // 遮罩将要关闭时调用 Called when overlay is about to be cleared
  onReset: (Element) {},   
  // 任何步骤中移到到下一步时调用Called when moving to next step on any step     
  onNext: (Element) => {},     
   // 任何步骤中移到到上一步时调用Called when moving to next step on any step 
  onPrevious: (Element) => {}, 
});

setps

const stepDefinition = {
  // // 需要被高亮的查询选择器字符或Node。 Query selector string or Node to be highlighted
  element: '#some-item',        
  popover: {                    // 如果为空将不会显示弹窗There will be no popover if empty or not given
  // 除了Driver选项中的通用类名称之外，还可以指定包裹当前指定步骤弹窗的类名  className to wrap this specific step popover in addition to the general className in Driver options
    className: 'popover-class', 
     // 弹窗的标题 Title on the popover
    title: 'Title',     
    // 弹窗的主体内容 Body of the popover       
    description: 'Description', 
    // 是否在底部显示控制按钮 Do not show control buttons in footer
    showButtons: false,    
    // 关闭按钮的文本 Text on the close button for this step     
    closeBtnText: 'Close',  
    // 当前步骤的下一步按钮文本 Next button text for this step   
    nextBtnText: 'Next',      
    // 当前步骤的上一步按钮文本 Previous button text for this step 
    prevBtnText: 'Previous',    
  }
};

API

// 检查driver是否激活Checks if the driver is active or not
const isActivated = driver.isActivated; 
// 移动到步骤列表中的下一步 Moves to next step in the steps list
driver.moveNext();   
// 移动到步骤列表中的上一步 Moves to previous step in the steps list  
driver.movePrevious(); 
// 从指定的步骤开始 Starts driving through the defined steps
driver.start(stepNumber = 0);  
// 高亮通过查询选择器指定的或步骤定义的元素 highlights the element using query selector or the step definition
driver.highlight(string|stepDefinition); 
// 重置遮罩并且清屏Resets the overlay and clears the screen
driver.reset(); 
//检查是否有高亮元素 Checks if there is any highlighted element
driver.hasHighlightedElement(); 
// 检查是否有可移动到的下一步元素 Checks if there is next step to move to
driver.hasNextStep(); 
// 检查是否有可移动到的上一步元素。Checks if there is previous step to move to
driver.hasPreviousStep(); 
// 阻止当前移动。如果要执行某些异步任务并手动移动到下一步，则在“onNext”或“onPrevious”中很有用 Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
// perform some asynchronous task and manually move to next step

driver.preventMove();

// 获取屏幕上当前高亮元素 Gets the currently highlighted element on screen
const activeElement = driver.getHighlightedElement();
// 获取活动元素的屏幕坐标Gets screen co-ordinates of the active element
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); 
// 隐藏弹窗Hide the popover
activeElement.hidePopover();
// 显示弹窗Show the popover
activeElement.showPopover();  
// 获取此元素后面的DOM元素Gets the DOM Element behind this element
activeElement.getNode();