aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-22-dist

Browse Source
This commit is contained in:
X1627315083
2023-11-22 15:41:46 +08:00
parent 91d93484de
commit 4c5af44e3d
36 changed files with 209 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/tool/guide.js
View File

@@ -1,12 +1,14 @@
import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { useStore } from "vuex";
//版本一
let driverIndex__ = 0
let store
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,//控制总页数和当前页数是否显示
@@ -16,26 +18,75 @@ const driverObj__ = driver({
stageRadius:5,//切口圆弧度
allowKeyboardControl:true,//控制是否可以键盘控制下一步
disableActiveInteraction:false,//是否禁用显示元素的交互
// overlay: true,
overlayOpacity:.4,
overlay: true,
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
console.log(popover,options);
if(options.state.activeIndex >= 1 && options.state.activeIndex <= 3){
// console.log(popover,options);
popover.previousButton.style.display = 'none'
if(options.state.activeIndex >= 1 && options.state.activeIndex <= 2){
popover.footer.style.display = 'block'
addDiv(options.state.activeElement)
}else{
popover.footer.style.display = 'none'
removeDiv(options.state.activeElement)
}
// console.log(options.state.activeIndex);
driverIndex__ = driverObj__.getState().activeIndex
let data = {
index:driverIndex__
}
store?.commit("setGuide", data);
},
// onNextClick:(element, step, options) =>{
// console.log(element,step,options);
// driverObj__.moveNext()
// // element.style.posiiton = 'relative'
// // const mask = document.createElement('div');
// // mask.style.position = 'absolute';
// // mask.style.top = '0';
// // mask.style.left = '0';
// // mask.style.width = '100%';
// // mask.style.height = '100%';
// // mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
// // mask.style.zIndex = '9999';
// // element.appendChild(mask);
// }
});
function addDiv(element){
element.style.posiiton = 'relative'
const mask = element.getElementsByClassName('driver-mask')?.[0]
if(mask){
}else{
const mask = document.createElement('div');
mask.style.position = 'absolute';
mask.style.top = '0';
mask.style.left = '0';
mask.style.width = '100%';
mask.style.height = '100%';
mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
mask.style.zIndex = '9999';
mask.classList.add('driver-mask')
element.appendChild(mask);
}
}
function removeDiv(element){
const mask = element.getElementsByClassName('driver-mask')?.[0]
console.log(element);
if(mask){
// element.removeChild(mask);
mask.remove()
}
}
const openGuide = () =>{
// driverObj__.drive();
driverObj__.moveNext();
driverObj__.movePrevious();
store = useStore()
// driverObj__.moveNext();
// driverObj__.movePrevious();
}
export{
openGuide,
driverObj__,
driverIndex__,
}