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()
}
},
},
...,
]);