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()
                    }
                },
            },
            ...,
        ]);
相关推荐
Swift社区3 小时前
在 Swift 中实现字符串分割问题:以字典中的单词构造句子
开发语言·ios·swift
new出一个对象3 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
没头脑的ht3 小时前
Swift内存访问冲突
开发语言·ios·swift
没头脑的ht3 小时前
Swift闭包的本质
开发语言·ios·swift
wjs20243 小时前
Swift 数组
开发语言
你挚爱的强哥4 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
stm 学习ing4 小时前
FPGA 第十讲 避免latch的产生
c语言·开发语言·单片机·嵌入式硬件·fpga开发·fpga
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
湫ccc5 小时前
《Python基础》之字符串格式化输出
开发语言·python