用户引导插件driverjs的基本使用以及弹窗样式修改方法

更新时间：2024年04月18日 09:37:19 作者：卡夫卡的小熊猫

Driver.js是一个强大的、轻量级、使用原生JavaScript引擎开发的库,用于在页面聚焦用户的关注点,下面这篇文章主要介绍了用户引导插件driverjs的基本使用以及弹窗样式修改方法,需要的朋友可以参考下

前言

Driver.js 是一个强大的，轻量级，使用原生 JavaScript 引擎开发的库，用于在页面聚焦用户的关注点。它支持所有主流浏览器，并且可高度自定义。

Driver.js 并不仅仅是一个指南性质的库，其用户场景非常广泛，能够用于任何需要为页面构建浮层的情况，譬如当用户需要与某些元素交互而隐藏其他元素的场景。

特点：

简单:使用简单，完全没有外部依赖
轻量级:与其他库的压缩量+12kb相比，压缩量仅为5kb
高度可定制:拥有强大的API，可以随心所欲地使用
突出显示任何内容:突出显示页面上的任何(字面上的任何)元素
功能介绍:为您的web应用程序创建强大的功能介绍
焦点移位器:为用户添加焦点移位器
用户友好:一切都是由键盘控制
TypeScript:用TypeScript编写
一致的行为:适用于所有浏览器
MIT授权:个人免费

安装

npm install driver.js

<link rel="stylesheet" href="/dist/driver.min.css" rel="external nofollow" >
<script src="/dist/driver.min.js"></script>

示例

基本使用

引入 driverjs：

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

创建实例

const driverObj = driver({
    showProgress: true,
    steps: cls,
    showButtons: ["next"],
    popoverClass: "driverjs-theme",
    showProgress: false,
    popoverOffset: 50,
    doneBtnText: "知道了",
    nextBtnText: "知道了",
  });

实例属性介绍：

className：className用来包装driver.js弹出窗口
animate：动画时改变突出显示的元素
opacity：背景不透明度(0表示只有弹出窗口，没有覆盖)
padding：元素到周围边缘的距离
popoverOffset：弹窗与元素偏移距离
allowClose：点击覆盖是否应该关闭
showProgress：是否显示弹窗进度
overlayClickNext：它应该移动到下一步叠加点击
doneBtnText：最后一个按钮上的文本
closeBtnText：此步骤的关闭按钮上的文本
nextBtnText：此步骤的下一个按钮文本
prevBtnText：此步骤的上一个按钮文本
showButtons：在页脚不显示控制按钮
keyboardControl：允许通过键盘控制(escape键关闭，箭头键移动)
scrollIntoViewOptions：我们在可能的情况下使用' scrollIntoView() '，如果你想要的话，在这里传递它的选项
showButtons：显示按钮合集（previous， next， close）
onHighlightStarted：当元素即将突出显示时调用
onHighlighted：当元素完全高亮显示时调用
onDeselected：当元素被取消选中时调用
onReset：当覆盖即将被清除时调用
onNext：在任何步骤移动到下一步时调用
onPrevious：在任何步骤移动到上一步时调用

注意，您在驱动程序（step属性）定义中提供的所有按钮选项都可以通过在步骤定义中提供它们来覆盖特定步骤

step 属性：

const stepDefinition = {
  element: '#some-item',       
  popover: {                    
    className: 'popover-class',
    title: 'Title',             
    description: 'Description', 
    showButtons: false,         
    closeBtnText: 'Close',      
    nextBtnText: 'Next',       
    prevBtnText: 'Previous',  
    popoverClass: "driverjs-theme",
  }
};

element：要突出显示的查询选择器字符串或节点
popover

- className：className来包装这个特定的步骤弹出窗口，除了驱动程序选项中的一般className
- title：弹出窗口上的标题
- description：弹出窗口上的描述信息
- showButtons：在页脚不显示控制按钮
- closeBtnText：此步骤的关闭按钮上的文本
- nextBtnText：此步骤的下一个按钮文本
- prevBtnText：此步骤的上一个按钮文本
- popoverClass：弹窗的自定义样式名

API 方法

const driver = new Driver(driverOptions);

const isActivated = driver.isActivated; 
driver.moveNext();     
driver.movePrevious(); 
driver.start(stepNumber = 0);  
driver.highlight(string|stepDefinition); 
driver.reset(); 
driver.hasHighlightedElement(); 
driver.hasNextStep(); 
driver.hasPreviousStep(); 
driver.preventMove();

const activeElement = driver.getHighlightedElement();
const lastActiveElement = driver.getLastHighlightedElement();
activeElement.getCalculatedPosition(); 
activeElement.hidePopover();  
activeElement.showPopover();  

activeElement.getNode();

isActivated：检查驱动程序是否激活
moveNext：移动到步骤列表中的下一步
movePrevious：移动到步骤列表中的上一步
start：开始执行定义的步骤
highlight：使用查询选择器或步骤定义突出显示元素
reset：重置覆盖并清除屏幕
hasHighlightedElement：检查是否有突出显示的元素
hasNextStep：检查是否有下一步要进行
hasPreviousStep：检查是否有上一步要移动
preventMove：阻止当前移动。有用的' onNext '或' onPrevious '，如果你想；执行一些异步任务并手动移动到下一步
getCalculatedPosition：获取屏幕上当前突出显示的元素
getCalculatedPosition：获取活动元素的屏幕坐标
hidePopover：隐藏弹出窗口
showPopover：显示弹出窗口
getNode：获取该元素背后的DOM元素

