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()
                    }
                },
            },
            ...,
        ]);
相关推荐
薄雾晚晴17 小时前
Rspack 实战:用 image-minimizer-webpack-plugin 做图片压缩,优化打包体积
javascript·vue.js
kymjs张涛17 小时前
零一开源|前沿技术周刊 #15
前端·javascript·面试
古夕18 小时前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部18 小时前
前端-业务-架构
前端·javascript·代码规范
华仔啊18 小时前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
小高00718 小时前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript
flyliu18 小时前
再再次去搞懂事件循环
前端·javascript
摸鱼仙人~18 小时前
深入理解 MyBatis-Plus 的 `BaseMapper`
java·开发语言·mybatis
XiaoMu_00118 小时前
基于Node.js和Three.js的3D模型网页预览器
javascript·3d·node.js
卿·静18 小时前
Node.js对接即梦AI实现“千军万马”视频
前端·javascript·人工智能·后端·node.js