javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 用户引导插件driverjs使用及弹窗样式

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

作者：卡夫卡的小熊猫

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

前言

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

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

特点：

安装

npm install driver.js

or

<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: "知道了",
  });

实例属性介绍：

注意，您在驱动程序（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",
  }
};

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();

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

在 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使用及弹窗样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文