highlight

突出显示单个元素：

只需传递选择器即可突出显示单个元素。

const driver = new Driver();
driver.highlight('#create-post');

一个实际的例子是：使用它来调暗背景并突出显示所需的元素。

突出显示和弹出框：

可以使用弹出窗口在突出显示的元素旁边显示其他详细信息

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

定位弹出框：

默认情况下，driver.js 会自动找到合适的弹出位置并显示它。也可以使用 position 属性来覆盖它。

const driver = new Driver();
driver.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
    position: 'left', // 可以使用 `top`, `left`, `right`, `bottom`
  }
});

方法导出：

export function dri(cls, type) {
  // cls dialog节点class, 如果没有dialog 传个undefined
  // type  driver步骤,
  // 开启 这里用不用定时器自己测试,看看去掉之后管不管用
  setTimeout(() => {
    driv(cls, type);
  }, 300);
}

function driv(cls, type) {
  cls.map((item) => {
    item.popover.side = item.popover.side ? item.popover.side : "bottom";
    return item;
  });
  const driverObj = driver({
    showProgress: true,
    steps: cls,
    showButtons: ["next"],
    popoverClass: "driverjs-theme",
    showProgress: false,
    popoverOffset: 50,
    doneBtnText: "知道了",
    nextBtnText: "知道了",
  });

  driverObj.drive();
}

使用：

dri([
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `test`,
        },
      },
      {
        element: ".top-first",
        popover: {
          description: "测试2",
        },
      },
    ]);

弹窗样式修改

这里介绍三种修改样式的方式：

通过属性 popoverClass 来自定义属性
直接修改插件中的样式
在 description 属性中使用模版字符串编写 html

popoverClass

在 step 数据 list 列表的属性中添加 popoverClass 属性，来自定义属性

const driver = [
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `test`,
        },
      },
    ]
dri(driver)

.driver-popover .driverjs-theme {
  background-color: #fde047;
  color: #000;
}
.driver-popover .driverjs-theme .driver-popover-title {
    display: none; 
  }

样式修改

新手引导元素是建立在body下面，所以样式不能写在当前vue文件中的scoped中

<style lang="less">
div#driver-popover-item{  // 最外面样式
  border-radius: 0;
  padding: 0;
  // width: 260px;
  // height: 160px;
  div.driver-popover-title {
    display: none; // 隐藏标题
  }
  div.driver-popover-footer{
    display: flex!important;
    justify-content: center;
    margin-bottom: 20px;
    button.driver-close-btn {
      display: none; // 隐藏关闭按钮
    }
    .driver-btn-group{
      display: flex;
      justify-content: center;
      button.driver-prev-btn{
      display: none !important; // 隐藏上一步按钮
      }
      button.driver-next-btn {
        width: 74px;
        height: 34px;
        background: #345eef;
        color: #fff;
        text-shadow: none;
      }
    }
  }
  .driver-popover-description{ // 内容样式设置
    font-size: 14px;
    margin: 50px auto 29px;
    .step_two {
      display: flex;
      align-items: center;
      justify-content: center;
      .step_first{
        width: 20px;
        height: 20px;
        background: #345eef;
        border-radius: 50%;
        color: #fff;
        line-height: 20px;
        margin-right: 5px;
        text-align: center;
      }
    }
  }
}
</style>

借助 description 属性

可以在 step 步骤 list 得属性 description 使用模板字符串中编写描述内容的样式，该方法仅限于描述内容中的样式修改，前两个方法适用于整个弹窗的样式修改。

const driver = [
      {
        element: ".select-element1",
        popover: {
          popoverClass: "driverjs-theme",
          align: "center",
          description: `
            <div style='color: red'>222</div>
            <div style='color: red;font-size:0.36rem'>222</div>
            <div style='width:100%; height:0.01rem; background: #4d7ee4'></div>
          `,
        },
      }
]

dri(driver)

总结

到此这篇关于用户引导插件driverjs的基本使用以及弹窗样式修改方法的文章就介绍到这了,更多相关用户引导插件driverjs使用及弹窗样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Javascript Echarts空气质量地图效果详解
这篇文章主要介绍了详解Javascript利用echarts画空气质量地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-10-10
JavaScript 数组展平方法: flat() 和 flatMap()详解
从 ES2019 中开始引入了一种扁平化数组的新方法，可以展平任何深度的数组，这篇文章主要介绍了JavaScript 数组展平方法: flat() 和 flatMap()详解,需要的朋友可以参考下
2023-06-06
JavaScript数组问题解决的多种方法
JavaScript数组问题多种方法小结，众多blueidea高手联袂打造
2008-07-07
JS面试题---关于算法台阶的问题
下面小编就为大家带来一篇JS面试题---关于算法台阶的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
手把手教会你使用redux的入门教程
本文主要介绍了手把手教会你使用redux的入门教程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
JS继承实现方法及优缺点详解
这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
Layui实现带查询条件的分页
这篇文章主要为大家详细介绍了Layui实现带查询条件的分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
js实现贪吃蛇游戏含注释
这篇文章主要为大家详细介绍了js实现贪吃蛇游戏含注释，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript包装对象使用介绍
这篇文章主要介绍了JavaScript中包装对象的一些知识点，包括内置对象等
2013-08-08
javascript中强制执行toString()具体实现
Javascript通常会根据方法或运算符的需要而自动把值转成所需的类型，这可能导致各种错误，接下来为大家介绍下javascript如何强制执行toString()，感兴趣的朋友可以参考下哈
2013-04-04