产品导览库Driver.js学习指南

中文官网

Vue基础使用

相关配置说明

type Config = {

  // Array of steps to highlight. You should pass 要突出显示的步骤数组。你应该通过
  // this when you want to setup a product tour. 当您想要设置产品导览时使用此选项。
  steps?: DriveStep[];

  // Whether to animate the product tour. (default: true) 是否对产品导览进行动画处理。 （默认值：true）
  animate?: boolean;
  
  // Overlay color. (default: black) 覆盖颜色。 （默认：黑色）
  // This is useful when you have a dark background 当你有深色背景时这很有用
  // and want to highlight elements with a light 想要用灯光突出显示元素
  // background color. 背景颜色。
  overlayColor?: string;
  
  // Whether to smooth scroll to the highlighted element. (default: false) 是否平滑滚动到突出显示的元素。 （默认值：假）
  smoothScroll?: boolean;
  
  // Whether to allow closing the popover by clicking on the backdrop. (default: true) 是否允许通过点击背景来关闭弹出窗口。 （默认值：true）
  allowClose?: boolean;
  
  // Opacity of the backdrop. (default: 0.5) 背景的不透明度。 （默认值：0.5）
  overlayOpacity?: number;
  
  // Distance between the highlighted element and the cutout. (default: 10) 突出显示的元素和切口之间的距离。 （默认值：10）
  stagePadding?: number;
  
  // Radius of the cutout around the highlighted element. (default: 5) 突出显示元素周围的切口半径。 （默认值：5）
  stageRadius?: number;

  // Whether to allow keyboard navigation. (default: true) 是否允许键盘导航。 （默认值：true）
  allowKeyboardControl?: boolean;

  // Whether to disable interaction with the highlighted element. (default: false) 是否禁用与突出显示元素的交互。 （默认值：否）
  disableActiveInteraction?: boolean;

  // If you want to add custom class to the popover 如果你想将自定义类添加到弹出窗口
  popoverClass?: string;
  
  // Distance between the popover and the highlighted element. (default: 10) 弹出框和突出显示元素之间的距离。 （默认值：10）
  popoverOffset?: number;
  
  // Array of buttons to show in the popover. Defaults to ["next", "previous", "close"] 
  // 要在弹出窗口中显示的按钮数组。默认为 [“下一个”、“上一个”、“关闭”]
  // for product tours and [] for single element highlighting. 用于产品导览，[] 用于单个元素突出显示。
  showButtons?: AllowedButtons[];
  
  // Array of buttons to disable. This is useful when you want to show some of the  要禁用的按钮数组。当您想要显示一些内容时，这很有用
  // buttons, but disable some of them. 按钮，但禁用其中一些。
  disableButtons?: AllowedButtons[];

  // Whether to show the progress text in popover. (default: false) 是否在弹出窗口中显示进度文本。 （默认值：否）
  showProgress?: boolean;
  
  // Template for the progress text. You can use the following placeholders in the template: 进度文本的模板。您可以在模板中使用以下占位符：
  //  - {{current}}: The current step number 当前步骤号
  //  - {{total}}: Total number of steps 总步数
  progressText?: string;

  // Text to show in the buttons. `doneBtnText` is used on the last step of a tour. 在按钮中显示的文本， `doneBtnText` 用于游览的最后一步。
  nextBtnText?: string;
  prevBtnText?: string;
  doneBtnText?: string;

  // Called after the popover is rendered. PopoverDOM is an object with references to the popover DOM elements such as buttons, title, descriptions, body, container etc.
  // 在渲染弹出窗口后调用,PopoverDOM 是一个引用的对象,例如按钮、标题、描述、正文、容器等。
  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;

  // Hooks to run before and after highlighting 
  // each step. Each hook receives the following
  // parameters:
  //   - element: The target DOM element of the step
  //   - step: The step object configured for the step
  //   - options.config: The current configuration options
  //   - options.state: The current state of the driver
  // 在突出显示之前和之后运行的钩子
  // 每一步。每个钩子接收以下内容
  // 参数：
  // - element: 该步骤的目标 DOM 元素
  // - step: 为步骤配置的步骤对象
  // - options.config：当前配置选项
  // - options.state：驱动程序的当前状态
  
  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;

  // Hooks to run before and after the driver driverjs销毁时的钩子函数
  // is destroyed. Each hook receives
  // the following parameters:
  //   - element: Currently active element
  //   - step: The step object configured for the currently active
  //   - options.config: The current configuration options
  //   - options.state: The current state of the driver
  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;

  // Hooks to run on button clicks. Each hook receives 单击按钮时运行的钩子函数
  // the following parameters:
  //   - element: The current DOM element of the step
  //   - step: The step object configured for the step
  //   - options.config: The current configuration options
  //   - options.state: The current state of the driver
  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;;
};