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()
                    }
                },
            },
            ...,
        ]);
相关推荐
GDAL40 分钟前
openresty入门教程:init_by_lua_block
开发语言·lua·openresty
乐闻x2 小时前
ESLint 使用教程(五):ESLint 和 Prettier 的结合使用与冲突解决
javascript·eslint·prettier
计算机毕设源码qq-38365310412 小时前
(附项目源码)Java开发语言,springboot汽车租赁管理系统_581,计算机毕设程序开发+文案(LW+PPT)
java·开发语言·spring boot·mysql·课程设计
yngsqq2 小时前
各种排序分组
java·开发语言·数据库
Trouvaille ~2 小时前
【优选算法篇】微位至简,数之恢宏——解构 C++ 位运算中的理与美
开发语言·c++·算法·青少年编程·面试·蓝桥杯·位运算
堕落年代2 小时前
React Native的生命周期
javascript·react native·react.js
知孤云出岫2 小时前
python爬虫指南——初学者避坑篇
开发语言·爬虫·python
Python_trys2 小时前
Python爬虫基础-正则表达式!
开发语言·爬虫·python·正则表达式·编程
来自宇宙的曹先生2 小时前
k8s核心概念
java·开发语言·数据库·云原生·容器·kubernetes
青少儿编程课堂2 小时前
2024年3月电子学会Python等级考试试卷(四级)真题,包含答案
前端·javascript·python·电子学会·电子学会2024年3月真题·电子学会真题