41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
|
import { driver } from "driver.js";
|
||
|
|
import "driver.js/dist/driver.css";
|
||
|
|
//版本一
|
||
|
|
const driverObj__ = driver({
|
||
|
|
steps: [
|
||
|
|
{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
|
||
|
|
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
|
||
|
|
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
|
||
|
|
{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
|
||
|
|
{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
|
||
|
|
],
|
||
|
|
// showProgress: true,//控制总页数和当前页数是否显示
|
||
|
|
allowClose:false,
|
||
|
|
showButtons:false,
|
||
|
|
stagePadding:10,//切口到元素的距离
|
||
|
|
stageRadius:5,//切口圆弧度
|
||
|
|
allowKeyboardControl:true,//控制是否可以键盘控制下一步
|
||
|
|
disableActiveInteraction:false,//是否禁用显示元素的交互
|
||
|
|
// overlay: true,
|
||
|
|
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
|
||
|
|
console.log(popover,options);
|
||
|
|
if(options.state.activeIndex >= 1 && options.state.activeIndex <= 3){
|
||
|
|
popover.footer.style.display = 'block'
|
||
|
|
}else{
|
||
|
|
popover.footer.style.display = 'none'
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
const openGuide = () =>{
|
||
|
|
// driverObj__.drive();
|
||
|
|
driverObj__.moveNext();
|
||
|
|
driverObj__.movePrevious();
|
||
|
|
}
|
||
|
|
|
||
|
|
export{
|
||
|
|
openGuide,
|
||
|
|
driverObj__,
|
||
|
|
}
|