Driver.js使用指南

Driver.js使用指南

备注: 本人使用版本"driver.js": "^1.3.1"

javascript 复制代码
import {driver} from 'driver.js';
import 'driver.js/dist/driver.css';
import {DriveStep} from 'driver.js';
import {Config} from 'driver.js';

export default driver;
// 根据业务进行的封装
export const driverStep = function (steps: DriveStep[] = [], onceKey?: string, options: Config = {}) {
    const obj = {
        smoothScroll: false,
        allowClose: false,
        stagePadding: 0,
        // showButtons: [
        //   "previous",
        //   'next',
        //   "close"
        // ],
        progressText: "{{current}}/{{total}}",
        nextBtnText: '下一条',
        prevBtnText: '上一条',
        doneBtnText: '我知道啦',
        // showProgress: true,
        steps,
        ...options
    } as Config
    if (steps.length <= 1) {
        obj.showButtons = ["next"];
    }
    const driverObj = driver(obj);
    driverObj.drive();
    return driverObj;
};
css 复制代码
@import 'driver.theme.less';
body {
  @primary-color: #4c70fe;
  .driver-popover {
    background-color: @primary-color;
    color: white;
  }
  .driver-popover-footer {
    margin-top: 28px;
  }
  .driver-popover .driver-popover-title {
    font-size: 20px;
  }
  .driver-popover .driver-popover-title,
  .driver-popover .driver-popover-description,
  .driver-popover .driver-popover-progress-text {
    color: white;
  }
  .driver-popover button {
    background-color: white;
    color: @primary-color;
    padding: 7px 16px;
    border: none;
  }
  .driver-popover button:focus,
  .driver-popover button:hover {
    // opacity: 0.8;
  }
  .driver-popover .driver-popover-navigation-btns {
    justify-content: flex-end;
    gap: 3px;
  }
  .driver-popover .driver-popover-close-btn {
    visibility: hidden;
    color: white;
    background-color: transparent;
    padding: 0;
    right: -5px;
    top: -5px;
    font-size: 13px;
  }
  // .driver-popover .driver-popover-close-btn:hover {
  //   color: #000;
  // }
  .driver-popover .driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: @primary-color;
  }
  .driver-popover .driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: @primary-color;
  }
  .driver-popover .driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: @primary-color;
  }
  .driver-popover .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: @primary-color;
  }
  *[aria-controls='driver-popover-content'] {
    &:after {
      content: '';
      position: absolute;
      border: 1px dashed white;
      border-radius: 8px;
      width: 100%;
      height: 100%;
      padding: 18px;
      box-sizing: content-box;
      left: -19px;
      top: -19px;
    }
  }
  .driver-dom {
    z-index: 10001;
  }
  button.driver-popover-prev-btn {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    text-shadow: none !important;
    &:hover,
    &:focus {
      background-color: transparent;
      color: white;
    }
  }
}

使用example

javascript 复制代码
const driverObj = driverStep([
            {
                element: '#zero-step',
                popover: {
                    description: '',
                    side: 'bottom',
                    align: 'center',
                    onNextClick: () => {
                        driverObj.moveNext()
                    }
                },
            },
            ...,
        ]);
相关推荐
源猿人3 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin3 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖5 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬5 小时前
Promise 的场景和最佳实践
前端·javascript
Asort5 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio5 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
Lotzinfly5 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果5 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
普郎特6 小时前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
侃侃_天下6 小时前
最终的信号类
开发语言·c++·算法