Driver.js使用指南

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

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 Configif (steps.length <= 1) {obj.showButtons = ["next"];}const driverObj = driver(obj);driverObj.drive();return driverObj;
};

@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

const driverObj = driverStep([{element: '#zero-step',popover: {description: '',side: 'bottom',align: 'center',onNextClick: () => {driverObj.moveNext()}},},...,]);